Arvin timer

src/components/navbar/Navbar.module.scss

@@ -1,47 +1,68 @@
-@use "src/styles/vars" as colors;
+@use "../../styles/vars.scss" as vars;
 
 .navbarWrapper {
   position: fixed;
   top: 0;
+  font-weight: 400;
   width: 100%;
-  font-weight: bold;
   z-index: 10;
   white-space: nowrap;
 
   // container for fixed navbar (desktop and mobile)
   .navbar {
-    background-color: colors.$white;
+    background-color: vars.$white;
     z-index: 20;
     font-size: 18px;
     width: 100%;
 
     height: 78px;
-    display: flex;
     justify-content: space-between;
     align-items: center;
 
     // left side of navbar is just the acm logo
     .left {
       height: 78px;
-      padding-top: 9px;
-      padding-bottom: 9px;
+      //padding-top: 9px;
+      //padding-bottom: 9px;
+      padding: 16px 30px 16px 30px;
       margin-left: 32px;
+      display: flex;
+
       a {
         display: flex;
-        flex-direction: row;
         align-items: center;
         text-decoration: none;
+        padding: 0px 16px 0px 16px;
+        flex-shrink: 0;
+
         > img {
-          height: 60px;
+          height: 48px;
           margin: 0;
         }
         > p {
-          font-size: 24px;
-          color: colors.$black;
+          font-size: 23px;
+          color: vars.$black;
+          margin-left: 4px;
+          margin-bottom: 2px;
+        }
+      }
+      a:hover {
+        cursor: pointer
+      }
+
+      .divider {
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        padding-right: 16px;
+        span {
+          font-size: 23px;
+          color: vars.$black;
           margin-left: 4px;
           margin-bottom: 2px;
         }
       }
+
     }
 
     // navbar right side contains all navlinks on desktop
@@ -55,7 +76,7 @@
         display: flex;
         align-items: center;
         text-decoration: none;
-        color: colors.$black;
+        color: vars.$black;
         margin-right: 32px;
       }
 
@@ -71,8 +92,8 @@
         height: 35px;
         width: 150px;
 
-        color: colors.$white;
-        background-color: colors.$black;
+        color: vars.$white;
+        background-color: vars.$black;
         border-radius: 0.5em;
         margin-right: 32px;
 
@@ -93,14 +114,14 @@
       height: 20px;
       margin: 0 30px;
       padding: 0;
-      background-color: colors.$white;
+      background-color: vars.$white;
 
       // the toggle icon is composed of two bars we can separately animate between a hamburger icon and an x icon (default is hamburger, we have .open class we can toggle to rotate into the shape of an x)
       .bar1 {
         width: 40px;
         height: 5px;
         border-radius: 2px;
-        background-color: colors.$black;
+        background-color: vars.$black;
         position: absolute;
         top: 1.5px;
         transition: 0.3s ease-in-out all;
@@ -115,7 +136,7 @@
         width: 23px;
         height: 5px;
         border-radius: 2px;
-        background-color: colors.$black;
+        background-color: vars.$black;
         position: absolute;
         right: 0;
         bottom: 1.5px;
@@ -141,12 +162,12 @@
     bottom: -0.4em;
     background: linear-gradient(
       270deg,
-      colors.$red 0%,
-      colors.$orange 18.75%,
-      colors.$green-success 36.98%,
-      colors.$blue-ap 55.73%,
-      colors.$blue 75%,
-      colors.$purple 100%
+      vars.$red 0%,
+      vars.$orange 18.75%,
+      vars.$green-success 36.98%,
+      vars.$blue-ap 55.73%,
+      vars.$blue 75%,
+      vars.$purple 100%
     );
   }
 }

src/components/navbar/index.tsx

@@ -6,35 +6,44 @@ import ACMLogo from "../../../public/assets/acm_logo.svg";
 import s from "../navbar/Navbar.module.scss";
 import { Size, useWindowSize } from "../../utils/general";
 
-
-const navLinks = [
-  { to: "/", text: "Home" },
-  { to: "/", text: "Applications" },
-  { to: "/", text: "About" },
-  { to: "/", text: "Archive" },
-  { to: "/", text: "Gallery" },
-];
-
 const NavigationBar: React.FC = () => {
   const size: Size = useWindowSize();
 
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [mobile, setMobile] = useState(false);
-  const toggleMenu = () => setMenuOpen(!menuOpen);
-
-  // Switch to mobile less than 960px
-  // useEffect(() => {
-  //   setMobile(size.width <= 960);
-  // }, [size]);
-
-  // If they go back to desktop size, don't keep the menu open
-  // useEffect(() => {
-  //   if (!mobile) setMenuOpen(false);
-  // }, [mobile]);
-
   return (
     <div className={s.navbarWrapper}>
-
+      <div className={s.navbar}>
+        {/* Navbar ACM Logo */}
+        <div className={s.left}>
+            <a href="https://acmucsd.com/">
+              <img src={ACMLogo.src} alt="ACM Logo" />
+              <p>Projects</p>
+            </a>
+            <div className={s.divider}>
+              <span>|</span>
+            </div>
+            <Link href={"/#home"}>
+              <p>Home</p>
+            </Link>
+
+            <Link href={"/#apply"}>
+              <p>Apply</p>
+            </Link>
+
+            <Link href={"/#about"}>
+              <p>About</p>
+            </Link>
+
+            <Link href={"/#archive"}>
+              <p>Archive</p>
+            </Link>
+            <a>
+              <p>Gallery</p>
+            </a>
+        </div>
+      </div>
+
+      {/* Bottom Rainbow */}
+      <div className={s.rainbow} />
     </div>
   );
 };

src/sections/About-Projects/index.tsx

@@ -15,7 +15,7 @@ const About: React.FC = () => {
       ];
 
     return (
-        <div className={s.aboutSection}>
+        <div className={s.aboutSection} id="about">
             <div className={s.container} >
                 <Carousel className={s.carousel} showStatus={false} showThumbs={false} autoPlay={true} infiniteLoop={true}>
                   {images_arr.map((image, index) => (

src/sections/Archive/index.tsx

@@ -6,7 +6,7 @@ import ProjectCards from '../../components/project-card';
 const Archive: React.FC = () => {
     const [quarter, setQuarter] = useState<string>('Spring 2023');
     return (
-        <div className={s.container}>
+        <div className={s.container} id="archive">
             <h1 className={s.header}>Past Project Archives</h1>
             <div className={s.dropdown}>
             <select name="project_select" 

src/sections/Timer/index.tsx

@@ -42,7 +42,7 @@ const TimerHero: React.FC = () => {
 
   return (
     <section>
-      <div className={s.hero__timer}>
+      <div className={s.hero__timer} id="home">
         <div className={s.hero__timer__header}>
           <div className={s.hero__timer__header}>
             <p>Countdown To</p>
@@ -76,7 +76,7 @@ const TimerHero: React.FC = () => {
       </div>
 
 
-      <div className={s.description}>
+      <div className={s.description} id="apply">
         <div className={s.description__info}>
           <button>
           Apply Now