diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 7e23b943049d2e37a604a5c56de784e4acbdd60f..4b0308790cadd621c332187c296157370568842d 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,8 +1,21 @@ 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 { 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) { @@ -71,9 +84,37 @@ export function Navbar({ isShow }: { isShow: boolean }) { } ); + const mobile_links = Pages.map((item) => { + 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 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] sticky top-0`} + > {/* Pins to hold navigation bar */} <div className="w-full h-[0.3cm] px-5 flex justify-between overflow-visible"> <div className=""> @@ -116,6 +157,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/cursor.tsx b/src/components/helpers/cursor.tsx index 15778f1aaec356c8a1d3789d517e38f1591db0c8..76b4836ae0a104d0f74ca7359ab3699206a305ba 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 }); } }; @@ -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=" fixed w-[30px] h-[30px]" + 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/bubbles.tsx b/src/components/helpers/home/bubbles.tsx new file mode 100644 index 0000000000000000000000000000000000000000..35f049794061417595c59fa88a2e5d0fadad67e4 --- /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/entryWater.tsx b/src/components/helpers/home/entryWater.tsx new file mode 100644 index 0000000000000000000000000000000000000000..35b3db332be7dc34c1f372d3d3bd7d8de79393d5 --- /dev/null +++ b/src/components/helpers/home/entryWater.tsx @@ -0,0 +1,48 @@ +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); + }, + }); + }); + + return ( + <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 CircleFilling; diff --git a/src/components/helpers/home/introduction.tsx b/src/components/helpers/home/introduction.tsx index 5d5c6cd6e95af7f5eaab2ee92644da3337a92f78..9a92dc126c3d508a856157809a7a9742bfd73177 100644 --- a/src/components/helpers/home/introduction.tsx +++ b/src/components/helpers/home/introduction.tsx @@ -1,47 +1,198 @@ 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"; +import Bubbles from "./bubbles"; function Introduction() { - const textRef = useRef(null); + const fishRef = useRef(null); + const maskTitleRef = useRef(null); + const chevronRef = useRef<SVGPathElement | null>(null); + const imageContainersRef = useRef<any[]>([]); + const contentTextRef = useRef([]); + + gsap.registerPlugin(ScrollTrigger); + gsap.registerPlugin(MotionPathPlugin); + + const path = [ + // 1 + { x: -300, y: 50 }, + { x: -500, y: -50 }, + { x: -50, y: 0 }, + { x: 10, y: 430 }, + ]; + + useGSAP(() => { + const fish_intro = gsap.timeline(); + + fish_intro.to(fishRef.current, { + duration: 6, + motionPath: { + path: path, + autoRotate: true, + }, + scrollTrigger: { + markers: true, + start: "22% 80%", + end: "44% 30%", + 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`} - > - <h1 - ref={textRef} - className=" text-white text-[7rem] uppercase merienda-900" + <> + <section + className={`fish_dev -mt-[1.8cm] w-full h-screen flex items-center text-center justify-center relative flex-col bg-[#0f0925]`} > - <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> + <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 + ref={fishRef} + className="fishbox absolute bottom-[60px] translate-x-[8rem] z-50" + > + <img + className="w-[150px] z-[1000]" + src="https://static.igem.wiki/teams/5312/temp-images/output-onlinegiftools.gif" + alt="" + /> + </div> + </section> + + {/* In the sea */} + + <div className="grid"> + + {/* Mimicing diving of fish */} + <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 h-screen"> + <Bubbles /> + <div className=""> + <h1>We are hurt by plastic waste</h1> + </div> + </section> + </div> + </> ); } diff --git a/src/components/helpers/sematics.tsx b/src/components/helpers/sematics.tsx index c715c03721e41963d5c067620d7d38d538923e63..9f52eec0a9fe075b4d7b7ab66288752f4a95560b 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,12 +29,10 @@ 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"> + <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> @@ -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/components/new_paper_loader.tsx b/src/components/new_paper_loader.tsx index 90a9ea5eac2c7e572193c3f6eb31fb5424e82e28..7f1da796180e8e2430ffec3c77fb487d7b312c12 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 f47845408cb41daf28b076f0598d99bbc7ac5394..d5bdbccd03555b1f024b170ea0c0138ca9cbacca 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, + #000000, + #03162b, + #16173d + ); } * { diff --git a/src/containers/App/App.tsx b/src/containers/App/App.tsx index 7985f1a30839bcab05efd53d341060f8adca8fc7..6000332afcc9d0a41f12a18b955622a481fa79eb 100644 --- a/src/containers/App/App.tsx +++ b/src/containers/App/App.tsx @@ -1,5 +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"; @@ -8,7 +10,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 @@ -31,8 +33,6 @@ const App = () => { } }, [pathname]); - - return ( <> <FishCursor /> @@ -41,21 +41,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 32d82f5126787e6b07a3be34d94a7077d0ccc963..197a6e7b7d0fc31728d4410d0bb42447dc5d3ea6 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 5b662afe95566983f54cd1abac8a34b1ba027a05..67af184bd7390c8f7073338397c9053b0ef4ff33 100644 --- a/src/contents/home.tsx +++ b/src/contents/home.tsx @@ -1,11 +1,10 @@ import Introduction from "../components/helpers/home/introduction"; -export function Home() { - +export function Home() { return ( <> - <Introduction /> + <Introduction /> </> ); } diff --git a/src/contents/index.tsx b/src/contents/index.tsx index b11a53bfbfbfa6a85b0046cde67337505569ba91..3ded10f4393ccc30f93966743c2409cbfdd64129 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 c429ac4fc0ffd4c0f52bd7093c40d836193200ce..01fe10c88a738b046c628c22e0b8e1a464d917db 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 f15915605a8cbb30ac161c64616064b02f57abcc..5e7556dcab3cf32252268488537fca88dd99563c 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 4093a0d37ff8cfa0dc90096e1b204ce385fa8a73..d9a976454a17d24e10f7d4e898f396087ba23373 100644 --- a/src/pages.ts +++ b/src/pages.ts @@ -19,7 +19,7 @@ import { Plant, Software, Sustainable, - Project + Project, } from "./contents"; interface Base { @@ -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", diff --git a/src/styles/bubbles.css b/src/styles/bubbles.css new file mode 100644 index 0000000000000000000000000000000000000000..20e560ca81bbd797429217c2389db826f313d58e --- /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 new file mode 100644 index 0000000000000000000000000000000000000000..4d3ffd386f84c4b71e1f5f19506b677b5c2186a6 --- /dev/null +++ b/src/styles/home.css @@ -0,0 +1,176 @@ +.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; +} + +.river-point { + transform: rotateX(70deg); +} + +@keyframes wheel { + to { + opacity: 0; + top: 60px; + } +} + +@-webkit-keyframes wheel { + to { + opacity: 0; + 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; +} diff --git a/src/styles/navigation.css b/src/styles/navigation.css index 847adbc26427a061ef4b6543d78535a872bd2b5f..2b91b00bf0532a2cd481d54ccd0946f4ec527c6a 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; +}