diff --git a/src/App.tsx b/src/App.tsx index 2a3649e..e6b73f9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,6 +13,7 @@ import LogoAndRegister from './components/LogoAndRegister/LogoAndRegister'; import Asteroid from './components/Asteroid/Asteroid'; import JudgeFunFacts from './components/JudgeFunFacts/JudgeFunFacts'; import MobileFooter from './components/MobileFooter/MobileFooter'; +import Recap from './pages/Recap/Recap'; function Rotate() { const scrollContainerRef = useRef(null); @@ -20,6 +21,7 @@ function Rotate() { const scroll2Ref = useRef(null); const scroll3Ref = useRef(null); const scroll4Ref = useRef(null); + const scroll5Ref = useRef(null); const planetRef = useRef(null); const fakeLogoRef = useRef(null); const fakeRegisterRef = useRef(null); @@ -28,13 +30,21 @@ function Rotate() { const mobileJudgesRef = useRef(null); const [logoLoaded, setLogoLoaded] = useState(false); const homeRef = useRef(null); + const mobileRecapRef = useRef(null); - const scrollRefList = [scroll1Ref, scroll2Ref, scroll3Ref, scroll4Ref]; + const scrollRefList = [ + scroll1Ref, + scroll2Ref, + scroll3Ref, + scroll4Ref, + scroll5Ref + ]; const mobileScrollRefList = [ scroll1Ref, mobileFAQRef, scroll3Ref, - mobileJudgesRef + mobileJudgesRef, + mobileRecapRef ]; const [pausedPlanet, setPausedPlanet] = useState(''); @@ -75,6 +85,8 @@ function Rotate() { + + ); diff --git a/src/components/MobileFooter/MobileFooter.scss b/src/components/MobileFooter/MobileFooter.scss index 986b672..19c2695 100644 --- a/src/components/MobileFooter/MobileFooter.scss +++ b/src/components/MobileFooter/MobileFooter.scss @@ -10,11 +10,14 @@ footer { display: flex; flex-direction: row; align-items: center; + p { + font-size: $footer-font-size; + } flex-wrap: wrap; svg { - height: $p-size; + height: $footer-font-size; } #heart { @@ -22,6 +25,9 @@ footer { margin-inline-end: calc($footer-font-size / 3); } } + a { + font-size: $footer-font-size; + } @media (min-width: $mobile-breakpoint) { display: none; diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index 9b880c1..6dd07f4 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -13,7 +13,7 @@ type NavbarProps = { mobileScrollRefList?: MutableRefObject[]; }; -type Pages = 'Home' | 'FAQ' | 'Timeline' | 'Judges'; +type Pages = 'Home' | 'FAQ' | 'Timeline' | 'Judges' | 'Recap'; export default function Navbar({ scrollRefList, @@ -23,12 +23,13 @@ export default function Navbar({ mobileScrollRefList }: NavbarProps) { const [isHamburgerOpen, setIsHamburgerOpen] = useState(false); - const pagesList = ['Home', 'FAQ', 'Timeline', 'Judges']; + const pagesList = ['Home', 'FAQ', 'Timeline', 'Judges', 'Recap']; const planetColorsPages = { Home: '', FAQ: 'blue', Timeline: 'purple', - Judges: 'red' + Judges: 'red', + Recap: 'yellow' }; const isDesktop = useIsDesktop(); const [pageSelected, setPageSelected] = useState('Home'); @@ -106,6 +107,12 @@ export default function Navbar({ if (scrollPosition > lastScrollTopRef.current) { // Scrolling Down if ( + scrollPosition > + scrollRefList[3].current!.offsetTop + pageHeight / 2 + ) { + setPageSelected('Recap'); + setPausedPlanet('yellow'); + } else if ( scrollPosition > scrollRefList[2].current!.offsetTop + pageHeight / 2 ) { @@ -138,6 +145,12 @@ export default function Navbar({ ) { setPageSelected('Timeline'); setPausedPlanet('purple'); + } else if ( + scrollPosition < + scrollRefList[4].current!.offsetTop - pageHeight / 2 + ) { + setPageSelected('Judges'); + setPausedPlanet('red'); } } lastScrollTopRef.current = scrollPosition <= 0 ? 0 : scrollPosition; diff --git a/src/pages/Recap/Projects.tsx b/src/pages/Recap/Projects.tsx new file mode 100644 index 0000000..35fbe2c --- /dev/null +++ b/src/pages/Recap/Projects.tsx @@ -0,0 +1,127 @@ +export const Projects = [ + { + //One + name: 'BREAD4', + casestudylink: + 'https://www.notion.so/1-Design-Frontiers-2024-f1c25fd548a341daabf499e997e1ddd5', + slidedecklink: + 'https://docs.google.com/presentation/d/14qo8Hn3MBUgLNz5k6UXxP5ZJ1a6uKQCDOPHgsNRPFdo/edit?usp=sharing' + }, + { + //Two + name: 'Corn on Vee KOB', + casestudylink: + 'https://www.notion.so/2-Design-Frontiers-2024-8201ac9150984481811165f147046859', + slidedecklink: + 'https://docs.google.com/presentation/d/1jDNLADkEVItYto_C8dbFjDym0Ayt8HBHlIxtjJMScis/edit?usp=sharing' + }, + { + //Three + name: 'FIG Baddies', + casestudylink: + 'https://www.notion.so/3-Design-Frontiers-2024-0694b9e674b04abaa9c082c14ad81962', + slidedecklink: + 'https://drive.google.com/file/d/1A90Qiw3HexpYt-c0mjuXggaYeGxGvSgV/view?usp=sharing' + }, + { + //Four + name: 'Raccoons', + casestudylink: + 'https://www.notion.so/4-Trivia-by-Zoom-081a01bb7e444de591921a5fc6b3d72c', + slidedecklink: + 'https://www.figma.com/proto/88l348xep0QGCoRdyqCuhh/Design-Frontiers-2024?page-id=5%3A2&type=design&node-id=42-995&viewport=322%2C302%2C0.06&t=kWSTvhvdG0LJDwvS-1&scaling=scale-down-width&starting-point-node-id=42%3A995&mode=design' + }, + { + //Five + name: 'The Four Personas', + casestudylink: + 'https://www.notion.so/5-Design-Frontiers-2024-4237eab0c7e74bab98212f4acedaf856', + slidedecklink: + 'https://docs.google.com/presentation/d/1ElGf6jnLj4BFHberb0sMJG7iy778IMKCf9bNQlR7J24/edit?usp=sharing' + }, + { + //Six MISSING SLIDEDECK + name: 'Teen Tritons Go ', + casestudylink: + 'https://www.notion.so/Savory-Design-Frontiers-2024-6a5cf428ce474ba7b10829822ea59daa', + slidedecklink: '' + }, + { + //Seven + name: 'PC^2', + casestudylink: + 'https://www.notion.so/7-Design-Frontiers-2024-020f67bfd726415a874e3b71911dadf7', + slidedecklink: + 'https://docs.google.com/presentation/d/1AO_1S8oD_GWmA6K3WIFCAegXwMecfg3CVvN5eB10S94/edit?usp=sharing' + }, + { + //Eight MISSING SLIDE DECK + name: 'Pokekatsucurry', + casestudylink: + 'https://www.notion.so/8-Design-Frontiers-2024-818070f2c35d47ff8e3f37f72a9899c3', + slidedecklink: '' + }, + { + //Nine + name: 'Namae', + casestudylink: + 'https://www.notion.so/9-Design-Frontiers-2024-95e1ec0346374f23a3c20a635c4a1931', + slidedecklink: + 'https://drive.google.com/file/d/1VAgUOzvpDZ4RISYDgp5xBTS_TCTWLmJL/view?usp=share_link' + }, + { + //Ten + name: 'Team 1X', + casestudylink: + 'https://www.notion.so/Tabee-041fb20890e44f4cb821a86e102fe7a5', + slidedecklink: + 'https://docs.google.com/presentation/d/1X7fHKeFrduDBaZjOBzOAeMaGhomCgruouQVX2xmBOu8/edit#slide=id.p' + }, + { + //Eleven + name: 'ASK’M', + casestudylink: + 'https://www.notion.so/12-Design-Frontiers-2024-1fccf4847d0e4809a8e369c6f3a6ed74', + slidedecklink: + 'https://www.figma.com/file/FKZKKpN2xgxpkMu3mjyUjG/slidedeck?type=design&node-id=0%3A1&mode=design&t=871908kztcSh1OZI-1' + }, + { + //Twelve + name: 'Binks', + casestudylink: + 'https://www.notion.so/13-Design-Frontiers-2024-c14e351ca14648aea90bfd6801293093', + slidedecklink: + 'https://docs.google.com/presentation/d/1Ge9Hvutwv8sYrEqS0_E2FXZXLrsgkbjZ13jOYOnF6_0/edit?usp=sharing' + }, + { + //Thirteen + name: 'UX Wave', + casestudylink: + 'https://www.notion.so/Team-14-Design-Frontiers-2024-9ce8da69638b469d9eca12c5b43b143c', + slidedecklink: + 'https://drive.google.com/file/d/1TTU7JRDg5z5q75SWvfdDf6_r11YVHwEI/view?usp=sharing' + }, + { + //Fourteen + name: 'Gummy Worms', + casestudylink: + 'https://www.notion.so/15-Design-Frontiers-2024-1710c8ab70d24c568dbf07354fb9c123', + slidedecklink: + 'https://docs.google.com/presentation/d/1jECeG2JqP_c65CMaI1XO6Cfom1P_WtDE4yYdwyEYNMg/edit?usp=sharing' + }, + { + //Fifteen + name: 'H&M.com', + casestudylink: + 'https://www.notion.so/16-Design-Frontiers-2024-c612309af5df4c8584f77bc663649529', + slidedecklink: + 'https://docs.google.com/presentation/d/1C2_cbrvjTv1jfBX4hOYeNWbIr5x-_6ybpG-zu1ne4WU/edit?usp=sharing' + }, + { + //Sixteen MISSING SLIDE DECK + name: 'Mini Crosswords', + casestudylink: + 'https://www.notion.so/17-Design-Frontiers-2024-85184fb23c4e4aa6947072c36f78132a', + slidedecklink: '' + } +]; diff --git a/src/pages/Recap/Recap.scss b/src/pages/Recap/Recap.scss new file mode 100644 index 0000000..4b72061 --- /dev/null +++ b/src/pages/Recap/Recap.scss @@ -0,0 +1,191 @@ +.scroll-section-seven, +.scroll-section-eight { + display: none; +} +.mobile { + display: block; + .recap { + padding-top: 4rem; + + h1 { + font-size: 2.5rem; + color: $primary-orange; + margin-bottom: 0.5rem; + } + p { + margin-bottom: 0rem; + } + .last { + margin-bottom: 1rem; + } + .grid-layout { + height: auto; + width: 100%; + margin-bottom: 0rem; + display: grid; + grid-template-columns: 4fr; + grid-template-rows: repeat(16, 1fr); + grid-column-gap: 0px; + grid-row-gap: 3rem; + + .project-item { + display: flex; + flex-direction: row; + justify-content: space-between; + height: calc(2rem + 3vw); + + .left { + display: inline-block; + align-items: start; + justify-content: center; + height: auto; + line-height: 1.85rem; + } + + .right { + width: 88%; + height: 4rem; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: start; + .project-name { + font-size: 1.25rem; + font-family: $p-font; + } + .button-cont { + display: flex; + flex-direction: row; + justify-content: start; + + width: 90%; + .btn { + text-decoration: none; + transform: skew(-15deg); + + display: inline-block; + + padding: 0.4em 1.2em; + text-overflow: none; + white-space: nowrap; + + p { + font-size: clamp(0.625rem, 0.9vw, 1rem); + letter-spacing: 2.4px; + margin-bottom: 0; + transform: skew(15deg); + } + } + + .btn.case-study { + background-color: $primary-orange; + color: $primary-white; + } + + .btn.slide-deck { + background-color: $primary-white; + color: $primary-blue; + margin-left: clamp(0.5rem, 0.78vw, 1rem); + } + } + } + } + } + } +} + +@media screen and (min-width: $mobile-breakpoint) { + .scroll-section-seven, + .scroll-section-eight { + display: block; + } + + .mobile { + display: none; + } + .recap { + h1 { + font-size: 2.5rem; + color: $primary-orange; + margin-bottom: 1.5rem; + } + p { + margin-bottom: 0.5rem; + } + .last { + margin-bottom: 1.5rem; + } + + .grid-layout { + height: 50%; + width: 95%; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(4, 1fr); + grid-column-gap: 10%; + grid-row-gap: 2%; + + .project-item { + display: flex; + flex-direction: row; + justify-content: space-between; + height: calc(2rem + 3vw); + + .left { + display: inline-block; + align-items: start; + justify-content: center; + height: auto; + line-height: 1.85rem; + } + + .right { + width: 88%; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: start; + .project-name { + font-size: 1.25rem; + font-family: $p-font; + } + .button-cont { + display: flex; + flex-direction: row; + justify-content: start; + + width: 90%; + .btn { + text-decoration: none; + transform: skew(-15deg); + + display: inline-block; + + padding: 0.4em 1.2em; + text-overflow: none; + white-space: nowrap; + + p { + font-size: clamp(0.625rem, 0.9vw, 1rem); + letter-spacing: 2.4px; + margin-bottom: 0; + transform: skew(15deg); + } + } + + .btn.case-study { + background-color: $primary-orange; + color: $primary-white; + } + + .btn.slide-deck { + background-color: $primary-white; + color: $primary-blue; + margin-left: clamp(0.5rem, 0.78vw, 1rem); + } + } + } + } + } + } +} diff --git a/src/pages/Recap/Recap.tsx b/src/pages/Recap/Recap.tsx new file mode 100644 index 0000000..54c1188 --- /dev/null +++ b/src/pages/Recap/Recap.tsx @@ -0,0 +1,131 @@ +import React from 'react'; +import './Recap.scss'; + +import { Projects } from './Projects'; + +type RecapProps = { + scroll5Ref: React.RefObject; + mobileRecapRef: React.RefObject; +}; + +export default function Recap({ scroll5Ref, mobileRecapRef }: RecapProps) { + return ( + <> +
+
+

RECAP

+

Thanks for attending Design Frontiers 2024!

+

+ Missed out on the event? Check out all the student projects below! +

+ +
+ {Projects.slice(0, 8).map((project, index) => ( +
+
+

{index + 1}.

+
+
+

{project.name}

+ +
+ {/* Render project item */} +
+ ))} +
+
+
+
+
+
+ {Projects.slice(8, 16).map((project, index) => ( +
+
+

{index + 9}.

+
+
+

{project.name}

+ +
+
+ ))} +
+
+
+
+
+

RECAP

+

Thanks for attending Design Frontiers 2024!

+

+ Missed out on the event? Check out all the student projects below! +

+ +
+ {Projects.slice(0, 16).map((project, index) => ( +
+
+

{index + 1}.

+
+
+

{project.name}

+ +
+
+ ))} +
+
+
+ + ); +} diff --git a/src/styles/App.scss b/src/styles/App.scss index 90c3f86..51d6cba 100644 --- a/src/styles/App.scss +++ b/src/styles/App.scss @@ -68,7 +68,9 @@ .scroll-section-three, .scroll-section-four, .scroll-section-five, - .scroll-section-six { + .scroll-section-six, + .scroll-section-seven, + .scroll-section-eight { scroll-snap-align: center; height: 100vh; padding-left: $content-offset; @@ -86,7 +88,9 @@ .three, .four, .five, - .six { + .six, + .seven, + .eight { opacity: 1; height: 100vh; transform: rotate(80deg); diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 610321a..81682a7 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -11,7 +11,7 @@ $mobile-breakpoint: 1200px; $p-size: clamp(16px, calc(10px + 0.7vw), 20px); $h3-size: clamp(22px, calc(12px + 0.8vw), 32px); $h2-size: 40px; -$footer-font-size: clamp(8px, 2.5vw, $p-size); +$footer-font-size: clamp(12px, 2.8vw, $p-size); $header-font: 'Ridge Obligque Regular'; $subheader-font: 'NeuePlak Bold'; diff --git a/src/util/handleRotate.ts b/src/util/handleRotate.ts index 040bb22..5ae8407 100644 --- a/src/util/handleRotate.ts +++ b/src/util/handleRotate.ts @@ -259,6 +259,90 @@ export function handleRotate(planetRef: React.RefObject) { duration: 1, ease: 'none' }); + gsap.from('.seven', { + scrollTrigger: { + scroller: '.scroll-cont', + trigger: '.scroll-section-seven', + scrub: 0.1, + start: 'top 100%', + end: 'top' + }, + opacity: 0, + duration: 1, + ease: 'out', + x: -1000, + y: 200 + }); + + gsap.from('.seven', { + scrollTrigger: { + scroller: '.scroll-cont', + trigger: '.scroll-section-seven', + scrub: 0.1, + //Where animation starts and ends + start: 'bottom 100%', + end: 'bottom' + }, + opacity: 1, + duration: 1, + ease: 'none' + }); + + gsap.to('.seven', { + scrollTrigger: { + scroller: '.scroll-cont', + trigger: '.scroll-section-seven', + scrub: 0.01, + start: 'top 100%', + end: 'bottom' + }, + rotation: -80, + transformOrigin: transformOrigin, + duration: 1, + ease: 'none' + }); + gsap.from('.eight', { + scrollTrigger: { + scroller: '.scroll-cont', + trigger: '.scroll-section-eight', + scrub: 0.1, + start: 'top 100%', + end: 'top' + }, + opacity: 0, + duration: 1, + ease: 'out', + x: -1000, + y: 200 + }); + + gsap.from('.eight', { + scrollTrigger: { + scroller: '.scroll-cont', + trigger: '.scroll-section-eight', + scrub: 0.1, + //Where animation starts and ends + start: 'bottom 100%', + end: 'bottom' + }, + opacity: 1, + duration: 1, + ease: 'none' + }); + + gsap.to('.eight', { + scrollTrigger: { + scroller: '.scroll-cont', + trigger: '.scroll-section-eight', + scrub: 0.01, + start: 'top 100%', + end: 'bottom' + }, + rotation: -80, + transformOrigin: transformOrigin, + duration: 1, + ease: 'none' + }); return () => { // optionally return a cleanup function that will be called when none of the conditions match anymore (after having matched)