Update index.html

Author: parthava-adabala

index.html

@@ -47,6 +47,10 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
     <style>
+        /* Mobile menu styles */
+        #mobile-menu {
+            transition: transform 0.3s ease-in-out;
+        }
         body {
             font-family: 'Inter', sans-serif;
             background-color: #1a1a1a;
@@ -169,6 +173,7 @@ <h2 class="text-4xl font-bold mb-6 animate-fade-in">Get in Touch</h2>
     </section>
 
     <script>
+        // Smooth scrolling for nav links
         // Smooth scrolling for nav links
         document.querySelectorAll('.nav-link').forEach(anchor => {
             anchor.addEventListener('click', function(e) {
@@ -179,8 +184,29 @@ <h2 class="text-4xl font-bold mb-6 animate-fade-in">Get in Touch</h2>
                     top: targetElement.offsetTop - 80,
                     behavior: 'smooth'
                 });
+                // Close mobile menu after clicking a link
+                if (window.innerWidth < 768) {
+                    mobileMenu.classList.add('hidden');
+                    mobileMenu.classList.remove('flex');
+                    menuToggle.innerHTML = `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>`;
+                }
             });
         });
+        
+        // Toggle mobile menu
+        const menuToggle = document.getElementById('menu-toggle');
+        const mobileMenu = document.getElementById('mobile-menu');
+        menuToggle.addEventListener('click', () => {
+            if (mobileMenu.classList.contains('hidden')) {
+                mobileMenu.classList.remove('hidden');
+                mobileMenu.classList.add('flex');
+                menuToggle.innerHTML = `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>`;
+            } else {
+                mobileMenu.classList.add('hidden');
+                mobileMenu.classList.remove('flex');
+                menuToggle.innerHTML = `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>`;
+            }
+        });
 
         // GSAP Animations
         gsap.registerPlugin(ScrollTrigger);