Your commit message here

src/components/Hero.jsx

@@ -13,20 +13,6 @@ function Hero() {
         cursor.style.top = `${e.clientY}px`;
       }
     };
-    async function fetchUser() {
-      const res = await fetch("http://localhost:3000/api/current_user", {
-        credentials: "include", // very important
-      });
-      if (res.ok) {
-        const user = await res.json();
-        console.log("User display name:", user.displayName);
-
-        setUser(user);
-      } else {
-        setUser(null);
-      }
-    }
-    fetchUser();
 
     window.addEventListener("mousemove", handleMouseMove);
 
@@ -141,7 +127,7 @@ function Hero() {
       <div className="hero-content">
         <div className="hero-logo-container">
           <img
-            src="/images/battlesnake-neon-logo.jpg"
+            src="/images/battlesnake-neon-logo.GIF"
             alt="BattleSnake Neon Logo"
             className="hero-logo"
           />

src/components/Navbar.jsx

@@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
 const Navbar = () => {
   const [glitchEffect, setGlitchEffect] = useState(false);
   const [activeLink, setActiveLink] = useState("/");
+  const [user, setUser] = useState(null);
 
   useEffect(() => {
     // Set active link based on current path
@@ -16,6 +17,22 @@ const Navbar = () => {
       setGlitchEffect(true);
       setTimeout(() => setGlitchEffect(false), 200);
     }, 3000);
+    async function fetchUser() {
+      const res = await fetch("http://localhost:8080/auth/current_user", {
+        credentials: "include", // very important
+      });
+      if (res.ok) {
+        console.log("User response:", res);
+        const user = await res.json();
+        console.log("User:", user);
+        console.log("User display name:", user.displayName);
+
+        setUser(user);
+      } else {
+        setUser(null);
+      }
+    }
+    fetchUser();
 
     return () => clearInterval(glitchInterval);
   }, []);
@@ -29,6 +46,13 @@ const Navbar = () => {
         </span>
       </div>
 
+      {user && (
+        <div className="navbar__greeting">
+          <span className="navbar__greeting-text">WELCOME</span>
+          <span className="navbar__greeting-name">{user.displayName}</span>
+        </div>
+      )}
+
       <ul className="navbar__links">
         <li>
           <Link
@@ -42,7 +66,8 @@ const Navbar = () => {
             <span className="navbar__link-hover"></span>
           </Link>
         </li>
-        <li>
+        {/* will be decided later of we shall keep NOTEBOOK or not */}
+        {/* <li>
           <Link
             to="/notebook"
             className={`navbar__link ${
@@ -50,10 +75,11 @@ const Navbar = () => {
             }`}
           >
             <span className="navbar__link-icon">📓</span>
-            <span className="navbar__link-text">NOTEBOOK</span>
+            <span className="navbar__link-text"></span>
+            NOTEBOOK
             <span className="navbar__link-hover"></span>
           </Link>
-        </li>
+        </li> */}
         <li>
           <Link
             to="/assignment"
@@ -96,3 +122,4 @@ const Navbar = () => {
 };
 
 export default Navbar;
+//{user ? user.displayName : "NOTEBOOK"}

src/pages/HomePage.jsx

@@ -7,12 +7,6 @@ const PageHome = () => {
   }, []);
   const [user, setUser] = useState(null);
 
-  //   useEffect(() => {
-  //     if (user) {
-  //       console.log(`Welcome, ${user.displayName || "Guest"}!`);
-  //     }
-  //   }, [user]);
-
   return (
     <div className="homepage-container">
       <main>

src/scss/components/_navbar.scss

@@ -18,34 +18,113 @@ $cyber-black: #1a1a1a;
 @keyframes glitch {
   0% {
     text-shadow: 0.05em 0 0 $neon-blue, -0.05em -0.025em 0 $neon-pink;
-    clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%, 0 30%, 100% 30%, 100% 50%, 0 50%, 0 60%, 100% 60%, 100% 75%, 0 75%, 0 100%, 100% 100%);
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% 25%,
+      0 25%,
+      0 30%,
+      100% 30%,
+      100% 50%,
+      0 50%,
+      0 60%,
+      100% 60%,
+      100% 75%,
+      0 75%,
+      0 100%,
+      100% 100%
+    );
   }
   25% {
     text-shadow: -0.05em -0.025em 0 $neon-blue, 0.025em 0.025em 0 $neon-pink;
-    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%, 0 65%, 100% 65%, 100% 85%, 0 85%, 0 100%, 100% 100%);
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% 35%,
+      0 35%,
+      0 65%,
+      100% 65%,
+      100% 85%,
+      0 85%,
+      0 100%,
+      100% 100%
+    );
   }
   50% {
     text-shadow: 0.025em 0.05em 0 $neon-blue, -0.05em -0.05em 0 $neon-pink;
-    clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%, 0 40%, 100% 40%, 100% 55%, 0 55%, 0 70%, 100% 70%, 100% 100%, 0 100%);
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% 15%,
+      0 15%,
+      0 40%,
+      100% 40%,
+      100% 55%,
+      0 55%,
+      0 70%,
+      100% 70%,
+      100% 100%,
+      0 100%
+    );
   }
   75% {
     text-shadow: -0.05em -0.025em 0 $neon-blue, 0.025em 0.025em 0 $neon-pink;
-    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%, 0 50%, 100% 50%, 100% 70%, 0 70%, 0 80%, 100% 80%, 100% 100%, 0 100%);
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% 45%,
+      0 45%,
+      0 50%,
+      100% 50%,
+      100% 70%,
+      0 70%,
+      0 80%,
+      100% 80%,
+      100% 100%,
+      0 100%
+    );
   }
   100% {
     text-shadow: 0.05em 0 0 $neon-blue, -0.05em -0.025em 0 $neon-pink;
-    clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%, 0 30%, 100% 30%, 100% 50%, 0 50%, 0 60%, 100% 60%, 100% 75%, 0 75%, 0 100%, 100% 100%);
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% 25%,
+      0 25%,
+      0 30%,
+      100% 30%,
+      100% 50%,
+      0 50%,
+      0 60%,
+      100% 60%,
+      100% 75%,
+      0 75%,
+      0 100%,
+      100% 100%
+    );
   }
 }
 
 @keyframes neon-flicker {
-  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
+  0%,
+  19.999%,
+  22%,
+  62.999%,
+  64%,
+  64.999%,
+  70%,
+  100% {
     opacity: 0.99;
     filter: drop-shadow(0 0 1px rgba($neon-pink, 0.95))
       drop-shadow(0 0 4px rgba($neon-pink, 0.6))
       drop-shadow(0 0 8px rgba($neon-pink, 0.4));
   }
-  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
+  20%,
+  21.999%,
+  63%,
+  63.999%,
+  65%,
+  69.999% {
     opacity: 0.4;
     filter: none;
   }
@@ -53,10 +132,12 @@ $cyber-black: #1a1a1a;
 
 @keyframes hover-glow {
   0% {
-    box-shadow: 0 0 5px $neon-blue, 0 0 10px $neon-blue, 0 0 15px $neon-blue, 0 0 20px $neon-blue;
+    box-shadow: 0 0 5px $neon-blue, 0 0 10px $neon-blue, 0 0 15px $neon-blue,
+      0 0 20px $neon-blue;
   }
   100% {
-    box-shadow: 0 0 10px $neon-blue, 0 0 20px $neon-blue, 0 0 30px $neon-blue, 0 0 40px $neon-blue;
+    box-shadow: 0 0 10px $neon-blue, 0 0 20px $neon-blue, 0 0 30px $neon-blue,
+      0 0 40px $neon-blue;
   }
 }
 
@@ -83,7 +164,7 @@ $cyber-black: #1a1a1a;
 
   &__logo {
     position: relative;
-    font-size: 1.5rem;
+    font-size: 2rem;
     font-weight: bold;
     display: flex;
     align-items: center;
@@ -113,6 +194,47 @@ $cyber-black: #1a1a1a;
     }
   }
 
+  &__greeting {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 1rem;
+    border: 1px solid $neon-blue;
+    border-radius: 4px;
+    background-color: rgba($dark-bg, 0.7);
+    position: absolute;
+    left: 40%;
+    transform: translateX(-50%);
+    overflow: hidden;
+
+    &-text {
+      color: $neon-blue;
+      font-size: 0.9rem;
+      font-weight: bold;
+      letter-spacing: 2px;
+      text-shadow: 0 0 5px rgba($neon-blue, 0.7);
+    }
+
+    &-name {
+      color: white;
+      font-size: 1.2rem;
+      font-weight: bold;
+      letter-spacing: 2px;
+      animation: neon-flicker 5s infinite alternate;
+      text-shadow: 0 0 5px $neon-pink, 0 0 10px $neon-pink;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      height: 2px;
+      width: 100%;
+      background: linear-gradient(90deg, transparent, $neon-blue, transparent);
+      animation: scanline 2s linear infinite;
+    }
+  }
+
   &__links {
     list-style: none;
     display: flex;