From b7ef1bdc4b528e1c4d1a463532aec74b1cb5ad3c Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Fri, 8 Aug 2025 12:15:03 +1000
Subject: [PATCH] navbar working

---
 src/components/global/NavBar.astro    |  38 ++++++++++
 src/components/global/NavBar.tsx      |  37 ---------
 src/components/ui/HoverNavigation.tsx | 105 +++++++++++++++++---------
 src/components/ui/displayOnScroll.tsx |   0
 src/pages/contact.astro               |   2 +-
 src/pages/experience.astro            |   2 +-
 src/pages/index.astro                 |   4 +-
 src/pages/projects.astro              |   2 +-
 src/pages/skills.astro                |   2 +-
 src/styles/global.css                 |  14 +++-
 10 files changed, 127 insertions(+), 79 deletions(-)
 create mode 100644 src/components/global/NavBar.astro
 delete mode 100644 src/components/global/NavBar.tsx
 delete mode 100644 src/components/ui/displayOnScroll.tsx

diff --git a/src/components/global/NavBar.astro b/src/components/global/NavBar.astro
new file mode 100644
index 0000000..337d0f2
--- /dev/null
+++ b/src/components/global/NavBar.astro
@@ -0,0 +1,38 @@
+---
+import { HoverNavigation } from "@/components/ui/HoverNavigation";
+
+const navLinks = [
+	{
+		label: "Home",
+		link: "/",
+	},
+	{
+		label: "Experience",
+		link: "/experience",
+	},
+	{
+		label: "Projects",
+		link: "/projects",
+	},
+	{
+		label: "Skills",
+		link: "/skills",
+	},
+	{
+		label: "Contact",
+		link: "/contact",
+	},
+];
+---
+
+<div
+	class="bg-secondary fixed top-5 left-1/2 z-30 box-border flex -translate-x-1/2 items-center justify-center gap-5 overflow-auto rounded-full border-2 border-solid border-gray-700 px-5 py-3"
+>
+	<img
+		src="/images/pfp_new.webp"
+		alt="Ryan"
+		width={50}
+		class="rounded-full"
+	/>
+	<HoverNavigation items={navLinks} client:load />
+</div>
diff --git a/src/components/global/NavBar.tsx b/src/components/global/NavBar.tsx
deleted file mode 100644
index 73e14e4..0000000
--- a/src/components/global/NavBar.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { HoverNavigation } from "@/components/ui/HoverNavigation";
-
-export default function Navigationbar() {
-    const navLinks = [
-        {
-            label: "Home",
-            link: "/",
-        },
-        {
-            label: "Experience",
-            link: "/experience",
-        },
-        {
-            label: "Projects",
-            link: "/projects",
-        },
-        {
-            label: "Skills",
-            link: "/skills",
-        },
-        {
-            label: "Contact",
-            link: "/contact",
-        },
-    ];
-    return (
-        <div className="bg-secondary fixed top-5 left-1/2 z-30 box-border flex -translate-x-1/2 items-center justify-center gap-5 overflow-auto rounded-full border-2 border-solid border-gray-700 px-5 py-3">
-            <img
-                src="/images/pfp_new.webp"
-                alt="Ryan"
-                width={50}
-                className="rounded-full"
-            />
-            <HoverNavigation items={navLinks} />
-        </div>
-    );
-}
diff --git a/src/components/ui/HoverNavigation.tsx b/src/components/ui/HoverNavigation.tsx
index 51ebf31..661511e 100644
--- a/src/components/ui/HoverNavigation.tsx
+++ b/src/components/ui/HoverNavigation.tsx
@@ -40,44 +40,79 @@ export const HoverNavigation = ({
     });
 
     return (
-        <motion.div
-            animate={{
-                width: visible ? "auto" : "0px",
-            }}
-            className={cn(
-                "flex flex-row items-center justify-center overflow-hidden",
-                className,
-            )}
-        >
-            {items.map((item, idx) => (
+        <>
+            <motion.div
+                animate={{
+                    width: visible ? "0px" : "auto",
+                    opacity: visible ? "0%" : "100%",
+                }}
+                transition={{
+                    ease: "easeInOut",
+                }}
+                className={cn(
+                    "flex w-0 flex-row items-center justify-center whitespace-nowrap",
+                    className,
+                )}
+            >
                 <a
-                    href={item?.link}
-                    key={item?.link}
-                    className="group relative block h-full px-5 py-2"
-                    onMouseEnter={() => setHoveredIndex(idx)}
-                    onMouseLeave={() => setHoveredIndex(null)}
+                    href="/contact"
+                    className={`overflow-hidden whitespace-nowrap transition-colors duration-150 hover:text-green-500 ${!visible ? "" : "inline-block"}`}
                 >
-                    <AnimatePresence>
-                        {hoveredIndex === idx && (
-                            <motion.span
-                                className="absolute inset-0 block h-full w-full rounded-3xl bg-neutral-200"
-                                layoutId="hoverBackground"
-                                initial={{ opacity: 0 }}
-                                animate={{
-                                    opacity: 1,
-                                    transition: { duration: 0.15 },
-                                }}
-                                exit={{
-                                    opacity: 0,
-                                    transition: { duration: 0.15, delay: 0.2 },
-                                }}
-                            />
-                        )}
-                    </AnimatePresence>
-                    <NavBarLink>{item.label}</NavBarLink>
+                    Available for work
                 </a>
-            ))}
-        </motion.div>
+                <div
+                    className={`relative z-50 ml-3 w-5 ${visible ? "hidden" : "inline-block"}`}
+                >
+                    <div className="absolute top-1/2 left-1/2 aspect-square w-[6px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-green-500"></div>
+                    <div className="animate-glow absolute top-1/2 left-1/2 aspect-square w-[6px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-green-500"></div>
+                </div>
+            </motion.div>
+            <motion.div
+                animate={{
+                    width: visible ? "auto" : "0px",
+                    opacity: visible ? "100%" : "0%",
+                }}
+                transition={{
+                    ease: "easeInOut",
+                }}
+                className={cn(
+                    "flex flex-row items-center justify-center overflow-hidden",
+                    className,
+                )}
+            >
+                {items.map((item, idx) => (
+                    <a
+                        href={item?.link}
+                        key={item?.link}
+                        className="group relative block h-full px-5 py-2"
+                        onMouseEnter={() => setHoveredIndex(idx)}
+                        onMouseLeave={() => setHoveredIndex(null)}
+                    >
+                        <AnimatePresence>
+                            {hoveredIndex === idx && (
+                                <motion.span
+                                    className="absolute inset-0 block h-full w-full rounded-3xl bg-neutral-200"
+                                    layoutId="hoverBackground"
+                                    initial={{ opacity: 0 }}
+                                    animate={{
+                                        opacity: 1,
+                                        transition: { duration: 0.15 },
+                                    }}
+                                    exit={{
+                                        opacity: 0,
+                                        transition: {
+                                            duration: 0.15,
+                                            delay: 0.2,
+                                        },
+                                    }}
+                                />
+                            )}
+                        </AnimatePresence>
+                        <NavBarLink>{item.label}</NavBarLink>
+                    </a>
+                ))}
+            </motion.div>
+        </>
     );
 };
 
diff --git a/src/components/ui/displayOnScroll.tsx b/src/components/ui/displayOnScroll.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 983b532..1bb9cac 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -1,5 +1,5 @@
 ---
-import NavBar from "../components/global/NavBar.tsx";
+import NavBar from "../components/global/NavBar.astro";
 import Layout from "../layouts/Layout.astro";
 import ContactComponent from "../components/contact/ContactComponent.svelte";
 import Card from "../components/global/Card.astro";
diff --git a/src/pages/experience.astro b/src/pages/experience.astro
index e691e4f..b9d881c 100644
--- a/src/pages/experience.astro
+++ b/src/pages/experience.astro
@@ -1,5 +1,5 @@
 ---
-import NavBar from "../components/global/NavBar.tsx";
+import NavBar from "../components/global/NavBar.astro";
 import Layout from "../layouts/Layout.astro";
 import ExperienceComponent from "../components/experience/ExperienceComponent.astro";
 import MoreExperience from "../components/experience/MoreExperience.astro";
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e44ce34..ac94a6e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-import NavBar from "../components/global/NavBar.tsx";
+import NavBar from "../components/global/NavBar.astro";
 import Layout from "../layouts/Layout.astro";
 import NetworkLine from "../components/global/NetworkLine.astro";
 import Intro from "../components/home/Intro.astro";
@@ -14,7 +14,7 @@ import Footer from "../components/global/FooterComponent.astro";
 	title="Ryan's Portfolio"
 	description="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
 >
-	<NavBar client:load />
+	<NavBar />
 	<div id="home" class="flex items-center justify-center pt-32">
 		<Intro />
 	</div>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 58b80fc..0974b09 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -1,5 +1,5 @@
 ---
-import NavBar from "../components/global/NavBar.tsx";
+import NavBar from "../components/global/NavBar.astro";
 import Layout from "../layouts/Layout.astro";
 import ProjectsComponent from "../components/projects/ProjectsComponent.astro";
 import MoreProjects from "../components/projects/MoreProjects.svelte";
diff --git a/src/pages/skills.astro b/src/pages/skills.astro
index 52c97ee..82cafcc 100644
--- a/src/pages/skills.astro
+++ b/src/pages/skills.astro
@@ -1,5 +1,5 @@
 ---
-import NavBar from "../components/global/NavBar.tsx";
+import NavBar from "../components/global/NavBar.astro";
 import Layout from "../layouts/Layout.astro";
 import SkillsComponent from "../components/skills/SkillsComponent.astro";
 import MoreSkills from "../components/skills/MoreSkills.astro";
diff --git a/src/styles/global.css b/src/styles/global.css
index 1e4a915..e7ca228 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -25,6 +25,7 @@
 
     --animate-fadeIn: fadeIn 0.5s ease-in-out;
     --animate-fadeUp: fadeUp 0.5s ease-in-out;
+    --animate-glow: glow 2s ease infinite;
 
     @keyframes fadeIn {
         0% {
@@ -42,11 +43,22 @@
             translate: 0px 10px;
         }
 
-        100% {
+        50% {
             opacity: 100%;
             translate: 0px 0px;
         }
     }
+
+    @keyframes glow {
+        0% {
+            scale: 1;
+            opacity: 100%;
+        }
+        100% {
+            scale: 4;
+            opacity: 5%;
+        }
+    }
 }
 
 .view-fadeUp {