Added Recap Page, Edited Navbar bug where font was too big and overfl…

…owing
ucsddesignco · Apr 19, 2024 · ae9bf88 · ae9bf88
1 parent 75a471b
commit ae9bf88
Show file tree

Hide file tree

Showing 9 changed files with 577 additions and 9 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -13,13 +13,15 @@ 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<HTMLElement>(null);
   const scroll1Ref = useRef<HTMLElement>(null);
   const scroll2Ref = useRef<HTMLElement>(null);
   const scroll3Ref = useRef<HTMLElement>(null);
   const scroll4Ref = useRef<HTMLDivElement>(null);
+  const scroll5Ref = useRef<HTMLDivElement>(null);
   const planetRef = useRef<SVGSVGElement>(null);
   const fakeLogoRef = useRef<HTMLImageElement>(null);
   const fakeRegisterRef = useRef<HTMLDivElement>(null);
@@ -28,13 +30,21 @@ function Rotate() {
   const mobileJudgesRef = useRef<HTMLDivElement>(null);
   const [logoLoaded, setLogoLoaded] = useState(false);
   const homeRef = useRef<HTMLDivElement>(null);
+  const mobileRecapRef = useRef<HTMLDivElement>(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() {
       <Timeline scroll3Ref={scroll3Ref} />
       <Judges scroll4Ref={scroll4Ref} mobileJudgesRef={mobileJudgesRef} />
       <JudgeFunFacts />
+      <Recap scroll5Ref={scroll5Ref} mobileRecapRef={mobileRecapRef} />
+
       <MobileFooter />
     </main>
   );

diff --git a/src/components/MobileFooter/MobileFooter.scss b/src/components/MobileFooter/MobileFooter.scss
@@ -10,18 +10,24 @@ 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 {
       margin-inline-start: calc($footer-font-size / 2);
       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
@@ -13,7 +13,7 @@ type NavbarProps = {
   mobileScrollRefList?: MutableRefObject<HTMLElement | null>[];
 };
 
-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
@@ -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: ''
+  }
+];