From f26665c16fe9ebe13cd70184aa5061d118bae30f Mon Sep 17 00:00:00 2001
From: carsonSgit <92652800+carsonSgit@users.noreply.github.com>
Date: Sat, 24 Aug 2024 02:05:27 -0400
Subject: [PATCH 1/4] feat: Navbar left links to hero

---
 src/Components/Navbar/Navbar.scss | 4 ++++
 src/Components/Navbar/Navbar.tsx  | 9 ++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/Components/Navbar/Navbar.scss b/src/Components/Navbar/Navbar.scss
index c39d914..1aa521b 100644
--- a/src/Components/Navbar/Navbar.scss
+++ b/src/Components/Navbar/Navbar.scss
@@ -27,6 +27,10 @@ $hamburger-size: 32px;
   @media (max-width: 768px) {
     margin-left: 20px;
   }
+
+  a {
+    color: $navbar-text-color;
+  }
 }
 
 /* Navbar Right */
diff --git a/src/Components/Navbar/Navbar.tsx b/src/Components/Navbar/Navbar.tsx
index 0c35f40..d14e7fd 100644
--- a/src/Components/Navbar/Navbar.tsx
+++ b/src/Components/Navbar/Navbar.tsx
@@ -24,7 +24,14 @@ const Navbar: React.FC = () => {
 
   return (
     <nav className="navbar">
-      <div className="navbar-left">carsonSgit</div>
+      <div className="navbar-left">
+          <a
+            href={`#hero`}
+            onClick={event => handleLinkClick(event, 'hero')}
+          >
+            carsonSgit
+          </a>
+          </div>
       <div className="hamburger" onClick={toggleMenu}>
         {menuOpen ? <FaTimes /> : <FaBars />}
       </div>

From 58ea3c4b3961975d1ea9b49b863ba3c7479d5b77 Mon Sep 17 00:00:00 2001
From: carsonSgit <92652800+carsonSgit@users.noreply.github.com>
Date: Sat, 24 Aug 2024 02:14:34 -0400
Subject: [PATCH 2/4] fix: Scroll-to navbar clicks go to just before the
 elements

---
 src/Components/Navbar/Navbar.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/Components/Navbar/Navbar.tsx b/src/Components/Navbar/Navbar.tsx
index d14e7fd..f41abd6 100644
--- a/src/Components/Navbar/Navbar.tsx
+++ b/src/Components/Navbar/Navbar.tsx
@@ -17,7 +17,12 @@ const Navbar: React.FC = () => {
     event.preventDefault();
     const element = document.getElementById(id);
     if (element) {
-      element.scrollIntoView({ behavior: 'smooth' });
+      const elementPosition = element.getBoundingClientRect().top + window.scrollY;
+      const offsetPosition = elementPosition - 60; 
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: 'smooth'
+      });
     }
     setMenuOpen(false);
   };

From 4a21b0b611f82be1ebb9c79478d45a9a6305aca8 Mon Sep 17 00:00:00 2001
From: carsonSgit <92652800+carsonSgit@users.noreply.github.com>
Date: Sat, 24 Aug 2024 02:18:00 -0400
Subject: [PATCH 3/4] fix: Navbar is locked and mobile does not break

---
 src/Components/Navbar/Navbar.scss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/Components/Navbar/Navbar.scss b/src/Components/Navbar/Navbar.scss
index 1aa521b..096949f 100644
--- a/src/Components/Navbar/Navbar.scss
+++ b/src/Components/Navbar/Navbar.scss
@@ -11,7 +11,13 @@ $hamburger-size: 32px;
   align-items: center;
   padding: 20px;
   color: $text-color;
-  margin-top: 0em;
+  margin-top: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: #27302B;
 
   @media (max-width: 768px) {
     padding-top: 20px;
@@ -45,7 +51,7 @@ $hamburger-size: 32px;
     align-items: flex-end;
     width: 100%;
     position: absolute;
-    top: 60px;
+    top: 55px;
     right: 0;
     background-color: $background-color;
     padding: 1vh;

From eaf3d5acf93808565b61df22dc304884405bd61b Mon Sep 17 00:00:00 2001
From: carsonSgit <92652800+carsonSgit@users.noreply.github.com>
Date: Sat, 24 Aug 2024 02:22:40 -0400
Subject: [PATCH 4/4] feat: Nice onhover for navbar elements

---
 src/Components/Navbar/Navbar.scss | 54 +++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/src/Components/Navbar/Navbar.scss b/src/Components/Navbar/Navbar.scss
index 096949f..68575cc 100644
--- a/src/Components/Navbar/Navbar.scss
+++ b/src/Components/Navbar/Navbar.scss
@@ -1,5 +1,9 @@
 /* Variables for styling */
 $background-color: #262f2aec;
+$primary-color: #2af598;
+$secondary-color: #00715f;
+$tertiary-color: #33b072;
+$quaternary-color: #95b9b0;
 $text-color: #c6c9bf;
 $navbar-text-color: #c6c9bf;
 $hamburger-size: 32px;
@@ -36,6 +40,22 @@ $hamburger-size: 32px;
 
   a {
     color: $navbar-text-color;
+    transition: background 0.5s ease, color 0.5s ease;
+
+    &:hover {
+      background: linear-gradient(
+        90deg,
+        $primary-color,
+        $secondary-color,
+        $tertiary-color,
+        $quaternary-color
+      );
+      background-size: 200% 200%;
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation: gradientAnimation 5s ease infinite;
+    }
   }
 }
 
@@ -76,6 +96,8 @@ $hamburger-size: 32px;
   text-decoration: none;
   font-size: 1.5rem;
   font-weight: 700;
+  position: relative;
+  transition: background 0.5s ease, color 0.5s ease;
 
   @media (max-width: 768px) {
     margin: 0;
@@ -84,9 +106,7 @@ $hamburger-size: 32px;
     text-align: right;
     font-weight: 700;
     background-color: $background-color;
-    transition:
-      transform 0.3s ease,
-      opacity 0.3s ease;
+    transition: transform 0.3s ease, opacity 0.3s ease;
     transform: translateY(0px);
 
     &.show {
@@ -98,6 +118,21 @@ $hamburger-size: 32px;
       text-decoration: underline;
     }
   }
+
+  &:hover {
+    background: linear-gradient(
+      90deg,
+      $primary-color,
+      $secondary-color,
+      $tertiary-color,
+      $quaternary-color
+    );
+    background-size: 200% 200%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: gradientAnimation 5s ease infinite;
+  }
 }
 
 /* Hamburger Menu */
@@ -121,3 +156,16 @@ $hamburger-size: 32px;
     }
   }
 }
+
+/* Gradient Animation */
+@keyframes gradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
\ No newline at end of file