From 30ac82c3c4ff467c0f3bc90e1a5543a7e17e3586 Mon Sep 17 00:00:00 2001
From: Nicholai <nicholaivogelfilms@gmail.com>
Date: Sat, 6 Dec 2025 22:49:27 -0700
Subject: [PATCH] Update configuration, enhance navigation, and improve layout
 responsiveness

- Changed image service in `astro.config.mjs` from "cloudflare" to "compile".
- Adjusted GridOverlay component to remove unnecessary height styling.
- Refined Navigation component with a mobile menu toggle and improved accessibility features.
- Updated FeaturedProject and Hero sections to use `min-h-[100dvh]` for better responsiveness.
- Modified global CSS to disable smooth scroll on mobile for performance and added a mobile viewport height fix.
---
 astro.config.mjs                              |   4 +-
 src/components/GridOverlay.astro              |   2 +-
 src/components/Navigation.astro               | 113 +++++++++++++++++-
 src/components/sections/FeaturedProject.astro |   2 +-
 src/components/sections/Hero.astro            |   2 +-
 src/styles/global.css                         |  14 ++-
 6 files changed, 126 insertions(+), 11 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 6d1e104..d40afbe 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -20,10 +20,10 @@ export default defineConfig({
       enabled: true
     },
 
-    imageService: "cloudflare"
+    imageService: "compile"
   }),
 
   vite: {
     plugins: [tailwindcss()],
   },
-});
\ No newline at end of file
+});
diff --git a/src/components/GridOverlay.astro b/src/components/GridOverlay.astro
index b10bf98..858d5b3 100644
--- a/src/components/GridOverlay.astro
+++ b/src/components/GridOverlay.astro
@@ -1,7 +1,7 @@
 ---
 ---
 <!-- Fixed Grid Overlay -->
-<div class="fixed inset-0 grid-overlay h-screen w-screen"></div>
+<div class="fixed inset-0 grid-overlay"></div>
 
 <!-- 12 Column Guide (Visual Only - Low Opacity) -->
 <div
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 1294d1e..c3cc864 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -22,15 +22,118 @@
         </div>
 
         <a href="/contact"
-            class="border border-slate-600 px-5 lg:px-6 py-2.5 lg:py-3 text-xs font-bold uppercase tracking-[0.15em] text-white hover:border-brand-accent hover:bg-brand-accent hover:text-brand-dark transition-all duration-300">
+            class="hidden md:block border border-slate-600 px-5 lg:px-6 py-2.5 lg:py-3 text-xs font-bold uppercase tracking-[0.15em] text-white hover:border-brand-accent hover:bg-brand-accent hover:text-brand-dark transition-all duration-300">
             Let's Talk
         </a>
     </div>
 
-    <!-- Mobile menu button (optional, for future) -->
-    <button class="md:hidden p-2 text-slate-400 hover:text-white transition-colors" aria-label="Menu">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+    <!-- Mobile menu button -->
+    <button
+        id="mobile-menu-toggle"
+        class="md:hidden p-2 text-slate-400 hover:text-white transition-colors z-[60]"
+        aria-label="Toggle menu"
+        aria-expanded="false"
+    >
+        <!-- Hamburger icon -->
+        <svg id="menu-icon-open" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"></path>
+        </svg>
+        <!-- Close icon (hidden by default) -->
+        <svg id="menu-icon-close" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"></path>
         </svg>
     </button>
 </nav>
+
+<!-- Mobile Menu Overlay -->
+<div
+    id="mobile-menu"
+    class="fixed inset-0 z-40 bg-brand-dark/98 backdrop-blur-xl transform translate-x-full transition-transform duration-300 ease-out md:hidden"
+>
+    <!-- Menu Content -->
+    <div class="flex flex-col justify-center items-center h-full px-8">
+        <!-- Navigation Links -->
+        <nav class="flex flex-col items-center gap-8 mb-12">
+            <a
+                href="/"
+                class="mobile-nav-link text-3xl font-bold uppercase tracking-wider text-white hover:text-brand-accent transition-colors duration-300"
+            >
+                Home
+            </a>
+            <a
+                href="/blog"
+                class="mobile-nav-link text-3xl font-bold uppercase tracking-wider text-white hover:text-brand-accent transition-colors duration-300"
+            >
+                Blog
+            </a>
+            <a
+                href="/contact"
+                class="mobile-nav-link text-3xl font-bold uppercase tracking-wider text-white hover:text-brand-accent transition-colors duration-300"
+            >
+                Contact
+            </a>
+        </nav>
+
+        <!-- CTA Button -->
+        <a
+            href="/contact"
+            class="border border-brand-accent px-8 py-4 text-sm font-bold uppercase tracking-[0.2em] text-brand-accent hover:bg-brand-accent hover:text-brand-dark transition-all duration-300"
+        >
+            Let's Talk
+        </a>
+
+        <!-- Decorative Elements -->
+        <div class="absolute bottom-12 left-8 right-8">
+            <div class="flex justify-between items-center text-[10px] font-mono text-slate-600 uppercase tracking-widest">
+                <span>NV / 2026</span>
+                <span>Menu</span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    const toggle = document.getElementById('mobile-menu-toggle');
+    const menu = document.getElementById('mobile-menu');
+    const iconOpen = document.getElementById('menu-icon-open');
+    const iconClose = document.getElementById('menu-icon-close');
+    const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
+
+    let isOpen = false;
+
+    function toggleMenu() {
+        isOpen = !isOpen;
+
+        if (isOpen) {
+            menu?.classList.remove('translate-x-full');
+            menu?.classList.add('translate-x-0');
+            iconOpen?.classList.add('hidden');
+            iconClose?.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+            toggle?.setAttribute('aria-expanded', 'true');
+        } else {
+            menu?.classList.add('translate-x-full');
+            menu?.classList.remove('translate-x-0');
+            iconOpen?.classList.remove('hidden');
+            iconClose?.classList.add('hidden');
+            document.body.style.overflow = '';
+            toggle?.setAttribute('aria-expanded', 'false');
+        }
+    }
+
+    toggle?.addEventListener('click', toggleMenu);
+
+    // Close menu when clicking a link
+    mobileNavLinks.forEach(link => {
+        link.addEventListener('click', () => {
+            if (isOpen) toggleMenu();
+        });
+    });
+
+    // Close menu on escape key
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && isOpen) {
+            toggleMenu();
+        }
+    });
+</script>
diff --git a/src/components/sections/FeaturedProject.astro b/src/components/sections/FeaturedProject.astro
index 5b08438..b003b95 100644
--- a/src/components/sections/FeaturedProject.astro
+++ b/src/components/sections/FeaturedProject.astro
@@ -1,6 +1,6 @@
 ---
 ---
-<section id="work" class="relative overflow-hidden group min-h-screen flex flex-col cursor-pointer">
+<section id="work" class="relative overflow-hidden group min-h-[100dvh] flex flex-col cursor-pointer">
     <!-- Main Link Overlay -->
     <a href="/blog/gstar-raw-olympics/" class="absolute inset-0 z-30" aria-label="View G-Star Raw Olympics Case Study"></a>
 
diff --git a/src/components/sections/Hero.astro b/src/components/sections/Hero.astro
index 3d0731c..158c0ef 100644
--- a/src/components/sections/Hero.astro
+++ b/src/components/sections/Hero.astro
@@ -1,6 +1,6 @@
 ---
 ---
-<section id="hero" class="relative w-full h-screen overflow-hidden bg-brand-dark">
+<section id="hero" class="relative w-full h-[100dvh] overflow-hidden bg-brand-dark">
     <!-- Background Image (Portrait) -->
     <div class="absolute top-0 right-0 w-full md:w-1/2 h-full z-0">
         <div class="relative w-full h-full">
diff --git a/src/styles/global.css b/src/styles/global.css
index 0f567cf..7e118e1 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -120,11 +120,23 @@ body {
   overflow-x: hidden;
 }
 
-/* Smooth scroll behavior */
+/* Smooth scroll behavior - disabled on mobile for better performance */
 html {
   scroll-behavior: smooth;
 }
 
+@media (max-width: 768px) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+/* Mobile viewport height fix - uses dvh with vh fallback */
+:root {
+  --vh-full: 100vh;
+  --vh-full: 100dvh;
+}
+
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
   width: 8px;