Merge branch 'master' of github.com:Gabau/Gabau.github.io

Gabau · Oct 10, 2024 · 0bfebd0 · 0bfebd0
2 parents b8dc2c8 + ba8bfe7
commit 0bfebd0
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 17 deletions.
diff --git a/gabau.github.io/src/components/NavBar.tsx b/gabau.github.io/src/components/NavBar.tsx
@@ -103,18 +103,6 @@ const Navbar = () => {
           <Link to="/playground">Playground</Link>
         </li>
       </ul>
-      {/* <button
-        className="text-black dark:text-white bg-transparent border-none cursor-pointer"
-        onClick={() => {
-            if (theme === 'light') {
-                setTheme('dark');
-            } else {
-                setTheme('light');
-            }
-        }}
-      >
-        {theme === 'light' ? 'Switch to Dark' : 'Switch to Light'}
-      </button> */}
       <MoonSunToggle />
     </nav>
   );

diff --git a/gabau.github.io/src/components/TypeWriterHeader.tsx b/gabau.github.io/src/components/TypeWriterHeader.tsx
@@ -38,7 +38,7 @@ export default function TypeWriterHeader({ title, timeout, cursorTimeout , class
     setCursor("|");
   }, [cursor, title, typedTitle, cursorTimeout]);
   return (
-    <h1 className={`${className}`} >{typedTitle === "" && <>&nbsp;</>}{typedTitle}<span className="absolute">{cursor}</span></h1>
+    <h1 className={`${className}`} >{typedTitle === "" && <>&nbsp;</>}{typedTitle}<span>{cursor}</span></h1>
   )
 
 }
diff --git a/gabau.github.io/src/components/animated/RepeatingBanner.tsx b/gabau.github.io/src/components/animated/RepeatingBanner.tsx
@@ -0,0 +1,56 @@
+import { useGSAP } from "@gsap/react"
+import { gsap } from "gsap/gsap-core";
+import { useRef } from "react";
+
+/**
+ * Idea: translate div in the banner left or right
+ * @returns 
+ */
+export default function RepeatingBanner({
+    children,
+    count,
+    width,
+    height,
+    duration
+}: {
+    children: JSX.Element,
+    width: number,
+    height: number,
+    count?: number,
+    duration?: number
+}) {
+    const movingRef = useRef<HTMLDivElement | null>(null);
+    // const movingRef1 = useRef<HTMLDivElement | null>(null);
+    // const movingRef2 = useRef<HTMLDivElement | null>(null);    
+    const wrappedCount = (count ?? 5) * 2;
+    const singleDuration = duration ?? 1;
+    useGSAP(() => {
+        const tl = gsap.timeline({ repeat: -1 });
+        tl.to(movingRef.current, {
+            x: `-50%`,
+            duration: 0.01
+        })
+        tl.to(
+            movingRef.current,
+            {
+                x: '0%',
+                duration: singleDuration * wrappedCount,
+                ease: 'none',
+            }
+        )
+    }, {
+        scope: movingRef
+    });
+
+
+
+    return <div className={`relative overflow-clip text-nowrap z-10`} style={{ width, height }}>
+        <div className="flex flex-row absolute" ref={movingRef}>
+            {Array.from(Array(wrappedCount).keys()).map((i) => (
+                <div key={i}>
+                    {children}
+                </div>
+            ))}
+        </div>
+    </div>
+}
diff --git a/gabau.github.io/src/pages/Playground.tsx b/gabau.github.io/src/pages/Playground.tsx
@@ -41,6 +41,11 @@ const playgrounds = [
     link: "/play/apage",
   },
   {
+
+    title: 'Repeating text',
+    description: "Simple repeating animation",
+    link: "/play/rotating",
+  },{
     title: "Animated Sand",
     description: "Simple sand falling in pixi.js",
     link: "/play/sand"

diff --git a/gabau.github.io/src/pages/Root.tsx b/gabau.github.io/src/pages/Root.tsx
@@ -4,12 +4,10 @@ import CodeBlock from "../components/CodeBlock";
 
 
 export default function Root() {
-
     return <div className="p-10">
         <FuzzyText text="Gabau" />
-        {/* <TypeWriterHeader title={"Gabau"} timeout={300} className="p-10" /> */}
         <div className="flex flex-row items-center justify-center">
-        <CodeBlock className="text-left w-1/2 border-separate overflow-clip rounded-2xl" code='#include <iostream>\nusing namespace std;\nint main()\n{\n    cout << "Hello world" << endl \n}' language={"cpp"}/>
+            <CodeBlock className="sm:w-1/2 text-left w-full border-separate overflow-clip rounded-2xl" code='#include <iostream>\nusing namespace std;\nint main()\n{\n    cout << "Hello world" << endl \n}' language={"cpp"} />
         </div>
     </div>
 }
diff --git a/gabau.github.io/src/pages/fun/RepeatingBannerPage.tsx b/gabau.github.io/src/pages/fun/RepeatingBannerPage.tsx
@@ -0,0 +1,16 @@
+import RepeatingBanner from "../../components/animated/RepeatingBanner";
+
+
+export default function RepeatingBannerPage() {
+    return (
+        <div className="flex flex-col items-center w-full h-full flex-grow justify-center">
+            <div className="flex flex-row items-center">
+                <RepeatingBanner width={50} count={10} duration={0.2} height={30}>
+                    <div>
+                        Hello World&nbsp;
+                    </div>
+                </RepeatingBanner>
+            </div>
+        </div>
+    )
+}
diff --git a/gabau.github.io/src/routes.tsx b/gabau.github.io/src/routes.tsx
@@ -9,11 +9,13 @@ import NavBarWrapper from "./components/NavBarWrapper";
 import Terminal from "./components/Terminal";
 import TypeWriterHeader from "./components/TypeWriterHeader";
 import APage from "./pages/fun/APage";
+import RepeatingBannerPage from "./pages/fun/RepeatingBannerPage";
 import AnimatedSandPage from "./pages/fun/AnimatedSandPage";
 
 
 
 
+
 const routes = [
   {
     path: "/",
@@ -31,7 +33,7 @@ const routes = [
       {
         path: "/projects",
         element: <Projects />
-      }, 
+      },
       {
         path: '/about',
         element: <About />
@@ -76,6 +78,11 @@ const routes = [
           "Never gonna tell a lie and hurt you"
         ]} />
       },
+      {
+
+        path: '/play/rotating',
+        element: <RepeatingBannerPage />
+      },
       {
         path: "/play/sand",
         element: <AnimatedSandPage />