navbar working

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>

src/components/global/NavBar.tsx

@@ -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>
-    );
-}

src/components/ui/HoverNavigation.tsx

@@ -40,9 +40,40 @@ export const HoverNavigation = ({
     });
 
     return (
+        <>
+            <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="/contact"
+                    className={`overflow-hidden whitespace-nowrap transition-colors duration-150 hover:text-green-500 ${!visible ? "" : "inline-block"}`}
+                >
+                    Available for work
+                </a>
+                <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",
@@ -69,7 +100,10 @@ export const HoverNavigation = ({
                                     }}
                                     exit={{
                                         opacity: 0,
-                                    transition: { duration: 0.15, delay: 0.2 },
+                                        transition: {
+                                            duration: 0.15,
+                                            delay: 0.2,
+                                        },
                                     }}
                                 />
                             )}
@@ -78,6 +112,7 @@ export const HoverNavigation = ({
                     </a>
                 ))}
             </motion.div>
+        </>
     );
 };
 

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";

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";

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>

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";

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";

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 {