From bf0f5f76529a9f04184422935a874e39f93a3835 Mon Sep 17 00:00:00 2001
From: AsumVictor <iamasum369@gmail.com>
Date: Thu, 13 Jun 2024 00:23:10 +0000
Subject: [PATCH 1/9] GSAP: Installation

---
 src/components/helpers/home/introduction.tsx | 64 ++++++++++++--------
 src/containers/App/App.tsx                   |  1 +
 src/styles/home.css                          | 45 ++++++++++++++
 3 files changed, 85 insertions(+), 25 deletions(-)
 create mode 100644 src/styles/home.css

diff --git a/src/components/helpers/home/introduction.tsx b/src/components/helpers/home/introduction.tsx
index 5d5c6cd..ff69aeb 100644
--- a/src/components/helpers/home/introduction.tsx
+++ b/src/components/helpers/home/introduction.tsx
@@ -1,37 +1,43 @@
 import { useRef } from "react";
-
-// import { gsap } from "gsap";
-// import { useGSAP } from "@gsap/react";
-    
-// import { CustomEase } from "gsap/CustomEase";
-// import { RoughEase, ExpoScaleEase, SlowMo } from "gsap/EasePack";
-    
-// import { Flip } from "gsap/Flip";
-// import { ScrollTrigger } from "gsap/ScrollTrigger";
-// import { Observer } from "gsap/Observer";
-// import { ScrollToPlugin } from "gsap/ScrollToPlugin";
-// import { Draggable } from "gsap/Draggable";
-// import { MotionPathPlugin } from "gsap/MotionPathPlugin";
-// import { EaselPlugin } from "gsap/EaselPlugin";
-// import { PixiPlugin } from "gsap/PixiPlugin";
-// import { TextPlugin } from "gsap/TextPlugin";
-
-
-// gsap.registerPlugin(useGSAP,Flip,ScrollTrigger,Observer,ScrollToPlugin,Draggable,MotionPathPlugin,EaselPlugin,PixiPlugin,TextPlugin,RoughEase,ExpoScaleEase,SlowMo,CustomEase);
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import {} from "gsap/src/ScrollTrigger";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin";
 
 function Introduction() {
   const textRef = useRef(null);
 
-
+  gsap.registerPlugin(ScrollTrigger);
+  gsap.registerPlugin(MotionPathPlugin);
+
+  useGSAP(() => {
+    gsap.fromTo(
+      textRef.current,
+      {
+        translateX: 0,
+      },
+      {
+        x: -300,
+        ease: "none",
+        duration: 1,
+        scrollTrigger: {
+          trigger: textRef.current,
+          start: "bottom bottom",
+          end: "80%",
+          scrub: 0.6,
+          pin: true,
+          markers: true,
+        },
+      }
+    );
+  });
 
   return (
     <section
-      className={`-mt-[1.8cm] w-full h-screen flex items-center text-center justify-center relative`}
+      className={`-mt-[1.8cm] w-full h-screen flex items-center text-center justify-center relative flex-col`}
     >
-      <h1
-        ref={textRef}
-        className=" text-white text-[7rem] uppercase merienda-900"
-      >
+      <h1 className=" text-white text-[7rem] uppercase merienda-900">
         <span className=" bg-gradient-to-r from-fuchsia-800 via-violet-600 to-rose-600 bg-clip-text text-transparent">
           Save
         </span>
@@ -41,6 +47,14 @@ function Introduction() {
         </span>
       </h1>
 
+      <div className="field">
+        <div className="mouse"></div>
+      </div>
+
+      <div
+        ref={textRef}
+        className="fishbox w-[4cm] h-[1cm] bg-orange-700 absolute bottom-[60px] translate-x-[8rem]"
+      ></div>
     </section>
   );
 }
diff --git a/src/containers/App/App.tsx b/src/containers/App/App.tsx
index 7985f1a..2ba5f05 100644
--- a/src/containers/App/App.tsx
+++ b/src/containers/App/App.tsx
@@ -1,5 +1,6 @@
 import "./App.css";
 import "../../styles/navigation.css";
+import "../../styles/home.css";
 import { Route, Routes, useLocation } from "react-router-dom";
 import { Footer, Header, Navbar, NotFound } from "../../components";
 import { getPathMapping, stringToSlug } from "../../utils";
diff --git a/src/styles/home.css b/src/styles/home.css
new file mode 100644
index 0000000..2b6f002
--- /dev/null
+++ b/src/styles/home.css
@@ -0,0 +1,45 @@
+
+.field {
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+    position: absolute;
+    bottom: 1.1cm;
+}
+
+.mouse {
+	width: 50px;
+	height: 90px;
+	border: 3px solid #9a9a9a;
+	border-radius: 60px;
+	position: relative;
+}
+
+.mouse::before {
+    content: "";
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    bottom: 0cm;
+    transform: translateX(-50%);
+    background-color: #ababab;
+    border-radius: 50%;
+    opacity: 1;
+    animation: wheel 2s infinite;
+    -webkit-animation: wheel 2s infinite;
+    -webkit-animation: wheel 2s infinite;
+}
+
+@keyframes wheel {
+	to {
+		opacity: 0;
+		top: 60px;
+	}
+}
+
+@-webkit-keyframes wheel {
+	to {
+		opacity: 0;
+		top: 60px;
+	}
+}
-- 
GitLab


From e4a5f73280c194e2d8c2046c9e135d6f289597c4 Mon Sep 17 00:00:00 2001
From: AsumVictor <iamasum369@gmail.com>
Date: Thu, 13 Jun 2024 02:15:06 +0000
Subject: [PATCH 2/9] Feat: Added fish animation to introduction

---
 src/components/helpers/home/entryWater.tsx   | 11 ++++
 src/components/helpers/home/introduction.tsx | 57 +++++++++++++-------
 src/contents/home.tsx                        |  2 +
 3 files changed, 51 insertions(+), 19 deletions(-)
 create mode 100644 src/components/helpers/home/entryWater.tsx

diff --git a/src/components/helpers/home/entryWater.tsx b/src/components/helpers/home/entryWater.tsx
new file mode 100644
index 0000000..6d2e1a3
--- /dev/null
+++ b/src/components/helpers/home/entryWater.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+function EntryWater() {
+  return (
+    <div>
+        
+    </div>
+  )
+}
+
+export default EntryWater
\ No newline at end of file
diff --git a/src/components/helpers/home/introduction.tsx b/src/components/helpers/home/introduction.tsx
index ff69aeb..902e7b6 100644
--- a/src/components/helpers/home/introduction.tsx
+++ b/src/components/helpers/home/introduction.tsx
@@ -6,34 +6,45 @@ import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
 import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin";
 
 function Introduction() {
-  const textRef = useRef(null);
+  const fishRef = useRef(null);
 
   gsap.registerPlugin(ScrollTrigger);
   gsap.registerPlugin(MotionPathPlugin);
 
+
+  const path = [
+    // 1
+    { x: -300, y: 50 },
+    { x: -500, y: -50 },
+    { x: -50, y: 0 },
+    { x: -50, y: 200 },
+
+    
+  ]
+
+
   useGSAP(() => {
-    gsap.fromTo(
-      textRef.current,
-      {
-        translateX: 0,
-      },
+    gsap.to(
+      fishRef.current,
       {
-        x: -300,
-        ease: "none",
-        duration: 1,
+        duration: 4,
+        motionPath: {
+          path: path,
+          autoRotate: true
+          
+        },
         scrollTrigger: {
-          trigger: textRef.current,
-          start: "bottom bottom",
-          end: "80%",
-          scrub: 0.6,
-          pin: true,
           markers: true,
-        },
-      }
+          end: '70% 70%',
+          start: '40% 40%',
+          scrub: 0.67,
+        }
+      },
     );
   });
 
   return (
+    <>
     <section
       className={`-mt-[1.8cm] w-full h-screen flex items-center text-center justify-center relative flex-col`}
     >
@@ -52,10 +63,18 @@ function Introduction() {
       </div>
 
       <div
-        ref={textRef}
-        className="fishbox w-[4cm] h-[1cm] bg-orange-700 absolute bottom-[60px] translate-x-[8rem]"
-      ></div>
+        ref={fishRef}
+        className="fishbox absolute bottom-[60px] translate-x-[8rem]"
+      >
+        <img ref={fishRef} className="w-[150px]" src="https://static.igem.wiki/teams/5312/temp-images/output-onlinegiftools.gif" alt="" />
+      </div>
     </section>
+    
+<section>
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque, similique vitae. Officiis sequi velit distinctio nam aut officia cumque aliquam blanditiis praesentium eveniet. Sit ratione vitae, tempora corporis perferendis id?
+</section>
+
+    </>
   );
 }
 
diff --git a/src/contents/home.tsx b/src/contents/home.tsx
index 5b662af..fa5d76c 100644
--- a/src/contents/home.tsx
+++ b/src/contents/home.tsx
@@ -1,4 +1,5 @@
 import Introduction from "../components/helpers/home/introduction";
+import EntryWater from "../components/helpers/home/entryWater";
 
 export function Home() {
 
@@ -6,6 +7,7 @@ export function Home() {
   return (
     <>
      <Introduction />
+     <EntryWater />
     </>
   );
 }
-- 
GitLab


From 7cbf61e87dfe43d311b6ac7a30cdc0c1a3740d9d Mon Sep 17 00:00:00 2001
From: AsumVictor <iamasum369@gmail.com>
Date: Thu, 13 Jun 2024 03:07:29 +0000
Subject: [PATCH 3/9] Fix: Liners

---
 src/components/Navbar.tsx                    |   8 +-
 src/components/helpers/cursor.tsx            |  24 +--
 src/components/helpers/home/entryWater.tsx   |  53 ++++-
 src/components/helpers/home/introduction.tsx |  93 +++++----
 src/components/helpers/sematics.tsx          |  10 +-
 src/components/new_paper_loader.tsx          |   6 +-
 src/containers/App/App.css                   |   7 +-
 src/containers/App/App.tsx                   |  32 ++-
 src/contents/attributions.tsx                |  12 +-
 src/contents/home.tsx                        |   6 +-
 src/contents/index.tsx                       |   2 +-
 src/contents/project.tsx                     |   8 +-
 src/contents/team.tsx                        |   2 +-
 src/pages.ts                                 |   2 +-
 src/styles/home.css                          |  61 +++---
 src/styles/navigation.css                    | 198 +++++++++----------
 16 files changed, 277 insertions(+), 247 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 7e23b94..78407aa 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -34,7 +34,7 @@ export function Navbar({ isShow }: { isShow: boolean }) {
           />
         );
       }
-    }
+    },
   );
 
   const nav_link2 = Pages.slice(nav_link1.length, Pages.length).map(
@@ -68,12 +68,14 @@ export function Navbar({ isShow }: { isShow: boolean }) {
           />
         );
       }
-    }
+    },
   );
 
   return (
     <>
-      <header className={`${isShow ? ' visible' : 'invisible'} z-[99] w-full px-3 450px:px-5 600px:px-10 750px:px-8 1000px:px-[3rem] 1400px:px-[7rem] 1650px:px-[17rem] 1800px:px-[24rem] 2050px:px-[32rem] relative `}>
+      <header
+        className={`${isShow ? " visible" : "invisible"} z-[99] w-full px-3 450px:px-5 600px:px-10 750px:px-8 1000px:px-[3rem] 1400px:px-[7rem] 1650px:px-[17rem] 1800px:px-[24rem] 2050px:px-[32rem] relative `}
+      >
         {/* Pins to hold navigation bar */}
         <div className="w-full h-[0.3cm] px-5 flex justify-between overflow-visible">
           <div className="">
diff --git a/src/components/helpers/cursor.tsx b/src/components/helpers/cursor.tsx
index 15778f1..884e76d 100644
--- a/src/components/helpers/cursor.tsx
+++ b/src/components/helpers/cursor.tsx
@@ -41,18 +41,18 @@ const FisCursor: React.FC = () => {
   }, []);
 
   return (
-      <img
-        src={fishImage}
-        alt="."
-        className=" fish-cursor"
-        ref={carRef}
-        style={{
-          left: position.x,
-          top: position.y,
-          transform: `translate(-50%, -50%) rotate(${angle}deg)`,
-          transition: "transform 0.1s",
-        }}
-      />
+    <img
+      src={fishImage}
+      alt="."
+      className=" fish-cursor"
+      ref={carRef}
+      style={{
+        left: position.x,
+        top: position.y,
+        transform: `translate(-50%, -50%) rotate(${angle}deg)`,
+        transition: "transform 0.1s",
+      }}
+    />
   );
 };
 
diff --git a/src/components/helpers/home/entryWater.tsx b/src/components/helpers/home/entryWater.tsx
index 6d2e1a3..35b3db3 100644
--- a/src/components/helpers/home/entryWater.tsx
+++ b/src/components/helpers/home/entryWater.tsx
@@ -1,11 +1,48 @@
-import React from 'react'
+import { useRef } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; // Ensure ScrollTrigger is imported
+import { useGSAP } from "@gsap/react";
+
+const CircleFilling = () => {
+  const circleRef = useRef(null);
+
+  useGSAP(() => {
+    gsap.registerPlugin(ScrollTrigger);
+
+    const circle = circleRef.current;
+    const tl = gsap.timeline({ paused: true });
+
+    // Draw the SVG circle element (adjust size and color as needed)
+    tl.fromTo(
+      circle,
+      { strokeDasharray: "0 100", strokeDashoffset: 100 },
+      { strokeDasharray: "100 100", strokeDashoffset: 0, duration: 1 },
+    );
+
+    // Trigger animation based on scroll position
+    ScrollTrigger.create({
+      trigger: circle,
+      start: "top bottom",
+      end: "bottom top",
+      scrub: true,
+      onUpdate: (self) => {
+        tl.progress(self.progress);
+      },
+    });
+  });
 
-function EntryWater() {
   return (
-    <div>
-        
-    </div>
-  )
-}
+    <svg className="circle" ref={circleRef} viewBox="0 0 200 200">
+      <circle
+        cx="100"
+        cy="100"
+        r="80"
+        stroke="blue"
+        stroke-width="10"
+        fill="none"
+      />
+    </svg>
+  );
+};
 
-export default EntryWater
\ No newline at end of file
+export default CircleFilling;
diff --git a/src/components/helpers/home/introduction.tsx b/src/components/helpers/home/introduction.tsx
index 902e7b6..80bae48 100644
--- a/src/components/helpers/home/introduction.tsx
+++ b/src/components/helpers/home/introduction.tsx
@@ -11,69 +11,68 @@ function Introduction() {
   gsap.registerPlugin(ScrollTrigger);
   gsap.registerPlugin(MotionPathPlugin);
 
-
   const path = [
     // 1
     { x: -300, y: 50 },
     { x: -500, y: -50 },
     { x: -50, y: 0 },
     { x: -50, y: 200 },
-
-    
-  ]
-
+  ];
 
   useGSAP(() => {
-    gsap.to(
-      fishRef.current,
-      {
-        duration: 4,
-        motionPath: {
-          path: path,
-          autoRotate: true
-          
-        },
-        scrollTrigger: {
-          markers: true,
-          end: '70% 70%',
-          start: '40% 40%',
-          scrub: 0.67,
-        }
+    gsap.to(fishRef.current, {
+      duration: 4,
+      motionPath: {
+        path: path,
+        autoRotate: true,
       },
-    );
+      scrollTrigger: {
+        markers: true,
+        end: "70% 70%",
+        start: "40% 40%",
+        scrub: 0.67,
+      },
+    });
   });
 
   return (
     <>
-    <section
-      className={`-mt-[1.8cm] w-full h-screen flex items-center text-center justify-center relative flex-col`}
-    >
-      <h1 className=" text-white text-[7rem] uppercase merienda-900">
-        <span className=" bg-gradient-to-r from-fuchsia-800 via-violet-600 to-rose-600 bg-clip-text text-transparent">
-          Save
-        </span>
-        <br />
-        <span className=" bg-gradient-to-tr from-fuchsia-800 via-violet-600 to-rose-600 bg-clip-text text-transparent">
-          Our Shores
-        </span>
-      </h1>
+      <section
+        className={`-mt-[1.8cm] w-full h-screen flex items-center text-center justify-center relative flex-col`}
+      >
+        <h1 className=" text-white text-[7rem] uppercase merienda-900">
+          <span className=" bg-gradient-to-r from-fuchsia-800 via-violet-600 to-rose-600 bg-clip-text text-transparent">
+            Save
+          </span>
+          <br />
+          <span className=" bg-gradient-to-tr from-fuchsia-800 via-violet-600 to-rose-600 bg-clip-text text-transparent">
+            Our Shores
+          </span>
+        </h1>
 
-      <div className="field">
-        <div className="mouse"></div>
-      </div>
+        <div className="field">
+          <div className="mouse"></div>
+        </div>
 
-      <div
-        ref={fishRef}
-        className="fishbox absolute bottom-[60px] translate-x-[8rem]"
-      >
-        <img ref={fishRef} className="w-[150px]" src="https://static.igem.wiki/teams/5312/temp-images/output-onlinegiftools.gif" alt="" />
-      </div>
-    </section>
-    
-<section>
-  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque, similique vitae. Officiis sequi velit distinctio nam aut officia cumque aliquam blanditiis praesentium eveniet. Sit ratione vitae, tempora corporis perferendis id?
-</section>
+        <div
+          ref={fishRef}
+          className="fishbox absolute bottom-[60px] translate-x-[8rem]"
+        >
+          <img
+            ref={fishRef}
+            className="w-[150px]"
+            src="https://static.igem.wiki/teams/5312/temp-images/output-onlinegiftools.gif"
+            alt=""
+          />
+        </div>
+      </section>
 
+      <section>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque,
+        similique vitae. Officiis sequi velit distinctio nam aut officia cumque
+        aliquam blanditiis praesentium eveniet. Sit ratione vitae, tempora
+        corporis perferendis id?
+      </section>
     </>
   );
 }
diff --git a/src/components/helpers/sematics.tsx b/src/components/helpers/sematics.tsx
index c715c03..467511c 100644
--- a/src/components/helpers/sematics.tsx
+++ b/src/components/helpers/sematics.tsx
@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 
 export const Nav_Link = ({
-  text ,
+  text,
   url,
   className,
 }: {
@@ -12,7 +12,9 @@ export const Nav_Link = ({
   return (
     <li className={`${className} flex flex-col`}>
       <span>
-        <Link className=" no-underline text-grey-white" to={url}>{text}</Link>
+        <Link className=" no-underline text-grey-white" to={url}>
+          {text}
+        </Link>
       </span>
     </li>
   );
@@ -27,9 +29,7 @@ export const Nav_drop = ({
 }) => {
   return (
     <li className="link flex flex-col text-grey-white">
-      <span className="uppercase">
-        {name}
-      </span>
+      <span className="uppercase">{name}</span>
 
       <div className="sub-link absolute top-[2.2cm] w-full left-0 right-0 px-3 450px:px-5 600px:px-10 750px:px-8 1000px:px-[3rem] 1400px:px-[7rem] 1650px:px-[17rem] 1800px:px-[24rem] 2050px:px-[32rem]">
         <div className="w-full bg-dark-blue px-10 pt-5 pb-10">
diff --git a/src/components/new_paper_loader.tsx b/src/components/new_paper_loader.tsx
index 90a9ea5..7f1da79 100644
--- a/src/components/new_paper_loader.tsx
+++ b/src/components/new_paper_loader.tsx
@@ -63,11 +63,7 @@ const NewPaper = ({
         //   repeatDelay: 1,
       }}
     >
-      <img
-        src={url}
-        alt="Img"
-        className={`w-[30cm] h-[18cm] -mt-6`}
-      />
+      <img src={url} alt="Img" className={`w-[30cm] h-[18cm] -mt-6`} />
     </motion.div>
   );
 };
diff --git a/src/containers/App/App.css b/src/containers/App/App.css
index f478454..1a19050 100644
--- a/src/containers/App/App.css
+++ b/src/containers/App/App.css
@@ -13,7 +13,12 @@ body {
   padding: 0;
   overflow-x: hidden;
   overflow-y: auto;
-  background: linear-gradient(to bottom, black, rgb(3, 22, 43), rgb(22, 23, 61));
+  background: linear-gradient(
+    to bottom,
+    black,
+    rgb(3, 22, 43),
+    rgb(22, 23, 61)
+  );
 }
 
 * {
diff --git a/src/containers/App/App.tsx b/src/containers/App/App.tsx
index 2ba5f05..c4c8cba 100644
--- a/src/containers/App/App.tsx
+++ b/src/containers/App/App.tsx
@@ -9,7 +9,7 @@ import FishCursor from "../../components/helpers/cursor";
 
 const App = () => {
   const [showNav, setShowNav] = useState<boolean>(true);
-  let { pathname } = useLocation();
+  const { pathname } = useLocation();
   const pathMapping = getPathMapping();
   const currentPath =
     location.pathname
@@ -32,8 +32,6 @@ const App = () => {
     }
   }, [pathname]);
 
- 
-
   return (
     <>
       <FishCursor />
@@ -42,21 +40,19 @@ const App = () => {
 
       {/* Header and PageContent */}
       <Routes>
-        {Object.entries(pathMapping).map(
-          ([path, {component: Component }]) => (
-            <Route
-              key={path}
-              path={path}
-              element={
-                <>
-                  <main>
-                    <Component />
-                  </main>
-                </>
-              }
-            />
-          )
-        )}
+        {Object.entries(pathMapping).map(([path, { component: Component }]) => (
+          <Route
+            key={path}
+            path={path}
+            element={
+              <>
+                <main>
+                  <Component />
+                </main>
+              </>
+            }
+          />
+        ))}
         <Route
           path="*"
           element={
diff --git a/src/contents/attributions.tsx b/src/contents/attributions.tsx
index 32d82f5..197a6e7 100644
--- a/src/contents/attributions.tsx
+++ b/src/contents/attributions.tsx
@@ -26,7 +26,17 @@ export function Attributions() {
       <div className="row mt-4">
         <div className="col">
           <div>
-            <p>Teams must use the standard Attributions form. To meet the attributions requirement, you must display the standard form on your Wiki by following the instructions <a href="https://competition.igem.org/deliverables/project-attribution" target="_blank">here</a></p>
+            <p>
+              Teams must use the standard Attributions form. To meet the
+              attributions requirement, you must display the standard form on
+              your Wiki by following the instructions{" "}
+              <a
+                href="https://competition.igem.org/deliverables/project-attribution"
+                target="_blank"
+              >
+                here
+              </a>
+            </p>
           </div>
           <div className="bd-callout bd-callout-info">
             <p>
diff --git a/src/contents/home.tsx b/src/contents/home.tsx
index fa5d76c..582ce91 100644
--- a/src/contents/home.tsx
+++ b/src/contents/home.tsx
@@ -1,13 +1,9 @@
 import Introduction from "../components/helpers/home/introduction";
-import EntryWater from "../components/helpers/home/entryWater";
 
 export function Home() {
-
-
   return (
     <>
-     <Introduction />
-     <EntryWater />
+      <Introduction />
     </>
   );
 }
diff --git a/src/contents/index.tsx b/src/contents/index.tsx
index b11a53b..3ded10f 100644
--- a/src/contents/index.tsx
+++ b/src/contents/index.tsx
@@ -3,7 +3,7 @@ export * from "./home.tsx";
 export * from "./team.tsx";
 export * from "./attributions.tsx";
 // Project
-export * from "./project.tsx"
+export * from "./project.tsx";
 export * from "./contribution.tsx";
 export * from "./description.tsx";
 export * from "./engineering.tsx";
diff --git a/src/contents/project.tsx b/src/contents/project.tsx
index c429ac4..01fe10c 100644
--- a/src/contents/project.tsx
+++ b/src/contents/project.tsx
@@ -1,9 +1,3 @@
 export function Project() {
-  return (
-    <div>
-      ghjkl
-    </div>
-  )
+  return <div>ghjkl</div>;
 }
-
-
diff --git a/src/contents/team.tsx b/src/contents/team.tsx
index f159156..5e7556d 100644
--- a/src/contents/team.tsx
+++ b/src/contents/team.tsx
@@ -43,7 +43,7 @@ export function Team() {
           </div>
         </div>
         <div className="col-4">
-        <Inspirations inspirationLinkList={links} />
+          <Inspirations inspirationLinkList={links} />
         </div>
       </div>
     </>
diff --git a/src/pages.ts b/src/pages.ts
index 4093a0d..d3e5240 100644
--- a/src/pages.ts
+++ b/src/pages.ts
@@ -19,7 +19,7 @@ import {
   Plant,
   Software,
   Sustainable,
-  Project
+  Project,
 } from "./contents";
 
 interface Base {
diff --git a/src/styles/home.css b/src/styles/home.css
index 2b6f002..9483d44 100644
--- a/src/styles/home.css
+++ b/src/styles/home.css
@@ -1,45 +1,44 @@
-
 .field {
-	display: flex;
-	align-items: center;
-	justify-content: space-around;
-    position: absolute;
-    bottom: 1.1cm;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  position: absolute;
+  bottom: 1.1cm;
 }
 
 .mouse {
-	width: 50px;
-	height: 90px;
-	border: 3px solid #9a9a9a;
-	border-radius: 60px;
-	position: relative;
+  width: 50px;
+  height: 90px;
+  border: 3px solid #9a9a9a;
+  border-radius: 60px;
+  position: relative;
 }
 
 .mouse::before {
-    content: "";
-    width: 12px;
-    height: 12px;
-    position: absolute;
-    bottom: 0cm;
-    transform: translateX(-50%);
-    background-color: #ababab;
-    border-radius: 50%;
-    opacity: 1;
-    animation: wheel 2s infinite;
-    -webkit-animation: wheel 2s infinite;
-    -webkit-animation: wheel 2s infinite;
+  content: "";
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  bottom: 0cm;
+  transform: translateX(-50%);
+  background-color: #ababab;
+  border-radius: 50%;
+  opacity: 1;
+  animation: wheel 2s infinite;
+  -webkit-animation: wheel 2s infinite;
+  -webkit-animation: wheel 2s infinite;
 }
 
 @keyframes wheel {
-	to {
-		opacity: 0;
-		top: 60px;
-	}
+  to {
+    opacity: 0;
+    top: 60px;
+  }
 }
 
 @-webkit-keyframes wheel {
-	to {
-		opacity: 0;
-		top: 60px;
-	}
+  to {
+    opacity: 0;
+    top: 60px;
+  }
 }
diff --git a/src/styles/navigation.css b/src/styles/navigation.css
index 847adbc..2b91b00 100644
--- a/src/styles/navigation.css
+++ b/src/styles/navigation.css
@@ -1,105 +1,101 @@
-
 .pin {
-    z-index: 99;
-  }
-  
-  .link {
-    padding: 3px 10px;
-    cursor: pointer;
-  }
-  
-  .link::before {
-    content: "";
-    background-color: var(--grey-white);
-    height: 0.1cm;
-    width: 0%;
-    align-self: center;
-    transform: translateY(2.1rem);
-    transition: 0.25s ease-in-out;
-    -webkit-transition: 0.25s ease-in-out;
-    -moz-transition: 0.25s ease-in-out;
-    -o-transition: 0.25s ease-in-out;
-    border-radius: 2px;
-  }
-  
-  .link:hover::before {
-    width: 120%;
-  }
-  
-  .sub-link {
-    display: none;
-    -webkit-transition: 0.25s ease-in-out;
-    -moz-transition: 0.25s ease-in-out;
-    -o-transition: 0.25s ease-in-out;
-  }
-  
-  .link:hover .sub-link {
-    display: flex;
-  }
-  
-  .mobile_nav {
-    display: none;
-    position: relative;
-  }
-  
-  .mobile_nav.show {
-    display: block;
-    position: fixed;
-  }
-  
-  .m_link:hover {
-    transform: scale(1.5);
-    -webkit-transition-transform: scale(1.5);
-    -moz-transition-transform: scale(1.5);
-    -o-transition-transform: scale(1.5);
-    -webkit-transition: 0.25s ease-in-out;
-    -moz-transition: 0.25s ease-in-out;
-    -o-transition: 0.25s ease-in-out;
-  }
-  
-  
-  .sponsors-container {
-      overflow: hidden;
-      width: 100%;
-      background-color: transparent;
-      padding: 20px 0;
-      box-sizing: border-box;
-  }
-  
-  .sponsors-slider {
-      display: flex;
-      width: calc(100%); 
-      animation: scroll 20s linear infinite;
-  }
-  
-  .sponsor-logo {
-      flex: 0 0 auto; 
-      margin: 0 20px;
-  }
-  
-  .sponsor-logo img {
-      height: 100px; 
-  }
-  
-  @keyframes scroll {
-      0% {
-          transform: translateX(0);
-      }
-      100% {
-          transform: translateX(-50%);
-      }
-  }
+  z-index: 99;
+}
+
+.link {
+  padding: 3px 10px;
+  cursor: pointer;
+}
+
+.link::before {
+  content: "";
+  background-color: var(--grey-white);
+  height: 0.1cm;
+  width: 0%;
+  align-self: center;
+  transform: translateY(2.1rem);
+  transition: 0.25s ease-in-out;
+  -webkit-transition: 0.25s ease-in-out;
+  -moz-transition: 0.25s ease-in-out;
+  -o-transition: 0.25s ease-in-out;
+  border-radius: 2px;
+}
+
+.link:hover::before {
+  width: 120%;
+}
+
+.sub-link {
+  display: none;
+  -webkit-transition: 0.25s ease-in-out;
+  -moz-transition: 0.25s ease-in-out;
+  -o-transition: 0.25s ease-in-out;
+}
+
+.link:hover .sub-link {
+  display: flex;
+}
+
+.mobile_nav {
+  display: none;
+  position: relative;
+}
 
-  .fish-cursor {
-    position: fixed;
-    width: 100px; 
-    height: 100px; 
-    pointer-events: none;
-    transform-origin: center;
-    transition: transform .5s;
-    z-index: 109;
-    user-select: none;
-    --webkit-user-select: none;
+.mobile_nav.show {
+  display: block;
+  position: fixed;
+}
+
+.m_link:hover {
+  transform: scale(1.5);
+  -webkit-transition-transform: scale(1.5);
+  -moz-transition-transform: scale(1.5);
+  -o-transition-transform: scale(1.5);
+  -webkit-transition: 0.25s ease-in-out;
+  -moz-transition: 0.25s ease-in-out;
+  -o-transition: 0.25s ease-in-out;
+}
+
+.sponsors-container {
+  overflow: hidden;
+  width: 100%;
+  background-color: transparent;
+  padding: 20px 0;
+  box-sizing: border-box;
+}
+
+.sponsors-slider {
+  display: flex;
+  width: calc(100%);
+  animation: scroll 20s linear infinite;
+}
+
+.sponsor-logo {
+  flex: 0 0 auto;
+  margin: 0 20px;
+}
+
+.sponsor-logo img {
+  height: 100px;
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
   }
+}
 
-  
\ No newline at end of file
+.fish-cursor {
+  position: fixed;
+  width: 100px;
+  height: 100px;
+  pointer-events: none;
+  transform-origin: center;
+  transition: transform 0.5s;
+  z-index: 109;
+  user-select: none;
+  --webkit-user-select: none;
+}
-- 
GitLab


From 959643b00b34a0c77fa2950d627e26aec7735a29 Mon Sep 17 00:00:00 2001
From: AsumVictor <iamasum369@gmail.com>
Date: Fri, 14 Jun 2024 01:57:43 +0000
Subject: [PATCH 4/9] Feat: Added fish animation

---
 src/components/helpers/home/introduction.tsx | 28 +++++++++++++-------
 src/styles/home.css                          |  4 +++
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/helpers/home/introduction.tsx b/src/components/helpers/home/introduction.tsx
index 80bae48..9ab71dd 100644
--- a/src/components/helpers/home/introduction.tsx
+++ b/src/components/helpers/home/introduction.tsx
@@ -16,11 +16,15 @@ function Introduction() {
     { x: -300, y: 50 },
     { x: -500, y: -50 },
     { x: -50, y: 0 },
-    { x: -50, y: 200 },
+    { x: 10, y: 300 },
   ];
 
   useGSAP(() => {
-    gsap.to(fishRef.current, {
+   
+    const fish_intro = gsap.timeline()
+
+    fish_intro.to(fishRef.current, 
+      {
       duration: 4,
       motionPath: {
         path: path,
@@ -28,11 +32,14 @@ function Introduction() {
       },
       scrollTrigger: {
         markers: true,
-        end: "70% 70%",
-        start: "40% 40%",
+        start: '25% center',
+        end: '45% 60%',
         scrub: 0.67,
       },
-    });
+    })
+
+
+
   });
 
   return (
@@ -67,11 +74,12 @@ function Introduction() {
         </div>
       </section>
 
-      <section>
-        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque,
-        similique vitae. Officiis sequi velit distinctio nam aut officia cumque
-        aliquam blanditiis praesentium eveniet. Sit ratione vitae, tempora
-        corporis perferendis id?
+      <section className="  w-full py-10 flex justify-center items-center flex-col">
+       <div className="w-[4cm] h-[7cm] bg-red-400 ">
+        <div className="w-full h-[2cm] bg-green-500 rounded-full river-point"></div>
+        <div className="w-full h-[4cm] bg-yellow-500 z-[100]"></div>
+
+       </div>
       </section>
     </>
   );
diff --git a/src/styles/home.css b/src/styles/home.css
index 9483d44..69adfae 100644
--- a/src/styles/home.css
+++ b/src/styles/home.css
@@ -29,6 +29,10 @@
   -webkit-animation: wheel 2s infinite;
 }
 
+.river-point {
+  transform: rotateX(70deg);
+}
+
 @keyframes wheel {
   to {
     opacity: 0;
-- 
GitLab


From 0658979b8b5ebb168f279ed30c1cc51631033578 Mon Sep 17 00:00:00 2001
From: AsumVictor <iamasum369@gmail.com>
Date: Fri, 14 Jun 2024 03:34:01 +0000
Subject: [PATCH 5/9] Added: Seas animation

---
 src/components/helpers/home/introduction.tsx | 153 ++++++++++++++++---
 src/containers/App/App.css                   |   6 +-
 src/contents/home.tsx                        |   1 +
 src/styles/home.css                          | 128 ++++++++++++++++
 4 files changed, 266 insertions(+), 22 deletions(-)

diff --git a/src/components/helpers/home/introduction.tsx b/src/components/helpers/home/introduction.tsx
index 9ab71dd..d88473c 100644
--- a/src/components/helpers/home/introduction.tsx
+++ b/src/components/helpers/home/introduction.tsx
@@ -7,6 +7,10 @@ import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin";
 
 function Introduction() {
   const fishRef = useRef(null);
+  const maskTitleRef = useRef(null);
+  const chevronRef = useRef<SVGPathElement>(null);
+  const imageContainersRef = useRef<any[]>([]);
+  const contentTextRef = useRef([]);
 
   gsap.registerPlugin(ScrollTrigger);
   gsap.registerPlugin(MotionPathPlugin);
@@ -16,36 +20,94 @@ function Introduction() {
     { x: -300, y: 50 },
     { x: -500, y: -50 },
     { x: -50, y: 0 },
-    { x: 10, y: 300 },
+    { x: 10, y: 470 },
   ];
 
   useGSAP(() => {
-   
-    const fish_intro = gsap.timeline()
+    const fish_intro = gsap.timeline();
 
-    fish_intro.to(fishRef.current, 
-      {
-      duration: 4,
+    fish_intro.to(fishRef.current, {
+      duration: 6,
       motionPath: {
         path: path,
         autoRotate: true,
       },
       scrollTrigger: {
         markers: true,
-        start: '25% center',
-        end: '45% 60%',
+        start: "28% 60%",
+        end: "50% 10%",
         scrub: 0.67,
+        pin: true,
       },
-    })
+    });
 
+    const maskTitle = maskTitleRef.current;
+    const chevron = chevronRef.current;
+    const imageContainers = imageContainersRef.current;
+    const contentText = contentTextRef.current;
 
+    gsap.set(maskTitle, { y: chevron.getBoundingClientRect().height / 2 });
+    gsap.set(chevron, { transformOrigin: "center center" });
 
+    imageContainers.forEach((imageContainer: any) => {
+      const image = imageContainer.querySelector("img");
+      const offsetY = parseFloat(imageContainer.dataset.offsetY) || 0;
+      const scrub = parseFloat(imageContainer.dataset.scrub) || 0.1;
+
+      const imageAnim = gsap.to(image, {
+        yPercent: offsetY,
+        duration: scrub,
+        paused: true,
+      });
+
+      ScrollTrigger.create({
+        animation: imageAnim,
+        scrub: true,
+        trigger: imageContainer,
+        start: "top center",
+        end: "bottom top",
+      });
+    });
+
+    gsap
+      .timeline({
+        scrollTrigger: {
+          trigger: ".--mask",
+          pin: true,
+          start: "top top",
+          end: "+=925",
+          scrub: 0.2,
+          pinSpacing: false,
+        },
+        defaults: {
+          duration: 1,
+          ease: "power3",
+        },
+      })
+      .to(maskTitle, { opacity: 0, duration: 0.15 }, 0)
+      .to(chevron, { scale: 35, yPercent: -550, duration: 4 }, 0);
+
+    gsap.set(contentText, { y: 50 });
+
+    ScrollTrigger.batch(contentText, {
+      interval: 0.2,
+      batchMax: 2,
+      onEnter: (batch) => gsap.to(batch, { opacity: 1, y: 0, overwrite: true }),
+      onLeave: (batch) =>
+        gsap.set(batch, { opacity: 0, y: -50, overwrite: true }),
+      onEnterBack: (batch) =>
+        gsap.to(batch, { opacity: 1, y: 0, stagger: 0.15, overwrite: true }),
+      onLeaveBack: (batch) =>
+        gsap.set(batch, { opacity: 0, y: 50, overwrite: true }),
+      start: "top bottom",
+      end: "bottom top",
+    });
   });
 
   return (
     <>
       <section
-        className={`-mt-[1.8cm] w-full h-screen flex items-center text-center justify-center relative flex-col`}
+        className={`topll -mt-[1.8cm] w-full h-screen flex items-center text-center justify-center relative flex-col bg-[#0f0925]`}
       >
         <h1 className=" text-white text-[7rem] uppercase merienda-900">
           <span className=" bg-gradient-to-r from-fuchsia-800 via-violet-600 to-rose-600 bg-clip-text text-transparent">
@@ -63,24 +125,77 @@ function Introduction() {
 
         <div
           ref={fishRef}
-          className="fishbox absolute bottom-[60px] translate-x-[8rem]"
+          className="fishbox absolute bottom-[60px] translate-x-[8rem] z-50"
         >
           <img
-            ref={fishRef}
-            className="w-[150px]"
+            className="w-[150px] z-[1000]"
             src="https://static.igem.wiki/teams/5312/temp-images/output-onlinegiftools.gif"
             alt=""
           />
         </div>
       </section>
 
-      <section className="  w-full py-10 flex justify-center items-center flex-col">
-       <div className="w-[4cm] h-[7cm] bg-red-400 ">
-        <div className="w-full h-[2cm] bg-green-500 rounded-full river-point"></div>
-        <div className="w-full h-[4cm] bg-yellow-500 z-[100]"></div>
+      {/* <section className="  w-full py-10 flex justify-center items-center flex-col">
+        <div className="w-[4cm] h-[7cm] bg-red-400 ">
+          <div className="w-full h-[2cm] bg-green-500 rounded-full river-point"></div>
+          <div className="w-full h-[4cm] bg-yellow-500 z-[100]"></div>
+        </div>
+      </section> */}
 
-       </div>
-      </section>
+      {/* Expermentation of code */}
+
+      <div className="grid">
+        <section className="section --mask">
+          <svg
+            id="svg-mask"
+            width="100%"
+            height="100%"
+            viewBox="0 0 1920 1080"
+            preserveAspectRatio="xMidYMid slice"
+          >
+            <defs>
+              <mask id="mask">
+                <rect
+                  width="100%"
+                  height="100%"
+                  fill="#f4f3ff"
+                  className="z-[2]"
+                />
+                <path
+                  ref={chevronRef}
+                  id="inner-mask"
+                  d="
+                          M 864.558 485.399
+                          l 190.884-77.392
+                          V 353.31
+                          l -190.884-77.392
+                          l 123.43 50.043-123.43 50.044
+                          v 54.697
+                          z"
+                />
+              </mask>
+            </defs>
+            <g>
+              <rect
+                mask="url(#mask)"
+                width="100%"
+                height="100%"
+                fill="#0f0925"
+              />
+            </g>
+          </svg>
+          <h1 ref={maskTitleRef} className="mask__title merienda-900">
+            The Story
+          </h1>
+        </section>
+
+        <section className="section --fixed">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis quod
+          laborum, aliquam quas illo velit unde ipsa debitis commodi,
+          consequuntur, natus itaque architecto non exercitationem aspernatur
+          nulla sunt voluptates odit!
+        </section>
+      </div>
     </>
   );
 }
diff --git a/src/containers/App/App.css b/src/containers/App/App.css
index 1a19050..d5bdbcc 100644
--- a/src/containers/App/App.css
+++ b/src/containers/App/App.css
@@ -15,9 +15,9 @@ body {
   overflow-y: auto;
   background: linear-gradient(
     to bottom,
-    black,
-    rgb(3, 22, 43),
-    rgb(22, 23, 61)
+    #000000,
+    #03162b,
+    #16173d
   );
 }
 
diff --git a/src/contents/home.tsx b/src/contents/home.tsx
index 582ce91..67af184 100644
--- a/src/contents/home.tsx
+++ b/src/contents/home.tsx
@@ -1,5 +1,6 @@
 import Introduction from "../components/helpers/home/introduction";
 
+
 export function Home() {
   return (
     <>
diff --git a/src/styles/home.css b/src/styles/home.css
index 69adfae..181d888 100644
--- a/src/styles/home.css
+++ b/src/styles/home.css
@@ -46,3 +46,131 @@
     top: 60px;
   }
 }
+
+
+img {
+  max-width: 100%;
+}
+
+.grid {
+  background-size: cover;
+  position: relative;
+  background-blend-mode: saturation;
+  color: #fff;
+  background: linear-gradient(to bottom,
+		rgba(99, 167, 191, 1),
+		rgba(94, 86, 179, 1),
+		rgba(72, 139, 163, 1),
+
+		rgba(10, 50, 80, 1),
+		rgba(40, 41, 100, 1),
+		rgba(14, 52, 94, 1),
+		black);
+}
+
+.section.--mask {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  color: #000;
+  /* z-index: 1000; */
+}
+
+.content {
+  display: grid;
+  grid-template-columns: minmax(0px, 1fr) repeat(6, [col] minmax(auto, 160px)) minmax(
+      0px,
+      1fr
+    );
+  grid-gap: 20px;
+  grid-template-rows: 1fr;
+  align-items: center;
+  margin: 40px 0;
+}
+.content.--image-right .content__text {
+  grid-column: col/span 4;
+  margin-right: 20px;
+}
+.content.--image-right .content__image {
+  grid-column: -6;
+  margin-right: 29px;
+}
+@media (min-width: 1200px) {
+  .content.--image-right .content__image {
+    grid-column: -7;
+    margin-right: 129px;
+  }
+}
+.content.--image-right-large .content__text {
+  grid-column: col/span 3;
+  margin-right: 20px;
+}
+.content.--image-right-large .content__image {
+  grid-column: -5;
+  margin-left: 20px;
+  margin-right: 57px;
+}
+.content.--image-left .content__text {
+  grid-column: col 3 / span 3;
+  margin-left: 20px;
+}
+.content.--image-left .content__image {
+  grid-column: 1 / span 3;
+}
+@media (min-width: 1200px) {
+  .content.--image-left .content__image {
+    margin-right: 80px;
+    margin-left: 100px;
+  }
+}
+.content.--image-full .content__image {
+  grid-column: col/span 6;
+}
+.content.--image-overhang {
+  min-height: 700px;
+}
+.content__text {
+  grid-column: col/span 6;
+  grid-row: 1;
+}
+.content__text.--center-4-cols {
+  grid-column: col 2 / span 4;
+  text-align: center;
+}
+.content__image {
+  min-height: 50px;
+  grid-row: 1;
+}
+.content__image img {
+  margin: 0;
+  object-fit: cover;
+  width: 100%;
+  height: auto;
+  display: block;
+}
+.content__image--animate,
+.content__image--animate img {
+  will-change: transform;
+}
+.mask__title {
+  z-index: 1;
+}
+.mask__title {
+  font-size: 65px;
+  line-height: 1.2;
+  text-align: center;
+  color: #d7d1d1;
+  max-width: 20ch;
+  margin: auto;
+}
+#svg-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100vh;
+}
-- 
GitLab


From 4111382e2afdcf804a1e2084c8d2f13006cdb6b6 Mon Sep 17 00:00:00 2001
From: AsumVictor <iamasum369@gmail.com>
Date: Sat, 15 Jun 2024 09:31:28 +0000
Subject: [PATCH 6/9] Commented chivron code for experiment

---
 src/components/helpers/home/bubbles.tsx      |  54 ++++++++++
 src/components/helpers/home/introduction.tsx |  34 +++----
 src/containers/App/App.tsx                   |   1 +
 src/styles/bubbles.css                       | 102 +++++++++++++++++++
 src/styles/home.css                          |   4 +-
 5 files changed, 174 insertions(+), 21 deletions(-)
 create mode 100644 src/components/helpers/home/bubbles.tsx
 create mode 100644 src/styles/bubbles.css

diff --git a/src/components/helpers/home/bubbles.tsx b/src/components/helpers/home/bubbles.tsx
new file mode 100644
index 0000000..35f0497
--- /dev/null
+++ b/src/components/helpers/home/bubbles.tsx
@@ -0,0 +1,54 @@
+
+function Bubbles() {
+  return (
+    <>
+      <div className="bubble">
+        <span className="dot"></span>
+      </div>
+      <div className="bubble">
+        <span className="dot"></span>
+      </div>
+      <div className="bubble">
+        <span className="dot"></span>
+      </div>
+      <div className="bubble">
+        <span className="dot"></span>
+      </div>
+      <div className="bubble">
+        <span className="dot"></span>
+      </div>
+      <div className="bubble">
+        <span className="dot"></span>
+      </div>
+      <div className="bubble">
+        <span className="dot"></span>
+      </div>
+      <div className="bubble">
+        <span className="dot"></span>
+      </div>
+      <div className="bubble">
+        <span className="dot"></span>
+      </div>
+      <div className="bubble">
+        <span className="dot"></span>
+      </div>
+      <div className="bubble">
+        <span className="dot"></span>
+      </div>
+      <div className="bubble">
+        <span className="dot"></span>
+      </div>
+      <div className="bubble">
+        <span className="dot"></span>
+      </div>
+      <div className="bubble">
+        <span className="dot"></span>
+      </div>
+      <div className="bubble">
+        <span className="dot"></span>
+      </div>
+    </>
+  );
+}
+
+export default Bubbles;
diff --git a/src/components/helpers/home/introduction.tsx b/src/components/helpers/home/introduction.tsx
index d88473c..9a92dc1 100644
--- a/src/components/helpers/home/introduction.tsx
+++ b/src/components/helpers/home/introduction.tsx
@@ -4,11 +4,12 @@ import { useGSAP } from "@gsap/react";
 import {} from "gsap/src/ScrollTrigger";
 import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
 import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin";
+import Bubbles from "./bubbles";
 
 function Introduction() {
   const fishRef = useRef(null);
   const maskTitleRef = useRef(null);
-  const chevronRef = useRef<SVGPathElement>(null);
+  const chevronRef = useRef<SVGPathElement | null>(null);
   const imageContainersRef = useRef<any[]>([]);
   const contentTextRef = useRef([]);
 
@@ -20,7 +21,7 @@ function Introduction() {
     { x: -300, y: 50 },
     { x: -500, y: -50 },
     { x: -50, y: 0 },
-    { x: 10, y: 470 },
+    { x: 10, y: 430 },
   ];
 
   useGSAP(() => {
@@ -34,8 +35,8 @@ function Introduction() {
       },
       scrollTrigger: {
         markers: true,
-        start: "28% 60%",
-        end: "50% 10%",
+        start: "22% 80%",
+        end: "44% 30%",
         scrub: 0.67,
         pin: true,
       },
@@ -46,7 +47,7 @@ function Introduction() {
     const imageContainers = imageContainersRef.current;
     const contentText = contentTextRef.current;
 
-    gsap.set(maskTitle, { y: chevron.getBoundingClientRect().height / 2 });
+    // gsap.set(maskTitle, { y: chevron.getBoundingClientRect().height / 2 });
     gsap.set(chevron, { transformOrigin: "center center" });
 
     imageContainers.forEach((imageContainer: any) => {
@@ -107,7 +108,7 @@ function Introduction() {
   return (
     <>
       <section
-        className={`topll -mt-[1.8cm] w-full h-screen flex items-center text-center justify-center relative flex-col bg-[#0f0925]`}
+        className={`fish_dev -mt-[1.8cm] w-full h-screen flex items-center text-center justify-center relative flex-col bg-[#0f0925]`}
       >
         <h1 className=" text-white text-[7rem] uppercase merienda-900">
           <span className=" bg-gradient-to-r from-fuchsia-800 via-violet-600 to-rose-600 bg-clip-text text-transparent">
@@ -135,16 +136,11 @@ function Introduction() {
         </div>
       </section>
 
-      {/* <section className="  w-full py-10 flex justify-center items-center flex-col">
-        <div className="w-[4cm] h-[7cm] bg-red-400 ">
-          <div className="w-full h-[2cm] bg-green-500 rounded-full river-point"></div>
-          <div className="w-full h-[4cm] bg-yellow-500 z-[100]"></div>
-        </div>
-      </section> */}
-
-      {/* Expermentation of code */}
+      {/* In the sea */}
 
       <div className="grid">
+        
+        {/* Mimicing diving of fish */}
         <section className="section --mask">
           <svg
             id="svg-mask"
@@ -189,11 +185,11 @@ function Introduction() {
           </h1>
         </section>
 
-        <section className="section --fixed">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis quod
-          laborum, aliquam quas illo velit unde ipsa debitis commodi,
-          consequuntur, natus itaque architecto non exercitationem aspernatur
-          nulla sunt voluptates odit!
+        <section className="section --fixed h-screen">
+          <Bubbles />
+          <div className="">
+            <h1>We are hurt by plastic waste</h1>
+          </div>
         </section>
       </div>
     </>
diff --git a/src/containers/App/App.tsx b/src/containers/App/App.tsx
index c4c8cba..6000332 100644
--- a/src/containers/App/App.tsx
+++ b/src/containers/App/App.tsx
@@ -1,6 +1,7 @@
 import "./App.css";
 import "../../styles/navigation.css";
 import "../../styles/home.css";
+import "../../styles/bubbles.css";
 import { Route, Routes, useLocation } from "react-router-dom";
 import { Footer, Header, Navbar, NotFound } from "../../components";
 import { getPathMapping, stringToSlug } from "../../utils";
diff --git a/src/styles/bubbles.css b/src/styles/bubbles.css
new file mode 100644
index 0000000..20e560c
--- /dev/null
+++ b/src/styles/bubbles.css
@@ -0,0 +1,102 @@
+.bubbles {
+  height: 60px;
+  width: 60px;
+  border: 2px solid rgba(199, 23, 23, 0.7);
+  border-radius: 50px;
+  position: absolute;
+  top: 10%;
+  left: 10%;
+  animation: 4s linear infinite;
+}
+.bubbles .dot {
+  height: 10px;
+  width: 10px;
+  border-radius: 50px;
+  background: rgba(255, 255, 255, 0.5);
+  position: absolute;
+  top: 20%;
+  right: 20%;
+}
+.bubbles:nth-child(1) {
+  top: 20%;
+  left: 20%;
+  animation: animate 8s linear infinite;
+}
+.bubbles:nth-child(2) {
+  top: 60%;
+  left: 80%;
+  animation: animate 10s linear infinite;
+}
+.bubbles:nth-child(3) {
+  top: 40%;
+  left: 40%;
+  animation: animate 3s linear infinite;
+}
+.bubbles:nth-child(4) {
+  top: 66%;
+  left: 30%;
+  animation: animate 7s linear infinite;
+}
+.bubbles:nth-child(5) {
+  top: 90%;
+  left: 10%;
+  animation: animate 9s linear infinite;
+}
+.bubbles:nth-child(6) {
+  top: 30%;
+  left: 60%;
+  animation: animate 5s linear infinite;
+}
+.bubbles:nth-child(7) {
+  top: 70%;
+  left: 20%;
+  animation: animate 8s linear infinite;
+}
+.bubbles:nth-child(8) {
+  top: 75%;
+  left: 60%;
+  animation: animate 10s linear infinite;
+}
+.bubbles:nth-child(9) {
+  top: 50%;
+  left: 50%;
+  animation: animate 6s linear infinite;
+}
+.bubbles:nth-child(10) {
+  top: 45%;
+  left: 20%;
+  animation: animate 10s linear infinite;
+}
+.bubbles:nth-child(11) {
+  top: 10%;
+  left: 90%;
+  animation: animate 9s linear infinite;
+}
+.bubbles:nth-child(12) {
+  top: 20%;
+  left: 70%;
+  animation: animate 7s linear infinite;
+}
+.bubbles:nth-child(13) {
+  top: 20%;
+  left: 20%;
+  animation: animate 8s linear infinite;
+}
+.bubbles:nth-child(14) {
+  top: 60%;
+  left: 5%;
+  animation: animate 6s linear infinite;
+}
+.bubbles:nth-child(15) {
+  top: 90%;
+  left: 80%;
+  animation: animate 9s linear infinite;
+}
+@keyframes animate {
+  0% {
+    transform: scale(0) translateY(0) rotate(70deg);
+  }
+  100% {
+    transform: scale(1.3) translateY(-100px) rotate(360deg);
+  }
+}
diff --git a/src/styles/home.css b/src/styles/home.css
index 181d888..4d3ffd3 100644
--- a/src/styles/home.css
+++ b/src/styles/home.css
@@ -58,9 +58,9 @@ img {
   background-blend-mode: saturation;
   color: #fff;
   background: linear-gradient(to bottom,
-		rgba(99, 167, 191, 1),
+		/* rgba(99, 167, 191, 1),
 		rgba(94, 86, 179, 1),
-		rgba(72, 139, 163, 1),
+		rgba(72, 139, 163, 1), */
 
 		rgba(10, 50, 80, 1),
 		rgba(40, 41, 100, 1),
-- 
GitLab


From c3d77e62b1a03225744eb0cfeb73b726dac6838a Mon Sep 17 00:00:00 2001
From: AsumVictor <iamasum369@gmail.com>
Date: Sat, 15 Jun 2024 10:50:26 +0000
Subject: [PATCH 7/9] Added mobile links

---
 src/components/Navbar.tsx           | 90 ++++++++++++++++++++++++++++-
 src/components/helpers/sematics.tsx | 21 +++++++
 src/pages.ts                        |  7 +++
 3 files changed, 115 insertions(+), 3 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 78407aa..a2c7033 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,8 +1,22 @@
 import { FaLanguage } from "react-icons/fa";
 import Pages from "../pages.ts";
-import { Nav_Link, Nav_drop } from "./helpers/sematics.tsx";
+import { Mobile_links, Nav_Link, Nav_drop } from "./helpers/sematics.tsx";
+import { HiMiniBars2 } from "react-icons/hi2";
+import { MdOutlineClose } from "react-icons/md";
+import { Link } from "react-router-dom";
+import { useState } from "react";
 
 export function Navbar({ isShow }: { isShow: boolean }) {
+  let [isActive, setIsActive] = useState<boolean>(false);
+
+  const openNav = () => {
+    setIsActive(true);
+  };
+
+  const closeNav = () => {
+    setIsActive(false);
+  };
+
   const nav_link1 = Pages.slice(0, Math.floor(Pages.length / 2) + 1).map(
     (item, pageIndex) => {
       if ("folder" in item && item.folder) {
@@ -34,7 +48,7 @@ export function Navbar({ isShow }: { isShow: boolean }) {
           />
         );
       }
-    },
+    }
   );
 
   const nav_link2 = Pages.slice(nav_link1.length, Pages.length).map(
@@ -68,9 +82,35 @@ export function Navbar({ isShow }: { isShow: boolean }) {
           />
         );
       }
-    },
+    }
   );
 
+  const mobile_links = Pages.map((item, pageIndex) => {
+    if ("folder" in item && item.folder) {
+      return (
+        <Mobile_links
+          key={item.folder[0].path}
+          url={item.folder[0].path}
+          name={item.folder[0].name}
+          handleNavbar={closeNav}
+        />
+      );
+    }
+
+    if ("path" in item) {
+      return (
+        <Mobile_links
+          key={item.path}
+          url={item.path}
+          name={item.name}
+          handleNavbar={closeNav}
+        />
+      );
+    }
+  });
+
+
+
   return (
     <>
       <header
@@ -118,6 +158,50 @@ export function Navbar({ isShow }: { isShow: boolean }) {
               <FaLanguage size={28} />
             </li>
           </ul>
+
+          {/* Language toggler */}
+          <div className="flex flex-row gap-2">
+            <div className="flex flex-row gap-3 900px:hidden">
+              <button
+                type="button"
+                title="Language"
+                className="text-[#e0dbdb] text-3xl px-3 cursor-pointer"
+              >
+                <FaLanguage />
+              </button>
+            </div>
+
+            {/* Bar toggler  */}
+            <div className="flex flex-row gap-3 900px:hidden">
+              <button
+                type="button"
+                title="Language"
+                className="text-[#e0dbdb] text-3xl px-3 cursor-pointer"
+                onClick={() => openNav()}
+              >
+                <HiMiniBars2 />
+              </button>
+            </div>
+          </div>
+          {/* Navigation bar for mobile screen */}
+
+          {isActive && (
+            <div className="900px:hidden top-0 left-0 h-screen bg-[#06081a71] w-full py-14 px-6 backdrop-blur-3xl fixed  ">
+              <div className="flex justify-end items-center">
+                <button
+                  type="button"
+                  title="close"
+                  className="px-4 py-1 text-4xl text-[#e0d9d9] close_btn"
+                  onClick={() => closeNav()}
+                >
+                  <MdOutlineClose />
+                </button>
+              </div>
+              <ul className="merienda-600 text-[#ebe6e6] w-full flex flex-col text-center justify-center items-center mt-10 text-xl gap-5 ">
+                {mobile_links}
+              </ul>
+            </div>
+          )}
         </nav>
       </header>
     </>
diff --git a/src/components/helpers/sematics.tsx b/src/components/helpers/sematics.tsx
index 467511c..301d46b 100644
--- a/src/components/helpers/sematics.tsx
+++ b/src/components/helpers/sematics.tsx
@@ -40,3 +40,24 @@ export const Nav_drop = ({
     </li>
   );
 };
+
+export const Mobile_links = ({
+  url,
+  name,
+  handleNavbar,
+}: {
+  url: string | any;
+  name: string | any;
+  handleNavbar: any;
+}) => {
+  return (
+    <li
+      className="link  m_link flex flex-col uppercase"
+      onClick={() => handleNavbar()}
+    >
+      <span>
+        <Link to={url}>{name}</Link>
+      </span>
+    </li>
+  );
+};
diff --git a/src/pages.ts b/src/pages.ts
index d3e5240..d9a9764 100644
--- a/src/pages.ts
+++ b/src/pages.ts
@@ -137,6 +137,13 @@ const Pages: (Page | Folder)[] = [
   {
     name: "Awards",
     folder: [
+      {
+        name: "Awards",
+        title: "Awards",
+        path: "/awards",
+        component: Education,
+        lead: "Innovative educational tools and outreach activities have the ability to establish a two-way dialogue with new communities by discussing public values and the science behind synthetic biology.",
+      },
       {
         name: "Education",
         title: "Education",
-- 
GitLab


From 1c60d14e9a3d45a792afbe4bd80c4c25afcc732a Mon Sep 17 00:00:00 2001
From: AsumVictor <iamasum369@gmail.com>
Date: Sat, 15 Jun 2024 11:11:01 +0000
Subject: [PATCH 8/9] Refactor: reactor the pages

---
 src/components/Navbar.tsx           |  3 +--
 src/components/helpers/cursor.tsx   | 12 ++++++------
 src/components/helpers/sematics.tsx |  4 ++--
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index a2c7033..fb8b76a 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -3,7 +3,6 @@ import Pages from "../pages.ts";
 import { Mobile_links, Nav_Link, Nav_drop } from "./helpers/sematics.tsx";
 import { HiMiniBars2 } from "react-icons/hi2";
 import { MdOutlineClose } from "react-icons/md";
-import { Link } from "react-router-dom";
 import { useState } from "react";
 
 export function Navbar({ isShow }: { isShow: boolean }) {
@@ -85,7 +84,7 @@ export function Navbar({ isShow }: { isShow: boolean }) {
     }
   );
 
-  const mobile_links = Pages.map((item, pageIndex) => {
+  const mobile_links = Pages.map((item) => {
     if ("folder" in item && item.folder) {
       return (
         <Mobile_links
diff --git a/src/components/helpers/cursor.tsx b/src/components/helpers/cursor.tsx
index 884e76d..76b4836 100644
--- a/src/components/helpers/cursor.tsx
+++ b/src/components/helpers/cursor.tsx
@@ -21,16 +21,16 @@ const FisCursor: React.FC = () => {
 
       if (carRef.current) {
         const rect = carRef.current.getBoundingClientRect();
-        const carX = rect.left + rect.width / 2;
-        const carY = rect.top + rect.height / 2;
+        const fishX = rect.left + rect.width / 2;
+        const fishY = rect.top + rect.height / 2;
 
-        const dx = mouseX - carX;
-        const dy = mouseY - carY;
+        const dx = mouseX - fishX;
+        const dy = mouseY - fishY;
 
         const newAngle = Math.atan2(dy, dx) * (180 / Math.PI);
         setAngle(newAngle);
 
-        setPosition({ x: mouseX, y: mouseY });
+        setPosition({ x: mouseX + 10, y: mouseY + 10 });
       }
     };
 
@@ -44,7 +44,7 @@ const FisCursor: React.FC = () => {
     <img
       src={fishImage}
       alt="."
-      className=" fish-cursor"
+      className=" fixed w-[30px] h-[30px]"
       ref={carRef}
       style={{
         left: position.x,
diff --git a/src/components/helpers/sematics.tsx b/src/components/helpers/sematics.tsx
index 301d46b..9f52eec 100644
--- a/src/components/helpers/sematics.tsx
+++ b/src/components/helpers/sematics.tsx
@@ -31,8 +31,8 @@ export const Nav_drop = ({
     <li className="link flex flex-col text-grey-white">
       <span className="uppercase">{name}</span>
 
-      <div className="sub-link absolute top-[2.2cm] w-full left-0 right-0 px-3 450px:px-5 600px:px-10 750px:px-8 1000px:px-[3rem] 1400px:px-[7rem] 1650px:px-[17rem] 1800px:px-[24rem] 2050px:px-[32rem]">
-        <div className="w-full bg-dark-blue px-10 pt-5 pb-10">
+      <div className="-mt-4  sub-link py-4  absolute top-[2.2cm] w-full left-0 right-0 px-3 450px:px-5 600px:px-10 750px:px-8 1000px:px-[3rem] 1400px:px-[7rem] 1650px:px-[17rem] 1800px:px-[24rem] 2050px:px-[32rem]">
+        <div className="mt-4 w-full bg-dark-blue px-10 pt-5 pb-10 ">
           <span className=" text-slate-300"> {name}</span>
           <ul className=" pr-20 1400px:pr-40">{children}</ul>
         </div>
-- 
GitLab


From 0de39d101dcefb9f981c9467279bf7910754f80c Mon Sep 17 00:00:00 2001
From: AsumVictor <iamasum369@gmail.com>
Date: Sat, 15 Jun 2024 11:14:10 +0000
Subject: [PATCH 9/9] Reactor

---
 src/components/Navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fb8b76a..4b03087 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -113,7 +113,7 @@ export function Navbar({ isShow }: { isShow: boolean }) {
   return (
     <>
       <header
-        className={`${isShow ? " visible" : "invisible"} z-[99] w-full px-3 450px:px-5 600px:px-10 750px:px-8 1000px:px-[3rem] 1400px:px-[7rem] 1650px:px-[17rem] 1800px:px-[24rem] 2050px:px-[32rem] relative `}
+        className={`${isShow ? " visible" : "invisible"} z-[99] w-full px-3 450px:px-5 600px:px-10 750px:px-8 1000px:px-[3rem] 1400px:px-[7rem] 1650px:px-[17rem] 1800px:px-[24rem] 2050px:px-[32rem] sticky top-0`}
       >
         {/* Pins to hold navigation bar */}
         <div className="w-full h-[0.3cm] px-5 flex justify-between overflow-visible">
-- 
GitLab