feat: implement mobile navigation toggle and enhance CV download link

Author: devshafi

index.html

@@ -72,7 +72,13 @@
   <header class="site-header">
     <div class="header-inner">
       <a href="#home" class="brand">Shafi</a>
-      <nav class="nav" aria-label="Primary Navigation">
+      <a class="nav-download mobile-download" href="assets/CV-Shafi.pdf" download="Fozle-Rabbi-Shafi-CV.pdf">Download CV</a>
+      <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="primary-nav" aria-label="Toggle navigation menu">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+      <nav id="primary-nav" class="nav" aria-label="Primary Navigation">
         <div class="nav-links">
           <a class="nav-link" href="#about">About</a>
           <a class="nav-link" href="#education">Education</a>
@@ -107,7 +113,7 @@
     <section id="home" class="hero section">
       <div class="hero-layout">
         <div>
-          <p class="kicker"> PhD Student | Cybersecurity Researcher</p>
+          <p class="kicker">PhD Student | Cybersecurity Researcher</p>
           <h1>Fozle Rabbi Shafi</h1>
           <p class="hero-text">
             PhD student in Computing at Queen&rsquo;s University, researching AI-driven cybersecurity

script.js

@@ -1,6 +1,8 @@
 const reveals = document.querySelectorAll('.reveal');
 const navLinks = document.querySelectorAll('.nav-link');
 const sections = [...document.querySelectorAll('main section[id]')];
+const menuToggle = document.querySelector('.menu-toggle');
+const headerInner = document.querySelector('.header-inner');
 
 const revealObserver = new IntersectionObserver(
   (entries) => {
@@ -35,3 +37,26 @@ window.addEventListener('scroll', activateNav);
 window.addEventListener('load', activateNav);
 
 document.getElementById('year').textContent = new Date().getFullYear();
+
+if (menuToggle && headerInner) {
+  menuToggle.addEventListener('click', () => {
+    const isOpen = headerInner.classList.toggle('menu-open');
+    menuToggle.setAttribute('aria-expanded', String(isOpen));
+  });
+
+  navLinks.forEach((link) => {
+    link.addEventListener('click', () => {
+      if (window.innerWidth <= 760) {
+        headerInner.classList.remove('menu-open');
+        menuToggle.setAttribute('aria-expanded', 'false');
+      }
+    });
+  });
+
+  window.addEventListener('resize', () => {
+    if (window.innerWidth > 760) {
+      headerInner.classList.remove('menu-open');
+      menuToggle.setAttribute('aria-expanded', 'false');
+    }
+  });
+}

styles.css

@@ -83,6 +83,29 @@ ul {
   gap: 1rem;
 }
 
+.menu-toggle {
+  display: none;
+  width: 38px;
+  height: 38px;
+  border: 1px solid var(--stroke);
+  border-radius: 10px;
+  background: #f8fbff;
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 4px;
+  cursor: pointer;
+}
+
+.menu-toggle span {
+  width: 16px;
+  height: 2px;
+  border-radius: 999px;
+  background: #1c2d42;
+  transition: transform 180ms ease, opacity 180ms ease;
+}
+
 .brand {
   text-decoration: none;
   font-family: "Space Grotesk", sans-serif;
@@ -142,6 +165,10 @@ ul {
   box-shadow: 0 10px 20px rgba(15, 138, 85, 0.32);
 }
 
+.mobile-download {
+  display: none;
+}
+
 .nav-socials {
   display: flex;
   align-items: center;
@@ -486,8 +513,59 @@ article.card {
     padding: 0.7rem 0.8rem;
   }
 
+  .header-inner {
+    position: relative;
+    align-items: center;
+  }
+
+  .menu-toggle {
+    display: inline-flex;
+    margin-left: auto;
+  }
+
+  .header-inner.menu-open .menu-toggle span:nth-child(1) {
+    transform: translateY(6px) rotate(45deg);
+  }
+
+  .header-inner.menu-open .menu-toggle span:nth-child(2) {
+    opacity: 0;
+  }
+
+  .header-inner.menu-open .menu-toggle span:nth-child(3) {
+    transform: translateY(-6px) rotate(-45deg);
+  }
+
   .nav {
-    gap: 0.45rem;
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    left: 0;
+    right: 0;
+    z-index: 20;
+    gap: 0.65rem;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    background: #ffffff;
+    border: 1px solid var(--stroke);
+    border-radius: 14px;
+    box-shadow: 0 14px 28px rgba(15, 40, 75, 0.14);
+    padding: 0.75rem;
+    opacity: 0;
+    transform: translateY(-6px);
+    pointer-events: none;
+    transition: opacity 180ms ease, transform 180ms ease;
+  }
+
+  .header-inner.menu-open .nav {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  .nav-links {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.2rem;
   }
 
   .nav-link {
@@ -497,7 +575,35 @@ article.card {
 
   .nav-download {
     font-size: 0.78rem;
-    padding: 0.38rem 0.62rem;
+    padding: 0.45rem 0.7rem;
+    align-self: flex-start;
+  }
+
+  .mobile-download {
+    display: inline-flex;
+    margin-left: 0.55rem;
+    font-size: 0.78rem;
+    padding: 0 0.62rem;
+    height: 34px;
+    line-height: 1.15;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .brand {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 34px;
+  }
+
+  .nav .nav-download {
+    display: none;
+  }
+
+  .nav-socials {
+    justify-content: flex-start;
   }
 
   .nav-socials a {
@@ -506,7 +612,7 @@ article.card {
   }
 
   main {
-    margin-top: 8.2rem;
+    margin-top: 6.3rem;
   }
 
   .hero-layout {