From b5fb5bb5ae4a8a495774faeafef876eec097eeb3 Mon Sep 17 00:00:00 2001
From: Dustin Thurston <dthurston1996@gmail.com>
Date: Fri, 26 Jun 2026 09:16:45 -0400
Subject: [PATCH] fix mobile nav staying present after transition

---
 package.json                |  3 +--
 src/components/nav.astro    |  9 +++++++++
 src/components/whoami.astro | 40 +++++++++++++++++++------------------
 3 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 7c605f0..57ea95a 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
-    "preview": "astro preview",
+    "preview": "netlify dev",
     "astro": "astro"
   },
   "dependencies": {
@@ -15,7 +15,6 @@
     "@astrojs/react": "5.0.4",
     "@lucide/astro": "^0.563.0",
     "@nanostores/react": "^1.0.0",
-    "@tabler/icons": "^3.37.1",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/vite": "^4.2.1",
     "@types/react": "^19.1.12",
diff --git a/src/components/nav.astro b/src/components/nav.astro
index 8e1abaf..f62cbaa 100644
--- a/src/components/nav.astro
+++ b/src/components/nav.astro
@@ -32,6 +32,15 @@ const { className, isMobile = false } = Astro.props;
         }
     }
 
+    document.addEventListener("astro:page-load", () => {
+        // Runs when the view transition is completely done
+        if (menuButton) {
+            menuButton.dataset.state = "closed";
+            mobileNav?.classList.remove("absolute");
+            mobileNav?.classList.add("hidden");
+        }
+    });
+
     menuButton?.addEventListener("click", handleClick);
 </script>
 
diff --git a/src/components/whoami.astro b/src/components/whoami.astro
index 2ff8e74..07cc86e 100644
--- a/src/components/whoami.astro
+++ b/src/components/whoami.astro
@@ -4,24 +4,26 @@ import me from "../assets/me.jpg";
 ---
 
 <div class="border border-solid rounded-lg p-6 surface">
-  <div class="flex flex-col md:flex-row gap-6 items-center md:items-start">
-    <div class="flex-1 space-y-2">
-      <h1 class="text-5xl font-bold">Hi, I'm Dustin!</h1>
-      <p class="text-lg">
-        I'm a senior full stack software engineer from Michigan, currently
-        working on some cool stuff at Zenimax Online Studios!
-      </p>
-      <p>
-        I love art and music and lately I've been really into photography, stories, and tennis!
-        I have a lot of other interests and love learning about other people's passions, so please
-        chat me up about them! 
-      </p>
+    <div class="flex flex-col md:flex-row gap-6 items-center md:items-start">
+        <div class="flex-1 space-y-2">
+            <h1 class="text-5xl font-bold">Hi, I'm Dustin!</h1>
+            <p class="text-lg">
+                I'm a senior full stack software engineer from Michigan,
+                currently working on some cool stuff at Zenimax Online Studios!
+            </p>
+            <p>
+                I love art and music and lately I've been really into
+                photography, stories (movies, shows, games, etc. The medium does
+                not particularly matter to me), and tennis! I have a lot of
+                other interests and love learning about other people's passions,
+                so please chat me up about them!
+            </p>
+        </div>
+        <Image
+            class="rounded-full size-40 shrink-0 -order-1 xl:order-1"
+            loading="eager"
+            src={me}
+            alt="Me smiling in my snowboarding jacket on a sunny winter day"
+        />
     </div>
-    <Image
-      class="rounded-full size-40 shrink-0 -order-1 xl:order-1"
-      loading="eager"
-      src={me}
-      alt="Me smiling in my snowboarding jacket on a sunny winter day"
-    />
-  </div>
 </div>
-- 
2.51.2