Added Active page nav bar highlighting

Fixed the Main page scss, the about section was gross
b-smiley · Aug 24, 2024 · 2dcd60b · 2dcd60b
1 parent f4d9db9
commit 2dcd60b
Show file tree

Hide file tree

Showing 5 changed files with 189 additions and 126 deletions.
diff --git a/web-ui/src/App.scss b/web-ui/src/App.scss
@@ -7,11 +7,11 @@ $main-background: #0d1017;
 $main-text-color: #fff;
 
 // Buttons and Links
-$button-background: #71a18f;
+$button-background: #86c1c9;
 $button-color: #f1fffa;
-$button-hover-background: #2a6464;
-$button-active-background:$button-background;
-$button-hover-background-2: #d6d2d2;
+$button-hover-background: #a296f7;
+$button-active-background: $button-background;
+$button-hover-background-2: #a296f7;
 
 // Navbar
 $navbar-background: #1b202c;
@@ -24,7 +24,6 @@ $dark-card-background: #232325;
 
 // TODO box-shadow: 0 4px 8px 0 rgb(236 236 236 / 20%), 0 6px 20px 0 rgb(190 190 190 / 19%);
 
-
 .App {
   display: flex;
   flex-direction: column;

diff --git a/web-ui/src/components/NavigationBar/NavigationBar.scss b/web-ui/src/components/NavigationBar/NavigationBar.scss
@@ -2,46 +2,50 @@
 @import "../../App.scss";
 
 .NavigationBar {
-    // Will always be on top of the page
-    position: fixed;
-    top: 0;
-    left: 0;
-    padding: 2px 0px;
-    width: 100%;
-    height: 60px;
-    background-color: $navbar-background;
-    z-index: 100;
-    display:flex;
-    justify-content: center;
-    align-items: center;
-
-    .nav-link{
-        background-color: $button-background;
-        padding: 10px;
-        border-radius: 5px;
-        margin: 0 10px;
-        text-decoration: none;
-        color: $button-color;
-    }
-    // For mobile only use active
-    @media only screen and (max-width: 600px) {
-        .nav-link:active{
-            background-color: $button-hover-background;
-        }
-
+  // Will always be on top of the page
+  position: fixed;
+  top: 0;
+  left: 0;
+  padding: 2px 0px;
+  width: 100%;
+  height: 60px;
+  background-color: $navbar-background;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .nav-link {
+    background-color: $button-background;
+    padding: 10px;
+    border-radius: 5px;
+    margin: 0 10px;
+    text-decoration: none;
+    color: $button-color;
+  }
+
+  .active-link {
+    background-color: rgb(150, 140, 255);
+  }
+
+  // For mobile only use active
+  @media only screen and (max-width: 600px) {
+    .nav-link:active {
+      background-color: $button-hover-background;
     }
-    // For desktop only use hover
-    @media only screen and (min-width: 600px) {
-        .nav-link:hover{
-            background-color: $button-hover-background;
-        }
+  }
+  // For desktop only use hover
+  @media only screen and (min-width: 600px) {
+    .nav-link:hover {
+      background-color: $button-hover-background;
     }
-
+  }
 }
 
-.Content{
-    margin-top: 60px;
-    margin-bottom: 60px;
-    padding: 20px;
-
-}
+.Content {
+  margin-top: 60px;
+  margin-bottom: 60px;
+  padding: 20px;
+  height: 82.4vh; // TODO fix this
+  overflow-y: auto;
+}
diff --git a/web-ui/src/components/NavigationBar/NavigationBar.tsx b/web-ui/src/components/NavigationBar/NavigationBar.tsx
@@ -16,6 +16,17 @@ interface NavigationBarProps {
 }
 
 const NavigationBar: React.FC<NavigationBarProps> = ({ navItems }) => {
+  /**
+   * Handles the user selecting a link
+   * Highlights the selected link with the active class
+   * @param e Link event
+   */
+  const handleSelected = (e: any) => {
+    const links = document.querySelectorAll(".nav-link");
+    links.forEach((link) => link.classList.remove("active-link"));
+    e.target.classList.add("active-link");
+  };
+
   return (
     <div>
       <BrowserRouter>
@@ -35,11 +46,27 @@ const NavigationBar: React.FC<NavigationBarProps> = ({ navItems }) => {
           This website uses cookies to enhance the user experience.
         </CookieConsent>
         <nav className="NavigationBar">
-          {navItems.map((item, index) => (
-            <Link className={"nav-link"} key={index} to={item.path}>
-              {item.label}
-            </Link>
-          ))}
+          {navItems.map((item, index) =>
+            item.label === "Home" ? (
+              <Link
+                className={"nav-link active-link"}
+                key={index}
+                to={item.path}
+                onClick={(item) => handleSelected(item)}
+              >
+                {item.label}
+              </Link>
+            ) : (
+              <Link
+                className={"nav-link"}
+                key={index}
+                to={item.path}
+                onClick={(item) => handleSelected(item)}
+              >
+                {item.label}
+              </Link>
+            )
+          )}
         </nav>
         <div className="Content">
           <Routes>

diff --git a/web-ui/src/pages/Home/Home.scss b/web-ui/src/pages/Home/Home.scss
@@ -1,79 +1,105 @@
 @import "../../App.scss";
 .Home {
-    .intro{
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
 
-            .name{
-                font-size: 50px;
-                font-weight: bold;
-                color: $main-text-color;
-                text-align: center;
-                // Gradient the text
-                background: linear-gradient(90deg, #6bed9d, #a394f8);
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
+  .intro {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 
-                // Animate the Gradient to move
-                background-size: 200% auto;
-                animation: moveGradient 10s linear infinite;
+    .name {
+      font-size: 50px;
+      font-weight: bold;
+      color: $main-text-color;
+      text-align: center;
+      // Gradient the text
+      background: linear-gradient(90deg, #6bedbf, #a394f8);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
 
-                @keyframes moveGradient {
-                  0%, 100% {
-                    background-position: 0% 50%;
-                }
-                10% {
-                    background-position: 0% 50%;
-                }
-                45% {
-                    background-position: 100% 50%;
-                }
-                70% {
-                    background-position: 100% 50%;
-                }
-                90% {
-                    background-position: 0% 50%;
-                }
-                }
-            }
-
-            .title {
-                font-family: monospace;
-                color:#0000;
-                background:
-                  linear-gradient(-90deg,$accent-1 4px,#0000 0) 10px 0,
-                  linear-gradient($accent-1 0 0) 0 0;
-                background-size:calc(var(--n)*1ch) 200%;
-                -webkit-background-clip:padding-box,text;
-                background-clip:padding-box,text;
-                background-repeat:no-repeat;
-                animation: 
-                  b 1.6s infinite steps(1),   
-                  t calc(var(--n)*.1s) steps(var(--n)) forwards;
-              }
-              @keyframes t{
-                from {background-size:0 200%}
-              }
-              @keyframes b{
-                50% {background-position:0 -100%,0 0}
-            }
+      // Animate the Gradient to move
+      background-size: 200% auto;
+      animation: moveGradient 10s linear infinite;
 
-            .typing-space{
-                font-family: monospace;
-                font-weight: 700;
-                font-size: 1.7rem;
-                padding:20px;
-            }
-
+      @keyframes moveGradient {
+        0%,
+        100% {
+          background-position: 0% 50%;
+        }
+        10% {
+          background-position: 0% 50%;
+        }
+        45% {
+          background-position: 100% 50%;
+        }
+        70% {
+          background-position: 100% 50%;
+        }
+        90% {
+          background-position: 0% 50%;
+        }
+      }
     }
-
-    .about{
-        margin-top: 20px;
-        margin-bottom: 20px;
-        font-size: 20px;
-        color: $main-text-color;
-        text-align: center;
+
+    .title {
+      margin: auto 0;
+      font-family: monospace;
+      color: #0000;
+      background: linear-gradient(-90deg, $accent-1 4px, #0000 0) 10px 0,
+        linear-gradient($accent-1 0 0) 0 0;
+      background-size: calc(var(--n) * 1ch) 200%;
+      -webkit-background-clip: padding-box, text;
+      background-clip: padding-box, text;
+      background-repeat: no-repeat;
+      animation: b 1.6s infinite steps(1),
+        t calc(var(--n) * 0.065s) steps(var(--n)) forwards;
+    }
+    @keyframes t {
+      from {
+        background-size: 0 200%;
+      }
+    }
+    @keyframes b {
+      50% {
+        background-position: 0 -100%, 0 0;
+      }
+    }
+
+    .typing-space {
+      font-family: monospace;
+      font-weight: 700;
+      font-size: 1.7rem;
+      padding: 20px;
+    }
+  }
+
+  .about {
+    margin: auto 0;
+    font-size: 20px;
+    color: $main-text-color;
+  }
+  .about h1 {
+    text-align: center;
+  }
+
+  .about p {
+    margin: 1rem auto;
+  }
+
+  // For mobile only use active
+  @media only screen and (max-width: 700px) {
+    .about p {
+      width: 90%;
+    }
+  }
+  // For desktop only use hover
+  @media only screen and (min-width: 700px) {
+    .about p {
+      width: 75%;
     }
+  }
 }
diff --git a/web-ui/src/pages/Home/Home.tsx b/web-ui/src/pages/Home/Home.tsx
@@ -9,7 +9,7 @@ const Home: React.FC<HomeProps> = (props) => {
   // Get the inital device size
   useEffect(() => {
     if (deviceType() === "mobile") {
-      setNameSize("45px");
+      setNameSize("40px");
     } else {
       setNameSize("50px");
     }
@@ -19,7 +19,7 @@ const Home: React.FC<HomeProps> = (props) => {
   useEffect(() => {
     const handleResize = () => {
       if (deviceType() === "mobile") {
-        setNameSize("45px");
+        setNameSize("40px");
       } else {
         setNameSize("50px");
       }
@@ -37,18 +37,25 @@ const Home: React.FC<HomeProps> = (props) => {
         {/* Set the style to "--n:53" */}
         <div className="typing-space">
           <span className="title" style={{ "--n": 100 } as React.CSSProperties}>
-            Mechanical Engineering Technologist, Software Engineering Student.
+            Software Engineering Student, and Mechanical Engineering
+            Technologist.
           </span>
         </div>
       </div>
 
       <div className="about">
         <h1>About Me</h1>
         <p>
-          Currently in Canada completing a Bachelors Degree in Software
-          Engineering. Experienced in both software and mechanical engineering.
-          Started engineering related design work {experience} years ago.
-          Passionate about automating tasks that will save people time.
+          I am currently in Canada completing a bachelor's degree in Software
+          Engineering. I have industry experience and education in both software
+          and mechanical engineering. I started started engineering-related
+          design work {experience} years ago. My passion for helping solve world
+          problems has driven me to always learn and grow. I am always looking
+          for new opportunities, feel free to get in contact with me.
+        </p>
+
+        <p style={{ textAlign: "center" }}>
+          Thank you for visiting my website. Enjoy!
         </p>
       </div>
     </div>