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