From 6d477f087ad6972cbf936f9df1e792b2a34599e2 Mon Sep 17 00:00:00 2001
From: greg <greg@hndrx.co>
Date: Thu, 20 Feb 2025 01:06:16 -0800
Subject: [PATCH] fixes nav on mobile

---
 src/index.html | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/index.html b/src/index.html
index 9b57f08..34e389c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -21,22 +21,37 @@
     <nav class="fixed top-0 left-0 right-0 z-50 bg-black bg-opacity-75 shadow-lg backdrop-blur-md">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex items-center justify-between h-16">
+          <div class="flex-shrink-0">
+             <span class="text-2xl font-bold text-[#64ffda]">Greg</span>
+          </div>
           <div class="hidden md:flex space-x-6">
              <a href="#about" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:text-[#64ffda] transition-colors">About</a>
              <a href="#experience" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:text-[#64ffda] transition-colors">Experience</a>
              <a href="#tools" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:text-[#64ffda] transition-colors">Tools</a>
              <a href="#projects" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:text-[#64ffda] transition-colors">Projects</a>
           </div>
-          <!-- Optional: Mobile menu icon -->
+          <!-- Mobile menu button -->
           <div class="md:hidden">
-             <button class="text-white hover:text-[#64ffda] focus:outline-none focus:text-[#64ffda]">
-               <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+             <button id="mobile-menu-button" class="text-white hover:text-[#64ffda] focus:outline-none focus:text-[#64ffda]">
+               <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" 
+                    viewBox="0 0 24 24" stroke="currentColor">
+                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                       d="M4 6h16M4 12h16M4 18h16"/>
                </svg>
              </button>
           </div>
         </div>
       </div>
+      
+      <!-- Mobile Menu -->
+      <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-95">
+        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+          <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-[#64ffda]">About</a>
+          <a href="#experience" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-[#64ffda]">Experience</a>
+          <a href="#tools" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-[#64ffda]">Tools</a>
+          <a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-[#64ffda]">Projects</a>
+        </div>
+      </div>
     </nav>
 
     <main class="pt-20 relative">
@@ -235,7 +250,6 @@
         </div>
     </footer>
 
-    <!-- Add this before closing body tag -->
     <script>
         document.addEventListener("DOMContentLoaded", function() {
             // Initialize particles.js
@@ -267,6 +281,13 @@
             });
         });
     </script>
+    <script>
+      // Toggle mobile menu visibility
+      document.getElementById("mobile-menu-button").addEventListener("click", function() {
+        const mobileMenu = document.getElementById("mobile-menu");
+        mobileMenu.classList.toggle("hidden");
+      });
+    </script>
     <script>
         // After DOM content is loaded
         document.addEventListener("DOMContentLoaded", function() {