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

144
components/actions/TextShuffler.jsx
View File

@ -4,12 +4,14 @@ import { gsap } from "gsap";
let timer = 0;
let keyNum = 0;
let textTimeout;
let textInterval;
// let chars = ("abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+=-;.,/?><][}{:`~").split("");
let interval = 200;
const TextShuffler = ({ textInput, delay }) => {
let [text, setText] = useState(textInput);
let [refresh, setRefresh] = useState(0);
// let [text, setText] = useState(textInput);
// let [refresh, setRefresh] = useState(0);
let [readyState, setReadyState] = useState(false);
const spanRef = React.useRef();
@ -17,25 +19,13 @@ const TextShuffler = ({ textInput, delay }) => {
useEffect(() => {
const spanObserver = new IntersectionObserver((entries, observer) => {
if (entries[0].isIntersecting) {
requestAnimationFrame(() => {
if (delay) {
setTimeout(() => {
gsap.to(spanRef.current, {
opacity: 1,
duration: 2
});
setReadyState(true);
}, delay);
} else {
gsap.to(spanRef.current, {
opacity: 1,
duration: 2
});
setReadyState(true);
}
})
observer.unobserve(spanRef.current)
}
@ -47,25 +37,129 @@ const TextShuffler = ({ textInput, delay }) => {
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(() => {
if (!readyState) return;
requestAnimationFrame(() => {
textTimeout = setTimeout(() => {
if (timer === 7) {
setText(textInput);
return window.clearTimeout(textTimeout);
};
setRefresh(prev => prev + 1);
timer++
}, 300);
let chars = textInput.split("");
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,
})
}, [refresh])
})
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()
})
})
})
}, [readyState])
return (
<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>
)
}

20
layouts/general_layout/GeneralHeader.jsx
View File

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

23
layouts/general_layout/GeneralLayout.jsx
View File

@ -5,9 +5,14 @@ import GeneralFooter from './GeneralFooter';
import { gsap } from "gsap";
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(() => {
// barba.init({
@ -38,7 +43,7 @@ const GeneralLayout = ({ children, pageName }) => {
document.querySelectorAll("nav a").forEach((link) => {
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");
}
});
@ -58,19 +63,19 @@ const GeneralLayout = ({ children, pageName }) => {
// document.getElementById("page-loader").style.opacity
threeJsAnimations();
// setReadyState(true);
}, [])
return (
<Fragment>
<SiteContext.Provider value={ { readyState, setReadyState } }>
<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" />
</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 } }>
<GeneralHeader />
<main>
@ -79,7 +84,7 @@ const GeneralLayout = ({ children, pageName }) => {
<GeneralFooter />
</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";
export default function Document() {

4
pages/about.jsx
View File

@ -12,9 +12,9 @@ const about = () => {
<title>About Me</title>
<meta name="description" content="Ben of all trade, master of all! Learn more about me" />
</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'>
<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>
<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" />
</Head>
<h1><TextShuffler textInput="Great things await ..." delay={ 500 } /></h1>
<h1><TextShuffler textInput="Great things await ..." /></h1>
<span className='hero-sub-text'>
<TextShuffler textInput="Let's talk" delay={ 1000 } />
<TextShuffler textInput="Let's talk" delay={ 500 } />
</span>
<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>
<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>
<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'>
<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>
<div className="hero-ctas-section">
<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>
<meta name="description" content="Some of my Work" />
</Head>
<h1><TextShuffler textInput="My Work" delay={ 500 } /></h1>
<h1><TextShuffler textInput="My Work" /></h1>
<span className='hero-sub-text'>
<TextShuffler textInput="Some of my work ..." delay={ 1000 } />
<TextShuffler textInput="Some of my work ..." delay={ 500 } />
</span>
<div className='portfolio-entries-block mt-4'>

5
styles/main.css
View File

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