From 71128aee002b6f7ed8f910612d73d9dfcab9ed0e Mon Sep 17 00:00:00 2001
From: Tben <52448020+BenjaminToby@users.noreply.github.com>
Date: Sat, 4 Jun 2022 08:26:53 +0100
Subject: [PATCH] updates

---
 components/actions/TextShuffler.jsx      | 156 ++++++++++++++++++-----
 layouts/general_layout/GeneralHeader.jsx |  20 ++-
 layouts/general_layout/GeneralLayout.jsx |  23 ++--
 pages/_document.js                       |   1 +
 pages/about.jsx                          |   4 +-
 pages/contact.jsx                        |   4 +-
 pages/index.jsx                          |   4 +-
 pages/work.jsx                           |   4 +-
 styles/main.css                          |   5 +-
 9 files changed, 165 insertions(+), 56 deletions(-)

diff --git a/components/actions/TextShuffler.jsx b/components/actions/TextShuffler.jsx
index 97f7c3b..e5f9a38 100644
--- a/components/actions/TextShuffler.jsx
+++ b/components/actions/TextShuffler.jsx
@@ -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
-                        });
-
+                if (delay) {
+                    setTimeout(() => {
                         setReadyState(true);
-                    }
-                })
+                    }, delay);
+                } else {
+                    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,
+                })
+            })
+
+            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 (
         <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>
     )
 }
diff --git a/layouts/general_layout/GeneralHeader.jsx b/layouts/general_layout/GeneralHeader.jsx
index 1c51b3c..50be4e7 100644
--- a/layouts/general_layout/GeneralHeader.jsx
+++ b/layouts/general_layout/GeneralHeader.jsx
@@ -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>
     )
diff --git a/layouts/general_layout/GeneralLayout.jsx b/layouts/general_layout/GeneralLayout.jsx
index 1e9a6f4..574e10f 100644
--- a/layouts/general_layout/GeneralLayout.jsx
+++ b/layouts/general_layout/GeneralLayout.jsx
@@ -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>
     )
 }
 
diff --git a/pages/_document.js b/pages/_document.js
index 2cb9e2a..248ab5c 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,3 +1,4 @@
+import React from "react";
 import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
diff --git a/pages/about.jsx b/pages/about.jsx
index 9c75a73..f73107a 100644
--- a/pages/about.jsx
+++ b/pages/about.jsx
@@ -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>
diff --git a/pages/contact.jsx b/pages/contact.jsx
index 21f9aa8..1ab4710 100644
--- a/pages/contact.jsx
+++ b/pages/contact.jsx
@@ -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) } }>
diff --git a/pages/index.jsx b/pages/index.jsx
index a40d789..87bc3fc 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -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>
diff --git a/pages/work.jsx b/pages/work.jsx
index 69663ed..888773d 100644
--- a/pages/work.jsx
+++ b/pages/work.jsx
@@ -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'>
diff --git a/styles/main.css b/styles/main.css
index 8d8069e..c2a6071 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -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% {