added better mobile experience

bun.lock

@@ -13,6 +13,7 @@
         "astro": "^5.10.0",
         "caniuse-lite": "^1.0.30001698",
         "clsx": "^2.1.1",
+        "hamburger-react": "^2.5.2",
         "moment": "^2.30.1",
         "moment-timezone": "^0.6.0",
         "motion": "^12.23.12",
@@ -522,6 +523,8 @@
 
     "h3": ["h3@1.15.4", "", { "dependencies": { "cookie-es": "^1.2.2", "crossws": "^0.3.5", "defu": "^6.1.4", "destr": "^2.0.5", "iron-webcrypto": "^1.2.1", "node-mock-http": "^1.0.2", "radix3": "^1.1.2", "ufo": "^1.6.1", "uncrypto": "^0.1.3" } }, "sha512-z5cFQWDffyOe4vQ9xIqNfCZdV4p//vy6fBnr8Q1AWnVZ0teurKMG66rLj++TKwKPUP3u7iMUvrvKaEUiQw2QWQ=="],
 
+    "hamburger-react": ["hamburger-react@2.5.2", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19" } }, "sha512-xsv/I7wQX1RDaulDnvMVCXMMRXnkwnUnkE8seD5eNVZJ4nIrjtK5LLA20l5x/pJ+mPWOzlFxW32VJ86Gbo2Njw=="],
+
     "hast-util-from-html": ["hast-util-from-html@2.0.3", "", { "dependencies": { "@types/hast": "^3.0.0", "devlop": "^1.1.0", "hast-util-from-parse5": "^8.0.0", "parse5": "^7.0.0", "vfile": "^6.0.0", "vfile-message": "^4.0.0" } }, "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw=="],
 
     "hast-util-from-parse5": ["hast-util-from-parse5@8.0.3", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "devlop": "^1.0.0", "hastscript": "^9.0.0", "property-information": "^7.0.0", "vfile": "^6.0.0", "vfile-location": "^5.0.0", "web-namespaces": "^2.0.0" } }, "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg=="],

package.json

@@ -19,6 +19,7 @@
         "astro": "^5.10.0",
         "caniuse-lite": "^1.0.30001698",
         "clsx": "^2.1.1",
+        "hamburger-react": "^2.5.2",
         "moment": "^2.30.1",
         "moment-timezone": "^0.6.0",
         "motion": "^12.23.12",

src/components/contact/ContactComponent.astro

@@ -5,22 +5,24 @@ import { AnimatedTooltip } from "@/components/ui/AnimatedToolTip";
 ---
 
 <div
-	class="relative flex h-[400px] w-full flex-col-reverse items-start justify-center gap-10 lg:flex-row"
+	class="relative flex w-full flex-col-reverse items-center justify-start gap-10 lg:h-[400px] lg:flex-row lg:items-start lg:justify-center"
 >
-	<div class="relative flex w-1/2 items-end justify-end">
+	<div
+		class="relative flex aspect-[3/4] w-[300px] items-end justify-end lg:w-1/2"
+	>
 		<Image
 			src={contactPhoto}
 			alt="Ryan"
 			width={300}
-			class="absolute top-0 right-0 aspect-[3/4] -translate-x-7 translate-y-3 rounded-3xl object-cover"
+			class="absolute top-1/2 left-1/2 aspect-[3/4] -translate-1/2 rounded-3xl object-cover lg:top-0 lg:right-0 lg:-translate-x-10 lg:translate-y-5"
 		/>
 		<div
-			class="absolute top-0 right-0 -z-10 aspect-[3/4] w-[300px] -translate-x-10 translate-y-5 rounded-3xl bg-[#c98703]"
+			class="absolute top-1/2 left-1/2 -z-10 aspect-[3/4] w-[300px] -translate-1/2 rounded-3xl bg-[#c98703] blur-lg lg:top-0 lg:right-0 lg:-translate-x-10 lg:translate-y-5"
 		>
 		</div>
 	</div>
 	<div
-		class="flex h-full w-1/2 flex-col items-start justify-center text-left"
+		class="flex w-full flex-col items-center justify-start text-left lg:h-full lg:w-1/2 lg:items-start lg:justify-center"
 	>
 		<h1
 			class="[font-family:'Antonio',sans-serif] text-5xl leading-14 font-bold uppercase"

src/components/global/NavBar.astro

@@ -1,5 +1,5 @@
 ---
-import { HoverNavigation } from "@/components/ui/HoverNavigation";
+import { HoverNavigation } from "@/components/ui/NavigationBar";
 import { Image } from "astro:assets";
 import pfp from "@/components/images/contact_photo_small.webp";
 
@@ -27,9 +27,8 @@ const navLinks = [
 ];
 ---
 
-<div
+<HoverNavigation
-	class="bg-secondary/90 fixed top-5 left-1/2 z-30 box-border flex -translate-x-1/2 items-center justify-center overflow-auto rounded-full border-2 border-solid border-gray-700 px-5 py-3"
+	items={navLinks}
->
+	client:load
-	<Image src={pfp} alt="Ryan" width={50} class="mr-3 rounded-full" />
+	transition:name="hover-navigation"
-	<HoverNavigation items={navLinks} client:load />
+/>
-</div>

src/components/home/Greeting.svelte

@@ -1,68 +1,68 @@
 <script lang="ts">
-    import { onMount } from "svelte";
+	import { onMount } from "svelte";
-    import Socials from "../socials/Socials.svelte";
+	import Socials from "../socials/Socials.svelte";
 
-    // Roles
+	// Roles
-    const typingInterval: number = 50;
+	const typingInterval: number = 50;
 
-    function addCharacter(str1: string, str2: string) {
+	function addCharacter(str1: string, str2: string) {
-        // str1: incomplete string, add a character after this
+		// str1: incomplete string, add a character after this
-        // str2: complete string, add a character from this
+		// str2: complete string, add a character from this
 
-        let str1Length = str1.length;
+		let str1Length = str1.length;
-        let str2Length = str2.length;
+		let str2Length = str2.length;
 
-        if (str1Length < str2Length) {
+		if (str1Length < str2Length) {
-            return str1 + str2[str1Length];
+			return str1 + str2[str1Length];
-        } else {
+		} else {
-            return str1;
+			return str1;
-        }
+		}
-    }
+	}
 
-    function sleep(ms: number) {
+	function sleep(ms: number) {
-        return new Promise((resolve) => setTimeout(resolve, ms));
+		return new Promise((resolve) => setTimeout(resolve, ms));
-    }
+	}
 
-    // Greeting
+	// Greeting
-    let date = new Date();
+	let date = new Date();
-    let hour = date.getHours();
+	let hour = date.getHours();
 
-    let greeting: string = "";
+	let greeting: string = "";
 
-    if (hour >= 0 && hour < 12) {
+	if (hour >= 0 && hour < 12) {
-        greeting = "morning";
+		greeting = "morning";
-    } else if (hour >= 12 && hour < 18) {
+	} else if (hour >= 12 && hour < 18) {
-        greeting = "afternoon";
+		greeting = "afternoon";
-    } else if (hour >= 18) {
+	} else if (hour >= 18) {
-        greeting = "evening";
+		greeting = "evening";
-    }
+	}
 
-    let greetingState: string = $state("");
+	let greetingState: string = $state("");
-    let greetingPulse: HTMLElement;
+	let greetingPulse: HTMLElement;
 
-    async function animateGreeting(greeting: string) {
+	async function animateGreeting(greeting: string) {
-        for (let i = 0; i < greeting.length; i++) {
+		for (let i = 0; i < greeting.length; i++) {
-            greetingState = addCharacter(greetingState, greeting);
+			greetingState = addCharacter(greetingState, greeting);
 
-            if (i === greeting.length - 1) {
+			if (i === greeting.length - 1 && greetingPulse) {
-                greetingPulse.classList.remove("animate-pulse");
+				greetingPulse.classList.remove("animate-pulse");
-                greetingPulse.classList.add("hidden");
+				greetingPulse.classList.add("hidden");
-            }
+			}
 
-            await sleep(typingInterval);
+			await sleep(typingInterval);
-        }
+		}
-    }
+	}
 
-    // after window finish loading, call animateRoles()
+	// after window finish loading, call animateRoles()
-    onMount(async () => {
+	onMount(async () => {
-        await sleep(500);
+		await sleep(500);
-        animateGreeting(greeting);
+		animateGreeting(greeting);
-    });
+	});
 </script>
 
 <span>
-    Good {greetingState}<span
+	Good {greetingState}<span
-        bind:this={greetingPulse}
+		bind:this={greetingPulse}
-        class="animate-pulse font-extralight">|</span
+		class="animate-pulse font-extralight">|</span
-    ></span
+	></span
 >

src/components/home/Intro.astro

@@ -11,7 +11,7 @@ import Greeting from "./Greeting.svelte";
 				<div class="flex h-20 flex-row">
 					<div class="mr-1 flex w-20 items-center justify-center">
 						<img
-							src="/images/pfp_new.webp"
+							src="/images/profile/pfp_new.webp"
 							alt="Ryan"
 							width="80"
 							height="80"

src/components/skills/MoreSkills.astro

@@ -16,7 +16,7 @@ import Skill from "./Skill.astro";
 					{
 						text: "DaVinci Resolve",
 						bgColor: "white",
-						hoverTextColor: "black",
+						textColor: "black",
 					},
 					{
 						text: "Twitch",
@@ -29,7 +29,7 @@ import Skill from "./Skill.astro";
 					{
 						text: "CapCut",
 						bgColor: "white",
-						hoverTextColor: "black",
+						textColor: "black",
 					},
 				]}
 			/>

src/components/ui/DesktopNav.tsx

@@ -0,0 +1,221 @@
+// retractable navigation
+// do not retract if it's on contact page
+
+// mobile: display hamburger + available for work
+
+import { cn } from "@/lib/utils";
+import {
+	AnimatePresence,
+	motion,
+	useScroll,
+	useMotionValueEvent,
+} from "motion/react";
+import { Cross as HamburgerCross } from "hamburger-react";
+import { useEffect, useState } from "react";
+import pfp from "@/components/images/contact_photo_small.webp";
+
+function getWindowDimensions() {
+	const { innerWidth: width, innerHeight: height } = window;
+	return {
+		width,
+		height,
+	};
+}
+
+function useWindowDimensions() {
+	const hasWindow = typeof window !== "undefined";
+
+	function getWindowDimensions() {
+		const width = hasWindow ? window.innerWidth : 0;
+		const height = hasWindow ? window.innerHeight : 0;
+		return {
+			width,
+			height,
+		};
+	}
+
+	const [windowDimensions, setWindowDimensions] = useState(
+		getWindowDimensions(),
+	);
+
+	useEffect(() => {
+		if (hasWindow) {
+			function handleResize() {
+				setWindowDimensions(getWindowDimensions());
+			}
+
+			window.addEventListener("resize", handleResize);
+			return () => window.removeEventListener("resize", handleResize);
+		}
+	}, [hasWindow]);
+
+	return windowDimensions;
+}
+
+export const HoverNavigation = ({
+	items,
+	className,
+}: {
+	items: {
+		label: string;
+		link: string;
+	}[];
+	className?: string;
+}) => {
+	const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+	const { scrollYProgress } = useScroll();
+	const [visible, setVisible] = useState(true);
+	const [navVisible, setNavVisible] = useState(false);
+	const [availableVisible, setAvailableVisible] = useState(false);
+	const [onContactPage, setOnContactPage] = useState(false);
+	const [hamburgerOpen, setHamburgerOpen] = useState(false);
+	const { width } = useWindowDimensions();
+
+	// if on contact page, do not do width 0%
+	useEffect(() => {
+		setOnContactPage(window.location.href.endsWith("/contact"));
+	}, []);
+
+	useEffect(() => {
+		updateNavBarState(width);
+	}, [width]);
+
+	const updateNavBarState = (
+		width: number,
+		scrollProgress: number = 0,
+		scrollUp: boolean = false,
+	) => {
+		if (width && width < 1024) {
+			setNavVisible(false);
+			setAvailableVisible(true);
+		} else if (scrollProgress < 0.05) {
+			setNavVisible(true);
+			setAvailableVisible(false);
+		} else if (!onContactPage) {
+			setNavVisible(scrollUp);
+			setAvailableVisible(!scrollUp);
+		} else {
+			setNavVisible(true);
+			setAvailableVisible(false);
+		}
+	};
+
+	useMotionValueEvent(scrollYProgress, "change", (current) => {
+		// Check if current is not undefined and is a number
+		if (typeof current === "number") {
+			let direction = current! - scrollYProgress.getPrevious()!;
+			let scrollUp = direction <= 0;
+			let scrollProgress = scrollYProgress.get();
+
+			updateNavBarState(width, scrollProgress, scrollUp);
+		}
+	});
+
+	return (
+		<>
+			<img
+				src="/images/profile/contact_photo_small.webp"
+				alt="Ryan"
+				width={50}
+				className="mr-3 rounded-full"
+			/>
+			<motion.div
+				animate={{
+					width: availableVisible ? "auto" : "0px",
+					opacity: availableVisible ? "100%" : "0%",
+				}}
+				transition={{
+					ease: "easeInOut",
+				}}
+				className={cn(
+					"flex w-0 flex-row items-center justify-center pr-2 whitespace-nowrap opacity-0",
+					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 ${availableVisible ? "inline-block px-2" : "hidden"}`}
+				>
+					<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: navVisible ? "auto" : "0px",
+					opacity: navVisible ? "100%" : "0%",
+				}}
+				transition={{
+					ease: "easeInOut",
+				}}
+				className={cn(
+					"flex w-0 flex-row items-center justify-center overflow-hidden opacity-0",
+					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>
+
+			<div className="hamburger-wrapper block lg:hidden">
+				<HamburgerCross
+					toggled={hamburgerOpen}
+					toggle={setHamburgerOpen}
+				></HamburgerCross>
+			</div>
+		</>
+	);
+};
+
+export const NavBarLink = ({
+	className,
+	children,
+}: {
+	className?: string;
+	children: React.ReactNode;
+}) => {
+	return (
+		<div
+			className={cn(
+				"relative z-20 h-full w-full overflow-hidden rounded-2xl text-center transition-all ease-out group-hover:text-black",
+				className,
+			)}
+		>
+			{children}
+		</div>
+	);
+};

src/components/ui/HoverNavigation.tsx

@@ -1,136 +0,0 @@
-import { cn } from "@/lib/utils";
-import {
-	AnimatePresence,
-	motion,
-	useScroll,
-	useMotionValueEvent,
-} from "motion/react";
-
-import { useState } from "react";
-
-export const HoverNavigation = ({
-	items,
-	className,
-}: {
-	items: {
-		label: string;
-		link: string;
-	}[];
-	className?: string;
-}) => {
-	let [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
-	const { scrollYProgress } = useScroll();
-	const [visible, setVisible] = useState(true);
-
-	useMotionValueEvent(scrollYProgress, "change", (current) => {
-		// Check if current is not undefined and is a number
-		if (typeof current === "number") {
-			let direction = current! - scrollYProgress.getPrevious()!;
-
-			if (scrollYProgress.get() < 0.05 && current !== 1) {
-				setVisible(true);
-			} else {
-				if (direction > 0) {
-					setVisible(false);
-				} else {
-					setVisible(true);
-				}
-			}
-		}
-	});
-
-	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 pr-2 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 ${visible ? "hidden" : "inline-block px-2"}`}
-				>
-					<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>
-		</>
-	);
-};
-
-export const NavBarLink = ({
-	className,
-	children,
-}: {
-	className?: string;
-	children: React.ReactNode;
-}) => {
-	return (
-		<div
-			className={cn(
-				"relative z-20 h-full w-full overflow-hidden rounded-2xl text-center transition-all ease-out group-hover:text-black",
-				className,
-			)}
-		>
-			{children}
-		</div>
-	);
-};

src/components/ui/NavigationBar.tsx

@@ -0,0 +1,250 @@
+import { cn } from "@/lib/utils";
+import {
+	AnimatePresence,
+	motion,
+	useScroll,
+	useMotionValueEvent,
+} from "motion/react";
+import { Cross as HamburgerCross } from "hamburger-react";
+import { useEffect, useState } from "react";
+
+function useWindowDimensions() {
+	const hasWindow = typeof window !== "undefined";
+
+	function getWindowDimensions() {
+		const width = hasWindow ? window.innerWidth : 0;
+		const height = hasWindow ? window.innerHeight : 0;
+		return {
+			width,
+			height,
+		};
+	}
+
+	const [windowDimensions, setWindowDimensions] = useState(
+		getWindowDimensions(),
+	);
+
+	useEffect(() => {
+		if (hasWindow) {
+			function handleResize() {
+				setWindowDimensions(getWindowDimensions());
+			}
+
+			window.addEventListener("resize", handleResize);
+			return () => window.removeEventListener("resize", handleResize);
+		}
+	}, [hasWindow]);
+
+	return windowDimensions;
+}
+
+export const HoverNavigation = ({
+	items,
+	className,
+}: {
+	items: {
+		label: string;
+		link: string;
+	}[];
+	className?: string;
+}) => {
+	const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+	const { scrollYProgress } = useScroll();
+	const [navVisible, setNavVisible] = useState(true);
+	const [availableVisible, setAvailableVisible] = useState(false);
+
+	const [onContactPage, setOnContactPage] = useState(false);
+	const [hamburgerOpen, setHamburgerOpen] = useState(false);
+	const { width } = useWindowDimensions();
+
+	// if on contact page, do not do width 0%
+	useEffect(() => {
+		setOnContactPage(window.location.href.endsWith("/contact"));
+	}, []);
+
+	useEffect(() => {
+		updateNavBarState(width);
+	}, [width]);
+
+	const updateNavBarState = (
+		width: number,
+		scrollProgress: number = 0,
+		scrollUp: boolean = false,
+	) => {
+		if (width && width < 1024) {
+			setNavVisible(false);
+			setAvailableVisible(true);
+		} else if (scrollProgress < 0.05) {
+			setNavVisible(true);
+			setAvailableVisible(false);
+		} else if (!onContactPage) {
+			setNavVisible(scrollUp);
+			setAvailableVisible(!scrollUp);
+		} else {
+			setNavVisible(true);
+			setAvailableVisible(false);
+		}
+	};
+
+	useMotionValueEvent(scrollYProgress, "change", (current) => {
+		// Check if current is not undefined and is a number
+		if (typeof current === "number") {
+			let direction = current! - scrollYProgress.getPrevious()!;
+			let scrollUp = direction <= 0;
+			let scrollProgress = scrollYProgress.get();
+
+			updateNavBarState(width, scrollProgress, scrollUp);
+		}
+	});
+
+	return (
+		<div className="bg-secondary/50 fixed top-5 left-1/2 z-30 box-border flex w-4/5 -translate-x-1/2 items-center justify-center overflow-auto rounded-[40px] border-2 border-solid border-gray-700 px-5 py-3 backdrop-blur-md lg:w-2/3 xl:w-auto">
+			<div className="flex flex-col">
+				<div className="flex flex-row">
+					<a href="/">
+						<img
+							src="/images/profile/contact_photo_small.webp"
+							alt="Ryan"
+							width={50}
+							className="mr-3 rounded-full"
+						/>
+					</a>
+					<div className="mx-5 flex flex-col items-center justify-center">
+						<motion.div
+							animate={{
+								width: availableVisible ? "auto" : "0px",
+								opacity: availableVisible ? "100%" : "0%",
+							}}
+							className="flex w-auto flex-row items-center justify-center pr-2 whitespace-nowrap opacity-100 lg:w-0 lg:opacity-0"
+						>
+							<a
+								href="/contact"
+								className="overflow-hidden whitespace-nowrap transition-colors duration-150 hover:text-green-500"
+							>
+								Available for work
+							</a>
+							<div className={`relative z-50 ml-3`}>
+								<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>
+					</div>
+					<motion.div
+						animate={{
+							width: navVisible ? "auto" : "0px",
+							opacity: navVisible ? "100%" : "0%",
+						}}
+						transition={{
+							ease: "easeInOut",
+						}}
+						className={cn(
+							"hidden w-0 flex-row items-center justify-center overflow-hidden lg:flex lg:w-auto",
+							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>
+
+					<div className="hamburger-wrapper block lg:hidden">
+						<HamburgerCross
+							toggled={hamburgerOpen}
+							toggle={setHamburgerOpen}
+						></HamburgerCross>
+					</div>
+				</div>
+				<motion.ul
+					animate={{
+						height: hamburgerOpen ? "auto" : "0px",
+					}}
+					transition={{
+						ease: "easeInOut",
+					}}
+					className="h-0 overflow-hidden lg:hidden"
+				>
+					{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.ul>
+			</div>
+		</div>
+	);
+};
+
+export const NavBarLink = ({
+	className,
+	children,
+}: {
+	className?: string;
+	children: React.ReactNode;
+}) => {
+	return (
+		<div
+			className={cn(
+				"relative z-20 h-full w-full overflow-hidden rounded-2xl text-center transition-all ease-out group-hover:text-black",
+				className,
+			)}
+		>
+			{children}
+		</div>
+	);
+};

src/layouts/PageLayout.astro

@@ -0,0 +1,22 @@
+---
+interface Props {
+	title: string;
+	description: string;
+	thumbnail?: string;
+	metaURL?: string;
+}
+
+const { title, description, thumbnail, metaURL } = Astro.props;
+import Layout from "./Layout.astro";
+import NavBar from "@/components/global/NavBar.astro";
+---
+
+<Layout
+	title={title}
+	description={description}
+	thumbnail={thumbnail}
+	metaURL={metaURL}
+>
+	<NavBar />
+	<slot />
+</Layout>

src/navStore.js

@@ -0,0 +1,4 @@
+import { atom } from "nanostores";
+
+export const isNavVisible = atom(true);
+export const isAvVisible = atom(false);

src/pages/experience.astro

@@ -4,16 +4,16 @@ import Layout from "../layouts/Layout.astro";
 import ExperienceComponent from "../components/experience/ExperienceComponent.astro";
 import MoreExperience from "../components/experience/MoreExperience.astro";
 import Footer from "../components/global/FooterComponent.astro";
+import PageLayout from "@/layouts/PageLayout.astro";
 ---
 
-<Layout
+<PageLayout
 	title="Experience"
 	description="Find out RythonDev's previous education"
 >
-	<NavBar />
 	<div id="Experience" class="pt-30">
 		<ExperienceComponent />
 		<MoreExperience />
 	</div>
 	<Footer />
-</Layout>
+</PageLayout>

src/pages/index.astro

@@ -8,13 +8,13 @@ import Experience from "../components/experience/ExperienceComponent.astro";
 import Skills from "../components/skills/SkillsComponent.astro";
 import Contact from "../components/contact/ContactComponent.astro";
 import Footer from "../components/global/FooterComponent.astro";
+import PageLayout from "@/layouts/PageLayout.astro";
 ---
 
-<Layout
+<PageLayout
 	title="Ryan's Portfolio"
 	description="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
 >
-	<NavBar />
 	<div id="home" class="flex items-center justify-center pt-32">
 		<Intro />
 	</div>
@@ -36,7 +36,7 @@ import Footer from "../components/global/FooterComponent.astro";
 		<Contact />
 	</div>
 	<Footer />
-</Layout>
+</PageLayout>
 <script is:inline>
 	location.search.includes("?uwu") &&
 		document.documentElement.classList.add("uwu");