Created a contact form section
installed three js added test model to contact form section fixed issue with double render of useEffect that was causing it to show up twice once compiled. This was resolved using a boolean check to see if it is mounted first. n Next.js, when you navigate between pages, the entire React tree is unmounted and then remounted. This means that any component with a useEffect hook will run its cleanup function before being unmounted, and then its effect function again when it is remounted. This can cause the effect to run twice.
This commit is contained in:
parent
a1844b29e6
commit
7de4b7bbfa
98
Components/Elements/ContactThreeJsComponent.jsx
Normal file
98
Components/Elements/ContactThreeJsComponent.jsx
Normal file
@ -0,0 +1,98 @@
|
||||
import React, { useRef, useEffect, useState } from 'react';
|
||||
import * as THREE from 'three';
|
||||
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
|
||||
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
|
||||
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
|
||||
import { RGBShiftShader } from 'three/examples/jsm/shaders/RGBShiftShader.js';
|
||||
import { DotScreenShader } from 'three/examples/jsm/shaders/DotScreenShader.js';
|
||||
|
||||
const ContactThreeJsComponent = React.memo(() => {
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
const mountRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
|
||||
if (isMounted) {
|
||||
console.log("useEffect called");
|
||||
let camera, renderer, composer;
|
||||
let object;
|
||||
|
||||
function init() {
|
||||
renderer = new THREE.WebGLRenderer();
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
mountRef.current.appendChild(renderer.domElement);
|
||||
|
||||
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
|
||||
camera.position.z = 400;
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
scene.fog = new THREE.Fog(0x000000, 1, 1000);
|
||||
|
||||
object = new THREE.Object3D();
|
||||
scene.add(object);
|
||||
|
||||
const geometry = new THREE.SphereGeometry(1, 4, 4);
|
||||
const material = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true });
|
||||
|
||||
for (let i = 0; i < 100; i++) {
|
||||
const mesh = new THREE.Mesh(geometry, material);
|
||||
mesh.position.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize();
|
||||
mesh.position.multiplyScalar(Math.random() * 400);
|
||||
mesh.rotation.set(Math.random() * 2, Math.random() * 2, Math.random() * 2);
|
||||
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50;
|
||||
object.add(mesh);
|
||||
}
|
||||
|
||||
scene.add(new THREE.AmbientLight(0x222222));
|
||||
|
||||
const light = new THREE.DirectionalLight(0xffffff);
|
||||
light.position.set(1, 1, 1);
|
||||
scene.add(light);
|
||||
|
||||
composer = new EffectComposer(renderer);
|
||||
composer.addPass(new RenderPass(scene, camera));
|
||||
|
||||
const effect1 = new ShaderPass(DotScreenShader);
|
||||
effect1.uniforms['scale'].value = 4;
|
||||
composer.addPass(effect1);
|
||||
|
||||
const effect2 = new ShaderPass(RGBShiftShader);
|
||||
effect2.uniforms['amount'].value = 0.0015;
|
||||
composer.addPass(effect2);
|
||||
|
||||
window.addEventListener('resize', onWindowResize);
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
composer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
object.rotation.x += 0.005;
|
||||
object.rotation.y += 0.01;
|
||||
composer.render();
|
||||
}
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
return () => {
|
||||
// cleanup logic
|
||||
window.removeEventListener('resize', onWindowResize);
|
||||
renderer.dispose();
|
||||
composer.dispose();
|
||||
};
|
||||
}
|
||||
}, [isMounted]);
|
||||
|
||||
return <div ref={mountRef} />;
|
||||
});
|
||||
|
||||
export default ContactThreeJsComponent;
|
||||
36
Components/Layout/ContactFormSection.jsx
Normal file
36
Components/Layout/ContactFormSection.jsx
Normal file
@ -0,0 +1,36 @@
|
||||
import VideoButton from "/home/clyde/Code/shiloh/Components/Buttons/video-button.jsx";
|
||||
import Link from "next/link";
|
||||
import ContactThreeJsComponent from "../Elements/ContactThreeJsComponent.jsx";
|
||||
|
||||
const ContactFormSection = ({
|
||||
text,
|
||||
videoId,
|
||||
buttonOneText,
|
||||
buttonTwoText,
|
||||
buttonLink = "/", // add a default value,
|
||||
}) => {
|
||||
|
||||
return (
|
||||
<div className="relative z-10 h-screen w-screen">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<ContactThreeJsComponent />
|
||||
</div>
|
||||
<div className="relative z-10 flex flex-col items-center justify-center h-full">
|
||||
<div className="relative flex justify-center items-end w-full mb-20">
|
||||
<h1 className="text-6xl font-normal text-white">{text}</h1>
|
||||
</div>
|
||||
<div className="flex justify-start space-x-4">
|
||||
<VideoButton videoId={videoId} buttonOneText={buttonOneText} />
|
||||
<Link
|
||||
href={buttonLink}
|
||||
className="px-4 mt-8 mx-5 py-2 text-white underline border-white rounded hover:border-white transition duration-300 ease-in-out focus:outline-none"
|
||||
>
|
||||
{buttonTwoText}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactFormSection;
|
||||
18
Components/Layout/sub-section.jsx
Normal file
18
Components/Layout/sub-section.jsx
Normal file
@ -0,0 +1,18 @@
|
||||
import Link from "next/link";
|
||||
|
||||
const SubSection = ({ h2Text, p1Text, h3Text, p2Text }) => {
|
||||
return (
|
||||
<div className="relative bg-blue-600 w-full h-screen">
|
||||
<div className="relative z-10 flex flex-col items-center justify-center h-full">
|
||||
<div className="relative flex justify-center items-end w-full mb-20">
|
||||
<h2 className="text-5xl font-normal text-white mt-8">{h2Text}</h2>
|
||||
</div>
|
||||
<p className="text-white text-lg mx-4 px-2">{p1Text}</p>
|
||||
<h3 className="text-5xl font-normal text-white mt-8">{h3Text}</h3>
|
||||
<p className="text-white text-lg mx-4 px-2">{p2Text}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubSection;
|
||||
81
package-lock.json
generated
81
package-lock.json
generated
@ -12,15 +12,18 @@
|
||||
"animejs": "^3.2.1",
|
||||
"autoprefixer": "10.4.14",
|
||||
"framer-motion": "^10.12.4",
|
||||
"grid": "^4.10.8",
|
||||
"next": "13.3.0",
|
||||
"observer": "^0.0.2",
|
||||
"pagination": "^0.4.6",
|
||||
"postcss": "8.4.22",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-intersection-observer": "^9.4.3",
|
||||
"react-modal-video": "^2.0.0",
|
||||
"react-player": "^2.12.0",
|
||||
"tailwindcss": "3.3.1"
|
||||
"tailwindcss": "3.3.1",
|
||||
"three": "^0.151.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
@ -2187,6 +2190,11 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/capitalize": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/capitalize/-/capitalize-0.5.0.tgz",
|
||||
"integrity": "sha512-PaTkpRT5BKne4tmt7a80HqCikvZCOKKbHkZIycqo77VSKfY/mGW3foKUky6Gi/6MsZmYegctEakY7o5YZXwz5w=="
|
||||
},
|
||||
"node_modules/chalk": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
|
||||
@ -2360,6 +2368,11 @@
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/click-off": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/click-off/-/click-off-0.2.1.tgz",
|
||||
"integrity": "sha512-EL4RXbrwIr/Sv3tcvnm5gVGqix8vna4X9q9nm3vZ2co9PmRVwH7XVdd+0sJLZZ/HZQaBPvF9fNRrWeUlBfRgvg=="
|
||||
},
|
||||
"node_modules/client-only": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
|
||||
@ -3181,6 +3194,19 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/element-class": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/element-class/-/element-class-0.1.1.tgz",
|
||||
"integrity": "sha512-jUN7QxMb2Yv255s/5DYSD0UZoAqC/J1tLVbbYAqzrwDp+yrTcjh6QfinLJEw0lT2h1R23wk27Vcfm/66LfXiIg==",
|
||||
"dependencies": {
|
||||
"inherits": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/element-class/node_modules/inherits": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.2.tgz",
|
||||
"integrity": "sha512-Al67oatbRSo3RV5hRqIoln6Y5yMVbJSIn4jEJNL7VCImzq/kLr7vvb6sFRJXqr8rpHc/2kJOM+y0sPKN47VdzA=="
|
||||
},
|
||||
"node_modules/elliptic": {
|
||||
"version": "6.5.4",
|
||||
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
|
||||
@ -3392,6 +3418,11 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/es6-object-assign": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
|
||||
"integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw=="
|
||||
},
|
||||
"node_modules/escalade": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
|
||||
@ -3416,6 +3447,11 @@
|
||||
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
|
||||
"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
|
||||
},
|
||||
"node_modules/escape-stack": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/escape-stack/-/escape-stack-0.1.2.tgz",
|
||||
"integrity": "sha512-nP/9OVJS7anQGhIYsVhWv1pXtwiuMB5E/N73iux0yjuOpwv5bDvOrtyMGOdB4uz4AYVnDGpe9wqSIOL72X13DA=="
|
||||
},
|
||||
"node_modules/escape-string-regexp": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
|
||||
@ -4497,6 +4533,24 @@
|
||||
"resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
|
||||
"integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
|
||||
},
|
||||
"node_modules/grid": {
|
||||
"version": "4.10.8",
|
||||
"resolved": "https://registry.npmjs.org/grid/-/grid-4.10.8.tgz",
|
||||
"integrity": "sha512-OKq4zhEj0ojpV+DyskQLpaGr8mSa1ZgA753NPTlJ67xeagqUA0tUjhDg3s0kEF0dEOigxVQ/cWjBMNfzcExtyg==",
|
||||
"dependencies": {
|
||||
"capitalize": "^0.5.0",
|
||||
"click-off": "~0.2.1",
|
||||
"element-class": "^0.1.1",
|
||||
"es6-object-assign": "~1.1.0",
|
||||
"escape-stack": "~0.1.2",
|
||||
"inner-text-shim": "~1.0.1",
|
||||
"key": "^0.1.11",
|
||||
"time-now": "~0.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/hard-rejection": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
|
||||
@ -5010,6 +5064,11 @@
|
||||
"source-map": "~0.5.3"
|
||||
}
|
||||
},
|
||||
"node_modules/inner-text-shim": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/inner-text-shim/-/inner-text-shim-1.0.1.tgz",
|
||||
"integrity": "sha512-8phW5hjjTpaxobktHFpW0YJcerSc5YS27lPSiF06LJmp5c7/Cms0zw8YORNE3Uy3+pOVjLLHApYA4KEIJiAh3Q=="
|
||||
},
|
||||
"node_modules/inquirer": {
|
||||
"version": "7.3.3",
|
||||
"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
|
||||
@ -5927,6 +5986,11 @@
|
||||
"node": ">=4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/key": {
|
||||
"version": "0.1.11",
|
||||
"resolved": "https://registry.npmjs.org/key/-/key-0.1.11.tgz",
|
||||
"integrity": "sha512-VCXx+Fo7vtA4/TnNJZg3znjQ9br6egswvnvObuu5gQfgsGay7kpxgbnqZk51y68qLceOYbR0/CUphWfMr9H09w=="
|
||||
},
|
||||
"node_modules/keyv": {
|
||||
"version": "4.5.2",
|
||||
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.2.tgz",
|
||||
@ -8263,6 +8327,11 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/pagination": {
|
||||
"version": "0.4.6",
|
||||
"resolved": "https://registry.npmjs.org/pagination/-/pagination-0.4.6.tgz",
|
||||
"integrity": "sha512-TnZ3l17uuC5H9Wlc9FMYuEi65JlUCSn1ZAbnLnvUGkR7RgaFknUNGQTEumhjq1Jy1ePkXSiYUFFbHH70LGb9dA=="
|
||||
},
|
||||
"node_modules/pako": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
|
||||
@ -10489,6 +10558,11 @@
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/three": {
|
||||
"version": "0.151.3",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.151.3.tgz",
|
||||
"integrity": "sha512-+vbuqxFy8kzLeO5MgpBHUvP/EAiecaDwDuOPPDe6SbrZr96kccF0ktLngXc7xA7bzyd3N0t2f6mw3Z9y6JCojQ=="
|
||||
},
|
||||
"node_modules/through": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
||||
@ -10503,6 +10577,11 @@
|
||||
"xtend": "~4.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/time-now": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/time-now/-/time-now-0.2.1.tgz",
|
||||
"integrity": "sha512-DVmKHeai63/4uu1//Ao8HyXOY6jmZYuhk3hng6KwY0y8sa+f8gYPu9UIG58JcRH+sMhcms7iFSEa7TqsUhZeig=="
|
||||
},
|
||||
"node_modules/timers-browserify": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-1.4.2.tgz",
|
||||
|
||||
@ -13,14 +13,17 @@
|
||||
"animejs": "^3.2.1",
|
||||
"autoprefixer": "10.4.14",
|
||||
"framer-motion": "^10.12.4",
|
||||
"grid": "^4.10.8",
|
||||
"next": "13.3.0",
|
||||
"observer": "^0.0.2",
|
||||
"pagination": "^0.4.6",
|
||||
"postcss": "8.4.22",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-intersection-observer": "^9.4.3",
|
||||
"react-modal-video": "^2.0.0",
|
||||
"react-player": "^2.12.0",
|
||||
"tailwindcss": "3.3.1"
|
||||
"tailwindcss": "3.3.1",
|
||||
"three": "^0.151.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import React from "react";
|
||||
import Navbar from "../Components/Layout/navbar.jsx";
|
||||
import Section from "../Components/Layout/section.jsx"
|
||||
|
||||
import Section from "../Components/Layout/section.jsx";
|
||||
import SubSection from "../Components/Layout/sub-section.jsx";
|
||||
import ContactFormSection from "@/Components/Layout/ContactFormSection.jsx";
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
@ -10,9 +11,33 @@ export default function Home() {
|
||||
key="aboutSection0"
|
||||
videoUrl="https://vid.puffyan.us/latest_version?id=--khbXchTeE&itag=22"
|
||||
text="about"
|
||||
buttonTwoText="learn more"
|
||||
buttonOneText="watch" videoId="uu01xBw_BVE"
|
||||
buttonTwoText="reach out"
|
||||
buttonOneText="watch"
|
||||
videoId="uu01xBw_BVE"
|
||||
/>
|
||||
</>
|
||||
<SubSection
|
||||
h2Text="What is Shiloh?"
|
||||
p1Text="The year is 2023, a dystopian future, the world is ruled by a tyrannical technological empire controlled by none other than Satan himself. Christians live in fear of being caught and punished for their beliefs. However, hope is not lost. Shiloh is a rebel movement that believes technology can be used to break the chains of oppression and restore the world to God's design. Together with a team of devout Christian nerds, Shiloh sets out on a mission to take down Satan's tech empire and restore God's freedom to humanity. As we dive deeper into Satan's twisted technological infrastructure, we discover the shocking truth that technology controlled by Satan is being centralized for maximum top-down control. This system plans to prevent all humanity from having a true relationship with Jesus. The Shiloh community must use their faith and technological expertise to stop Satan's plans and restore humanities God given rights. We face numerous challenges and obstacles along the way, including the wrath of Satan's minions and betrayal from those we thought we could trust. Shiloh's battle against Satan's Tech Empire is a thrilling story of faith, technology, and the power of belief. It is a reminder that Christians can use technology as a tool for good and a call to arms for all those who believe in Christian freedom to rise up against the forces of oppression with spiritual means. "
|
||||
/>
|
||||
<SubSection
|
||||
h2Text="Our Team"
|
||||
/>
|
||||
<SubSection
|
||||
h2Text="Core Focus"
|
||||
p2Text="Shiloh's logo looks like a gift box, serving as a constant reminder of the gift Shiloh, our Messiah has given us and we are called to give to the world. Shiloh means His gift. In this way, we celebrate a culture of giving first, inspired by the biblical references of Genesis 49:10, Jeremiah 7:1-15, 26:6, Mark 11:15-17, and Luke 21:6.
|
||||
|
||||
As we embark on our mission, Shiloh's values guide us in using technology for the betterment of humanity. We recognize that our talents and resources are gifts from God, and it is our responsibility to use them for His glory. The battle against Satan's Tech Empire is not just about reclaiming our freedom, but also about sharing the gift of faith and hope with those who have lost it in the darkness of oppression.
|
||||
|
||||
With this in mind, Shiloh's team works tirelessly to develop decentralized technology that empowers individuals and communities to take control of their own lives and destinies. We seek to create a world where everyone has the opportunity to experience the true love and freedom of Jesus Christ, regardless of their circumstances.
|
||||
|
||||
Shiloh's fight against the forces of evil is not just a battle for survival, but a mission to spread the good news of salvation and redemption. We will continue to persevere in the face of adversity, knowing that our victory will not only be a triumph for ourselves, but a gift to the world."
|
||||
/>
|
||||
<SubSection
|
||||
h2Text="What We Do"
|
||||
/>
|
||||
<ContactFormSection
|
||||
buttonOneText="contact us"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,7 +3,6 @@ import React from "react";
|
||||
import Navbar from "../Components/Layout/navbar.jsx";
|
||||
import Section from "../Components/Layout/section.jsx"
|
||||
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
:root {
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 39,40,34;
|
||||
--background-end-rgb:117,113,94;
|
||||
--background-end-rgb:39,40,34;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
@ -54,6 +54,10 @@ module.exports = {
|
||||
"px-5",
|
||||
"text-base",
|
||||
"px-2",
|
||||
"text-5xl",
|
||||
"mx-4",
|
||||
"px-2",
|
||||
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
|
||||
Reference in New Issue
Block a user