feat: mobile dropdown nav, fixed footer, social links in header

aymuos15 · claude · aymuos15 · commit bb75e2b7232d · 2026-03-18T16:28:35.000Z
- Add hamburger menu dropdown for nav on mobile
- Fix footer to bottom of viewport so it's always visible
- Move social icons from footer to header
- Footer simplified to centered text line

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/index.html b/index.html
@@ -19,6 +19,33 @@
                 <path d="M12 3a9 9 0 109 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 01-4.4 2.26 5.403 5.403 0 01-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/>
             </svg>
         </button>
+        <div class="social-links">
+            <a href="https://github.com/aymuos15" target="_blank" aria-label="GitHub">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+                    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
+                </svg>
+            </a>
+            <a href="https://scholar.google.com/citations?user=WmHtKBYAAAAJ&hl=en" target="_blank" aria-label="Google Scholar">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+                    <path d="M5.242 13.769L0 9.5 12 0l12 9.5-5.242 4.269C17.548 11.249 14.978 9.5 12 9.5c-2.977 0-5.548 1.748-6.758 4.269zM12 10a7 7 0 1 0 0 14 7 7 0 0 0 0-14z"/>
+                </svg>
+            </a>
+            <a href="https://www.linkedin.com/in/soumyaskundu/" target="_blank" aria-label="LinkedIn">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+                </svg>
+            </a>
+            <a href="https://discuss.pytorch.org/u/soumya_kundu/summary" target="_blank" aria-label="PyTorch Forum">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+                    <path d="M12.005 0L4.952 7.053a9.865 9.865 0 000 14.022 9.866 9.866 0 0014.022 0c3.984-3.9 3.986-10.205.085-14.023l-1.744 1.743c2.904 2.905 2.904 7.634 0 10.538s-7.634 2.904-10.538 0-2.904-7.634 0-10.538l4.647-4.646.582-.665zm3.568 4.142a1.467 1.467 0 10-.001 2.935 1.467 1.467 0 00.001-2.935z"/>
+                </svg>
+            </a>
+        </div>
+        <button class="nav-toggle" aria-label="Menu">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+                <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>
+            </svg>
+        </button>
         <div class="nav-links">
             <a href="#home" class="active">Home</a>
             <a href="#about">About</a>
@@ -77,31 +104,7 @@ <h1 class="name-link">Soumya Snigdha Kundu</h1>
     </main>
 
     <footer class="footer">
-        <div class="footer-row">
-            <div class="social-links">
-                <a href="https://github.com/aymuos15" target="_blank" aria-label="GitHub">
-                    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-                        <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
-                    </svg>
-                </a>
-                <a href="https://scholar.google.com/citations?user=WmHtKBYAAAAJ&hl=en" target="_blank" aria-label="Google Scholar">
-                    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-                        <path d="M5.242 13.769L0 9.5 12 0l12 9.5-5.242 4.269C17.548 11.249 14.978 9.5 12 9.5c-2.977 0-5.548 1.748-6.758 4.269zM12 10a7 7 0 1 0 0 14 7 7 0 0 0 0-14z"/>
-                    </svg>
-                </a>
-                <a href="https://www.linkedin.com/in/soumyaskundu/" target="_blank" aria-label="LinkedIn">
-                    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-                        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
-                    </svg>
-                </a>
-                <a href="https://discuss.pytorch.org/u/soumya_kundu/summary" target="_blank" aria-label="PyTorch Forum">
-                    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-                        <path d="M12.005 0L4.952 7.053a9.865 9.865 0 000 14.022 9.866 9.866 0 0014.022 0c3.984-3.9 3.986-10.205.085-14.023l-1.744 1.743c2.904 2.905 2.904 7.634 0 10.538s-7.634 2.904-10.538 0-2.904-7.634 0-10.538l4.647-4.646.582-.665zm3.568 4.142a1.467 1.467 0 10-.001 2.935 1.467 1.467 0 00.001-2.935z"/>
-                    </svg>
-                </a>
-            </div>
-            <span class="footer-info">namma Chennai | London | soumya_snigdha.kundu-at-kcl.ac.uk</span>
-        </div>
+        <span class="footer-info">namma Chennai | London | soumya_snigdha.kundu-at-kcl.ac.uk</span>
     </footer>
 
     <script src="script.js"></script>
diff --git a/script.js b/script.js
@@ -16,10 +16,23 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 // Cached DOM references
+const navLinksContainer = document.querySelector('.nav-links');
 const navLinks = document.querySelectorAll('.nav-links a');
+const navToggle = document.querySelector('.nav-toggle');
 const updatesList = document.getElementById('updates-list');
 const tabs = document.querySelectorAll('.tab');
 
+// Mobile nav dropdown
+navToggle.addEventListener('click', () => {
+    navLinksContainer.classList.toggle('open');
+});
+
+document.addEventListener('click', (e) => {
+    if (!navLinksContainer.contains(e.target) && !navToggle.contains(e.target)) {
+        navLinksContainer.classList.remove('open');
+    }
+});
+
 // Pastel rainbow link colors
 const pastelColors = [
     '#e8a0bf', '#f0b8a8', '#f2cc8f', '#b5d99c',
@@ -69,6 +82,7 @@ function switchSection(targetId) {
 navLinks.forEach(link => {
     link.addEventListener('click', (e) => {
         e.preventDefault();
+        navLinksContainer.classList.remove('open');
         const targetId = link.getAttribute('href').slice(1);
         switchSection(targetId);
     });
diff --git a/styles/components/footer.css b/styles/components/footer.css
@@ -1,33 +1,15 @@
 /* Footer */
 .footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
     max-width: var(--content-max-width);
-    width: 100%;
     margin: 0 auto;
-    padding: 0 2rem 1.5rem;
+    padding: 0.8rem 2rem;
     font-size: 0.8rem;
     color: var(--text-secondary);
-}
-
-.footer-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.social-links {
-    display: flex;
-    gap: 1rem;
-}
-
-.social-links a {
-    color: var(--text-secondary);
-    text-decoration: none;
-    transition: color 0.2s ease;
-}
-
-.social-links a:hover {
-    color: var(--text);
-    text-decoration: none;
+    text-align: center;
 }
 
 @media (max-width: 768px) {
diff --git a/styles/components/header.css b/styles/components/header.css
@@ -14,6 +14,26 @@
     transition: color 0.4s ease;
 }
 
+.social-links {
+    display: flex;
+    gap: 1rem;
+}
+
+.social-links a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+.social-links a:hover {
+    color: var(--text);
+    text-decoration: none;
+}
+
+.nav-toggle {
+    display: none;
+}
+
 .nav-links {
     display: flex;
     gap: 2.5rem;
@@ -40,14 +60,48 @@
 
 @media (max-width: 768px) {
     .header {
-        padding: 1rem 1.5rem;
+        padding: 1rem 1rem 1rem 1.5rem;
+    }
+
+    .nav-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        color: var(--text-secondary);
+        transition: color 0.2s ease;
+    }
+
+    .nav-toggle:hover {
+        color: var(--text);
     }
 
     .nav-links {
-        gap: 1.5rem;
+        position: absolute;
+        top: 100%;
+        right: 0;
+        flex-direction: column;
+        gap: 0;
+        background: var(--bg);
+        padding: 0.5rem 1rem;
+        opacity: 0;
+        pointer-events: none;
+        transform: translateY(-4px);
+        transition: opacity 0.2s ease, transform 0.2s ease;
+    }
+
+    .nav-links.open {
+        opacity: 1;
+        pointer-events: auto;
+        transform: translateY(0);
     }
 
     .nav-links a {
-        font-size: 0.7rem;
+        font-size: 0.65rem;
+        padding: 0.4rem 0;
+        text-align: right;
     }
 }
