Shiloh/old-shiloh-website
Shiloh/old-shiloh-website
Archived
6
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Removed videoask, using alias email instead

Browse Source 
for contacting
This commit is contained in:
Caretaker0699 2023-07-11 11:17:43 -07:00
parent 93631f4bfd
commit f9780bf388
11 changed files with 137 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
components/buttons/ContactButton.jsx
View File

@ -1,19 +1,39 @@
const ContactButton = ({buttonText}) => {
const openChatScreen = () => {
const chatButton = document.getElementsByClassName('videoask-embed__button--SgLKO')[0];
if (chatButton) {
chatButton.click();
}
};
return (
<button
className="px-20 mt-8 mx-5 py-2 text-white border border-blue-500 rounded hover:border-white transition duration-300 ease-in-out focus:outline-none"
onClick={openChatScreen}
>
{buttonText}
</button>
);
import { useState } from 'react';
const ContactButton = ({ buttonText, email }) => {
const [hovered, setHovered] = useState(false);
const [copied, setCopied] = useState(false);
const handleHover = () => {
setHovered(true);
};
export default ContactButton;
const handleMouseLeave = () => {
setHovered(false);
};
const handleClick = () => {
navigator.clipboard.writeText(email);
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 2000);
};
return (
<button
className={`px-20 mt-8 mx-5 py-2 text-white border rounded focus:outline-none ${
hovered
? 'border-white transition duration-300 ease-in-out'
: 'border-blue-500 transition duration-300 ease-in-out'
}`}
onMouseEnter={handleHover}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
>
{copied ? 'Email copied to your clipboard.' : hovered ? email : buttonText}
</button>
);
};
export default ContactButton;

47
components/elements/ContactThreeJsComponent.jsx
View File

@ -1,12 +1,12 @@
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';
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 ContactThreeJsComponent = React.memo(() => {
const [isMounted, setIsMounted] = useState(false);
const mountRef = useRef(null);
@ -24,7 +24,12 @@ const ContactThreeJsComponent = React.memo(() => {
renderer.setSize(window.innerWidth, window.innerHeight);
mountRef.current.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera = new THREE.PerspectiveCamera(
70,
window.innerWidth / window.innerHeight,
1,
1000
);
camera.position.z = 700;
const scene = new THREE.Scene();
@ -34,13 +39,22 @@ const ContactThreeJsComponent = React.memo(() => {
scene.add(object);
const geometry = new THREE.BoxGeometry(50, 50, 50);
const material = new THREE.MeshPhongMaterial({ color: 0xFFD700, flatShading: true });
const material = new THREE.MeshPhongMaterial({
color: 0xffd700,
flatShading: true,
});
for (let i = 0; i < 30; 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
.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.rotation.set(
Math.random() * 2,
Math.random() * 2,
Math.random() * 2
);
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 2;
object.add(mesh);
}
@ -55,14 +69,14 @@ const ContactThreeJsComponent = React.memo(() => {
composer.addPass(new RenderPass(scene, camera));
const effect1 = new ShaderPass(DotScreenShader);
effect1.uniforms['scale'].value = 4;
effect1.uniforms["scale"].value = 4;
composer.addPass(effect1);
const effect2 = new ShaderPass(RGBShiftShader);
effect2.uniforms['amount'].value = 0.0015;
effect2.uniforms["amount"].value = 0.0015;
composer.addPass(effect2);
window.addEventListener('resize', onWindowResize);
window.addEventListener("resize", onWindowResize);
}
function onWindowResize() {
@ -72,7 +86,6 @@ const ContactThreeJsComponent = React.memo(() => {
renderer.setSize(window.innerWidth, window.innerHeight);
composer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
@ -86,7 +99,7 @@ const ContactThreeJsComponent = React.memo(() => {
return () => {
// cleanup logic
window.removeEventListener('resize', onWindowResize);
window.removeEventListener("resize", onWindowResize);
renderer.dispose();
composer.dispose();
};

30
components/elements/VideoAsk.jsx
View File

@ -1,30 +0,0 @@
import { useEffect, useState } from 'react';
const VideoAsk = () => {
const [isMounted, setIsMounted] = useState(false);
useEffect(() => {
setIsMounted(true);
if (isMounted) {
window.VIDEOASK_EMBED_CONFIG = {
"kind": "widget",
"url": "https://www.videoask.com/f8fah1r34",
"options": {
"widgetType": "VideoThumbnailSmall",
"text": "Talk",
"backgroundColor": "#FFFFFF",
"position": "bottom-right",
"dismissible": true
}
};
const script = document.createElement('script');
script.src = 'https://www.videoask.com/embed/embed.js';
script.async = true;
document.body.appendChild(script);
}
}, [isMounted]);
return null;
};
export default VideoAsk;

2
components/layouts/ContactFormSection.jsx
View File

@ -4,6 +4,7 @@ import ContactThreeJsComponent from "../elements/ContactThreeJsComponent.jsx";
const ContactFormSection = ({
text,
buttonText,
email,
}) => {
return (
<>
@ -19,6 +20,7 @@ const ContactFormSection = ({
<div className="flex justify-start space-x-4">
<ContactButton
buttonText={buttonText}
email={email}
/>
</div>
</div>

2
pages/_app.js
View File

@ -1,6 +1,5 @@
import { Fira_Code } from 'next/font/google'
import { AnimatePresence, motion } from "framer-motion";
import VideoAsk from "../components/elements/VideoAsk.jsx";
import "../styles/globals.css";
const firaCode = Fira_Code ({
@ -23,7 +22,6 @@ function MyApp({ Component, pageProps, router }) {
</main>
</motion.div>
</AnimatePresence>
<VideoAsk />
</>
);
}

34
pages/about.js
View File

@ -12,29 +12,31 @@ const ContactFormSection = dynamic(() =>
export default function Home() {
return (
<>
<Head>
<Head>
<title>about</title>
<meta name="description" content="about shiloh" />
<meta name="keywords" content="shiloh, about, redemptive tech, Jesus, faith, christian developers" />
<meta
name="keywords"
content="shiloh, about, redemptive tech, Jesus, faith, christian developers"
/>
</Head>
<Navbar />
<Section
key="aboutSection0"
videoUrl="/true_freedom_optimized.mp4"
text="about"
buttonTwoText="say hello"
buttonLink="#contact"
buttonOneText="watch"
videoId="W60vWdXR1sQ"
>
</Section>
<StatementOfFaithSection/>
<Section
key="aboutSection0"
videoUrl="/true_freedom_optimized.mp4"
text="about"
buttonTwoText="say hello"
buttonLink="#contact"
buttonOneText="watch"
videoId="W60vWdXR1sQ"
></Section>
<StatementOfFaithSection />
<ContactFormSection
text="say hello"
buttonText="contact us"
text="contact us"
buttonText="contact us"
email="hello-izmqxby3qjkffhh6w7a9s2j3qwj7zu93iji7gxjcn@shilohcode.com"
/>
</>
);

16
pages/contactus.js
View File

@ -7,21 +7,23 @@ const ContactFormSection = dynamic(() =>
import("../components/layouts/ContactFormSection.jsx")
);
export default function Home() {
return (
<>
<Head>
<Head>
<title>contact us</title>
<meta name="description" content="contact shiloh" />
<meta name="keywords" content="shiloh, contact, redemptive tech, Jesus, faith, christian developers" />
<meta
name="keywords"
content="shiloh, contact, redemptive tech, Jesus, faith, christian developers"
/>
</Head>
<Navbar />
<ContactFormSection
text="say hello"
buttonText="contact us"
text="contact us"
buttonText="contact us"
email="hello-izmqxby3qjkffhh6w7a9s2j3qwj7zu93iji7gxjcn@shilohcode.com"
/>
</>
</>
);
}

43
pages/getinvolved.js
View File

@ -8,7 +8,6 @@ const ContactFormSection = dynamic(() =>
import("../components/layouts/ContactFormSection.jsx")
);
export default function Home() {
return (
<>
@ -19,29 +18,29 @@ export default function Home() {
text="get involved"
buttonLink="#contact"
buttonTwoText="say hello"
buttonOneText="watch" videoId="j16NyCutsOo"
buttonOneText="watch"
videoId="j16NyCutsOo"
/>
<SectionTwo
text ="githaven"
buttonText="Explore"
buttonLink="https://githaven.org"
>
</SectionTwo>
<SectionTwo
text ="remnant.chat"
buttonText="Explore"
buttonLink="https://remnant.chat"
<SectionTwo
text="githaven"
buttonText="Explore"
buttonLink="https://githaven.org"
></SectionTwo>
<SectionTwo
text ="agilegrace"
buttonText="Explore"
buttonLink="https://agilegrace.org"
<SectionTwo
text="remnant.chat"
buttonText="Explore"
buttonLink="https://remnant.chat"
></SectionTwo>
<ContactFormSection
text="say hello"
buttonText="contact us"
/>
</>
<SectionTwo
text="agilegrace"
buttonText="Explore"
buttonLink="https://agilegrace.org"
></SectionTwo>
<ContactFormSection
text="contact us"
buttonText="contact us"
email="hello-izmqxby3qjkffhh6w7a9s2j3qwj7zu93iji7gxjcn@shilohcode.com"
/>
</>
);
}

11
pages/hireus.js
View File

@ -17,13 +17,14 @@ export default function Home() {
text="hire us"
buttonLink="#contact"
buttonTwoText="contact us"
buttonOneText="watch" videoId="uu01xBw_BVE"
buttonOneText="watch"
videoId="uu01xBw_BVE"
/>
<ContactFormSection
text="say hello"
buttonText="contact us"
text="contact us"
buttonText="contact us"
email="hello-izmqxby3qjkffhh6w7a9s2j3qwj7zu93iji7gxjcn@shilohcode.com"
/>
</>
</>
);
}

12
pages/index.js
View File

@ -13,8 +13,14 @@ export default function Home() {
<>
<Head>
<title>shiloh code</title>
<meta name="description" content="shiloh is accelerating redemptive technology in Jesus' name." />
<meta name="keywords" content="shiloh, redemptive tech, Jesus, faith, christian developers" />
<meta
name="description"
content="shiloh is accelerating redemptive technology in Jesus' name."
/>
<meta
name="keywords"
content="shiloh, redemptive tech, Jesus, faith, christian developers"
/>
</Head>
<Navbar />
<Section
@ -50,7 +56,7 @@ export default function Home() {
<ContactFormSection
text="contact us"
buttonText="contact us"
buttonLink="https://www.videoask.com/f8fah1r34"
email="hello-izmqxby3qjkffhh6w7a9s2j3qwj7zu93iji7gxjcn@shilohcode.com"
/>
</>
);

12
pages/projects.js
View File

@ -7,7 +7,6 @@ const ContactFormSection = dynamic(() =>
import("../components/layouts/ContactFormSection.jsx")
);
export default function Home() {
return (
<>
@ -18,13 +17,10 @@ export default function Home() {
text="projects"
buttonLink="#contact"
buttonTwoText="say hello"
buttonOneText="watch" videoId="uu01xBw_BVE"
buttonOneText="watch"
videoId="uu01xBw_BVE"
/>
<ContactFormSection
text="say hello"
buttonText="contact us"
/>
</>
<ContactFormSection text="say hello" buttonText="contact us" />
</>
);
}