tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Tben 2022-06-04 08:26:53 +01:00
parent cb7af35bdc
commit 71128aee00
9 changed files with 165 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
components/actions/TextShuffler.jsx
View File

@ -4,12 +4,14 @@ import { gsap } from "gsap";
let timer = 0; let timer = 0;
let keyNum = 0; let keyNum = 0;
let textTimeout; let textTimeout;
let textInterval;
// let chars = ("abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+=-;.,/?><][}{:`~").split(""); // let chars = ("abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+=-;.,/?><][}{:`~").split("");
let interval = 200;
const TextShuffler = ({ textInput, delay }) => { const TextShuffler = ({ textInput, delay }) => {
let [text, setText] = useState(textInput); // let [text, setText] = useState(textInput);
let [refresh, setRefresh] = useState(0); // let [refresh, setRefresh] = useState(0);
let [readyState, setReadyState] = useState(false); let [readyState, setReadyState] = useState(false);
const spanRef = React.useRef(); const spanRef = React.useRef();
@ -17,25 +19,13 @@ const TextShuffler = ({ textInput, delay }) => {
useEffect(() => { useEffect(() => {
const spanObserver = new IntersectionObserver((entries, observer) => { const spanObserver = new IntersectionObserver((entries, observer) => {
if (entries[0].isIntersecting) { if (entries[0].isIntersecting) {
requestAnimationFrame(() => { if (delay) {
if (delay) { setTimeout(() => {
setTimeout(() => {
gsap.to(spanRef.current, {
opacity: 1,
duration: 2
});
setReadyState(true);
}, delay);
} else {
gsap.to(spanRef.current, {
opacity: 1,
duration: 2
});
setReadyState(true); setReadyState(true);
} }, delay);
}) } else {
setReadyState(true);
}
observer.unobserve(spanRef.current) observer.unobserve(spanRef.current)
} }
@ -47,25 +37,129 @@ const TextShuffler = ({ textInput, delay }) => {
spanObserver.observe(spanRef.current) spanObserver.observe(spanRef.current)
}, []) }, [])
// useEffect(() => {
// if (!readyState) return;
// requestAnimationFrame(() => {
// textTimeout = setTimeout(() => {
// if (timer === 7) {
// setText(textInput);
// return window.clearTimeout(textTimeout);
// };
// setRefresh(prev => prev + 1);
// timer++
// }, 300);
// })
// }, [refresh, readyState])
useEffect(() => { useEffect(() => {
if (!readyState) return; if (!readyState) return;
requestAnimationFrame(() => {
textTimeout = setTimeout(() => {
if (timer === 7) {
setText(textInput);
return window.clearTimeout(textTimeout);
};
setRefresh(prev => prev + 1);
timer++ let chars = textInput.split("");
}, 300);
let charsSpans = chars.map(char => `<span style="opacity:0">${char}</span>`)
spanRef.current.innerHTML = charsSpans.join("");
gsap.to(spanRef.current, {
opacity: 1,
duration: 1
});
let textSpans = spanRef.current.querySelectorAll("span");
// textInterval = setInterval(() => {
// if (timer >= 600) {
// window.clearInterval(textInterval);
// requestAnimationFrame(() => {
// textSpans.forEach(span => {
// // gsap.killTweensOf(span, "opacity");
// gsap.to(span, {
// opacity: 1,
// duration: Math.random(),
// delay: Math.random()
// })
// })
// })
// return;
// }
// requestAnimationFrame(() => {
// textSpans.forEach(span => {
// gsap.to(span, {
// opacity: 1,
// duration: Math.random() * 2,
// delay: Math.random() * 1.5
// })
// })
// // textSpans.forEach(span => {
// // gsap.to(span, {
// // opacity: 0,
// // duration: Math.random() * 2,
// // delay: Math.random() * 1.5
// // })
// // })
// // gsap.to(spanRef.current, {
// // opacity: 0,
// // duration: 2
// // });
// timer += interval;
// })
// }, interval)
requestAnimationFrame(() => {
// let charsSpans = chars.map(char => `<span>${char}</span>`)
// spanRef.current.innerHTML = charsSpans.join("");
// let textSpans = spanRef.current.querySelectorAll("span");
textSpans.forEach(span => {
gsap.to(span, {
opacity: 1,
duration: Math.random() * 1.5,
})
})
textSpans.forEach(span => {
gsap.killTweensOf(span, "opacity");
gsap.to(span, {
opacity: 0,
duration: Math.random() * 1.5,
delay: Math.random() * 0.5
})
})
textSpans.forEach(span => {
gsap.killTweensOf(span, "opacity");
gsap.to(span, {
opacity: 1,
duration: Math.random() * 1.5,
delay: Math.random()
})
})
}) })
}, [refresh])
}, [readyState])
return ( return (
<span className="shuffled-text-span" ref={ spanRef } style={ { opacity: 0 } }> <span className="shuffled-text-span" ref={ spanRef } style={ { opacity: 0 } }>
{ text.split("").map(char => <span key={ keyNum++ } style={ { animationDelay: Math.random() * 1.5 + "s", animationDuration: (Math.random() * 2) + "s" } }>{ char }</span>) } {/* { text.split("").map(char => <span key={ keyNum++ } style={ { animationDelay: Math.random() * 1.5 + "s", animationDuration: (Math.random() * 2) + "s" } }>{ char }</span>) } */ }
{ textInput }
</span> </span>
) )
} }

20
layouts/general_layout/GeneralHeader.jsx
View File

@ -1,15 +1,23 @@
import React from 'react' import React from 'react'
import { useRouter } from 'next/router';
const GeneralHeader = () => { const GeneralHeader = () => {
const router = useRouter();
function pushRouter(e) {
let url = e.target.dataset.href;
router.push(url);
}
return ( return (
<header> <header>
<a href="/" className="logo-link-block"><h1>Tben.me</h1></a> <a className="logo-link-block" onClick={ () => { pushRouter("/") } }><h1>Tben.me</h1></a>
<nav> <nav>
<a href="/">Home</a> <a data-href="/" onClick={ (e) => { pushRouter(e) } }>Home</a>
<a href="/about">About Me</a> <a data-href="/about" onClick={ (e) => { pushRouter(e) } }>About Me</a>
<a href="/work">My Work</a> <a data-href="/work" onClick={ (e) => { pushRouter(e) } }>My Work</a>
<a href='/documents/Benjamin_Toby_CV-updated.pdf' target="_blank">My Resume</a> <a data-href="#" href='/documents/Benjamin_Toby_CV-updated.pdf' target="_blank">My Resume</a>
<a href="/contact">Contact Me</a> <a data-href="/contact" onClick={ (e) => { pushRouter(e) } }>Contact Me</a>
</nav> </nav>
</header> </header>
) )

23
layouts/general_layout/GeneralLayout.jsx
View File

@ -5,9 +5,14 @@ import GeneralFooter from './GeneralFooter';
import { gsap } from "gsap"; import { gsap } from "gsap";
import threeJsAnimations from '../../functions/frontend/threeJsAnimations'; import threeJsAnimations from '../../functions/frontend/threeJsAnimations';
const GeneralLayout = ({ children, pageName }) => { export const SiteContext = React.createContext();
const [readyState, setReadyState] = React.useState(false) const GeneralLayout = ({ children, pageName }) => {
const [readyState, setReadyState] = React.useState(false);
// React.useEffect(() => {
// setReadyState(true);
// }, [readyState]);
React.useEffect(() => { React.useEffect(() => {
// barba.init({ // barba.init({
@ -38,7 +43,7 @@ const GeneralLayout = ({ children, pageName }) => {
document.querySelectorAll("nav a").forEach((link) => { document.querySelectorAll("nav a").forEach((link) => {
let locationRegex = new RegExp(`${window.location.pathname}.*?`); let locationRegex = new RegExp(`${window.location.pathname}.*?`);
if (link.pathname === window.location.pathname) { if (link.dataset.href === window.location.pathname) {
link.classList.add("active-page"); link.classList.add("active-page");
} }
}); });
@ -58,19 +63,19 @@ const GeneralLayout = ({ children, pageName }) => {
// document.getElementById("page-loader").style.opacity // document.getElementById("page-loader").style.opacity
threeJsAnimations(); threeJsAnimations();
// setReadyState(true);
}, []) }, [])
return ( return (
<Fragment> <SiteContext.Provider value={ { readyState, setReadyState } }>
<Head> <Head>
<meta name="keywords" content="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer, React Developer, NextJS developer, Node JS developer, Javascript Developer, Linux Ubuntu, DevOps, Nginx, MySQL developer, Freelancer" /> <meta name="keywords" content="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer, React Developer, NextJS developer, Node JS developer, Javascript Developer, Linux Ubuntu, DevOps, Nginx, MySQL developer, Freelancer" />
</Head> </Head>
{/* <div id='page-loader' className='fixed w-screen h-screen bg-black flex items-center justify-center top-0 left-0' style={ { zIndex: 2000 } }>
<span className='text-xl'>Tben Loading ...</span>
</div> */}
<div id='main-content-wrapper' style={ { opacity: 0 } }> <div id='main-content-wrapper' style={ { opacity: 0 } }>
<GeneralHeader /> <GeneralHeader />
<main> <main>
@ -79,7 +84,7 @@ const GeneralLayout = ({ children, pageName }) => {
<GeneralFooter /> <GeneralFooter />
</div> </div>
</Fragment> </SiteContext.Provider>
) )
} }

1
pages/_document.js
View File

@ -1,3 +1,4 @@
import React from "react";
import { Html, Head, Main, NextScript } from "next/document"; import { Html, Head, Main, NextScript } from "next/document";
export default function Document() { export default function Document() {

4
pages/about.jsx
View File

@ -12,9 +12,9 @@ const about = () => {
<title>About Me</title> <title>About Me</title>
<meta name="description" content="Ben of all trade, master of all! Learn more about me" /> <meta name="description" content="Ben of all trade, master of all! Learn more about me" />
</Head> </Head>
<h1><TextShuffler textInput="Ben of all trade, master of all!" delay={ 500 } /></h1> <h1><TextShuffler textInput="Ben of all trade, master of all!" /></h1>
<span className='hero-sub-text'> <span className='hero-sub-text'>
<TextShuffler textInput="Quick learner, adaptable, problem solver, curious. I strive to know the system, rather than the status quo. There's no problem too great: no knowledge too vast: no logic too complex. I thrive in difficult situations and complex problems: problem solving is now second nature to me: if you can think it, it can be done." delay={ 1000 } /> <TextShuffler textInput="Quick learner, adaptable, problem solver, curious. I strive to know the system, rather than the status quo. My credo is: no problem too great, no knowledge too vast, no logic too complex. I thrive in difficult situations and complex hurdles: problem solving is now second nature to me: if you can think it, it can be done." delay={ 500 } />
</span> </span>
<div className='w-full h-6'></div> <div className='w-full h-6'></div>

4
pages/contact.jsx
View File

@ -16,9 +16,9 @@ const contact = () => {
<meta name="description" content="Get in touch" /> <meta name="description" content="Get in touch" />
</Head> </Head>
<h1><TextShuffler textInput="Great things await ..." delay={ 500 } /></h1> <h1><TextShuffler textInput="Great things await ..." /></h1>
<span className='hero-sub-text'> <span className='hero-sub-text'>
<TextShuffler textInput="Let's talk" delay={ 1000 } /> <TextShuffler textInput="Let's talk" delay={ 500 } />
</span> </span>
<form autoComplete='on' onSubmit={ (e) => { submitContactForm(e, setSuccess) } }> <form autoComplete='on' onSubmit={ (e) => { submitContactForm(e, setSuccess) } }>

4
pages/index.jsx
View File

@ -12,9 +12,9 @@ const index = () => {
<title>Benjamin Toby | Fullstack developer, UI UX designer</title> <title>Benjamin Toby | Fullstack developer, UI UX designer</title>
<meta name="description" content="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer, React Developer, Next JS developer, Node JS developer, Javascript Developer, Linux Ubuntu, DevOps, Nginx, MySQL developer, Freelancer" /> <meta name="description" content="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer, React Developer, Next JS developer, Node JS developer, Javascript Developer, Linux Ubuntu, DevOps, Nginx, MySQL developer, Freelancer" />
</Head> </Head>
<h1><TextShuffler textInput="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer" delay={ 500 } /></h1> <h1><TextShuffler textInput="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer" /></h1>
<span className='hero-sub-text'> <span className='hero-sub-text'>
<TextShuffler textInput="Hi, I'm Benjamin Toby, a fullstack web developer and UI/UX expert." delay={ 1000 } /> <TextShuffler textInput="Hi, I'm Benjamin Toby, a fullstack web developer and UI/UX expert." delay={ 500 } />
</span> </span>
<div className="hero-ctas-section"> <div className="hero-ctas-section">
<a href='/documents/Benjamin_Toby_CV-updated.pdf' download={ true }>See my resume</a> <a href='/documents/Benjamin_Toby_CV-updated.pdf' download={ true }>See my resume</a>

4
pages/work.jsx
View File

@ -14,9 +14,9 @@ const myWork = () => {
<title>My Work | Tben</title> <title>My Work | Tben</title>
<meta name="description" content="Some of my Work" /> <meta name="description" content="Some of my Work" />
</Head> </Head>
<h1><TextShuffler textInput="My Work" delay={ 500 } /></h1> <h1><TextShuffler textInput="My Work" /></h1>
<span className='hero-sub-text'> <span className='hero-sub-text'>
<TextShuffler textInput="Some of my work ..." delay={ 1000 } /> <TextShuffler textInput="Some of my work ..." delay={ 500 } />
</span> </span>
<div className='portfolio-entries-block mt-4'> <div className='portfolio-entries-block mt-4'>

5
styles/main.css
View File

@ -169,6 +169,7 @@ nav {
nav a { nav a {
opacity: 0.5; opacity: 0.5;
cursor: pointer;
} }
nav a:hover { nav a:hover {
@ -193,11 +194,11 @@ nav a:hover {
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
.shuffled-text-span span { /* .shuffled-text-span span {
animation-name: shuffle; animation-name: shuffle;
animation-timing-function: ease-out; animation-timing-function: ease-out;
animation-delay: 0.5s; animation-delay: 0.5s;
} } */
@keyframes shuffle { @keyframes shuffle {
0% { 0% {