Muqtasid-Khan
diff --git a/‎Pages/about.html‎
Lines changed: 40 additions & 15 deletions b/‎Pages/about.html‎
Lines changed: 40 additions & 15 deletions
@@ -1,19 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <link rel="icon" href="Assets/Favi.png" type="image/png"> <meta charset="UTF-8">
-  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Poppins:wght@500&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="../style.css">
+  <link rel="icon" href="Assets/Favi.png" type="image/png" />
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Poppins:wght@500&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="../style.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Home | Muqtasid Khan Portfolio</title>
 </head>
 
 <body>
   <div class="page-container">
     <nav>
       <div class="logo">Muqtasid Khan</div>
-      <ul>
+
+      <!-- Hamburger toggle button -->
+      <div class="nav-toggle" id="nav-toggle" aria-label="Toggle menu" aria-expanded="false" role="button" tabindex="0">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+
+      <ul id="nav-menu">
         <li><a href="../index.html">Home</a></li>
         <li><a href="about.html">About Me</a></li>
         <li><a href="projects.html">Projects</a></li>
@@ -26,29 +34,28 @@
       <section class="hero">
         <div class="hero-image">
           <div class="circular-img floating">
-            <img src="../Pages/Assets/MK2.jpg" alt="Muqtasid Khan">
+            <img src="../Pages/Assets/MK2.jpg" alt="Muqtasid Khan" />
           </div>
         </div>
         <div class="hero-content">
           <div class="floating">
             <h4 style="text-align: left; font-family: 'Playfair Display', serif;">Solving for Mr. X</h4>
             <h1 class="floating" style="font-family: 'Poppins', sans-serif;">Where X = Me</h1>
-            <p class="floating">Hello! I'm Muqtasid Khan, and in the equation of life, I'm the X you're solving for. A dedicated BS Mathematics student at Bahauddin Zakariya University's CASPAM, I'm passionate about the elegance and power of mathematics.
+            <p class="floating">
+              Hello! I'm Muqtasid Khan, and in the equation of life, I'm the X you're solving for. A dedicated BS Mathematics student at Bahauddin Zakariya University's CASPAM, I'm passionate about the elegance and power of mathematics.
 
               Beyond my studies, I actively contribute to the university community through my involvement in ZCBS and ZPVC CASPAM Chapters, and I founded Elite Sprout 🌱, an academy that provides quality instruction to students from KG to FSc level.
-              
-              I am committed to education, serving my community, and believe in the power of knowledge to transform lives.</p>
+
+              I am committed to education, serving my community, and believe in the power of knowledge to transform lives.
+            </p>
             <a href="Assets/Muqtasid Khan CV 2.pdf" target="_blank" download class="resume-button">
               📄 View / Download Resume
             </a>
 
             <a href="skills.html" class="btn">My Skills</a>
-
           </div>
         </div>
       </section>
-      
-         
     </main>
 
     <footer>
@@ -57,20 +64,38 @@ <h1 class="floating" style="font-family: 'Poppins', sans-serif;">Where X = Me</h
       </div>
     </footer>
   </div>
+
   <script>
     function adjustForScreenSize() {
       const width = window.innerWidth;
-  
+
       if (width < 768) {
         document.body.classList.add('mobile');
       } else {
         document.body.classList.remove('mobile');
+        document.getElementById('nav-menu').classList.remove('active');
+        document.getElementById('nav-toggle').setAttribute('aria-expanded', 'false');
       }
     }
-  
+
+    const navToggle = document.getElementById('nav-toggle');
+    const navMenu = document.getElementById('nav-menu');
+
+    navToggle.addEventListener('click', () => {
+      navMenu.classList.toggle('active');
+      const expanded = navToggle.getAttribute('aria-expanded') === 'true';
+      navToggle.setAttribute('aria-expanded', String(!expanded));
+    });
+
+    navToggle.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        navToggle.click();
+      }
+    });
+
     window.addEventListener('load', adjustForScreenSize);
     window.addEventListener('resize', adjustForScreenSize);
   </script>
-  
 </body>
 </html>