Fix mobile view navbar and add company logo

Author: Vashanth

src/assets/postman.svg

@@ -123,15 +123,77 @@ import { ClientRouter } from 'astro:transitions';
             ))}
           </div>
 
-          <!-- Mobile Simple Menu Button Placeholder -->
-          <div class="md:hidden">
-            <button class="p-2 text-text-secondary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="18" y2="18"/></button>
+          <!-- Mobile Simple Menu Button -->
+          <div class="md:hidden flex items-center">
+            <button id="mobile-menu-btn" class="p-2 text-text-secondary hover:text-text-primary transition-colors" aria-label="Toggle menu">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></button>
             </button>
           </div>
         </div>
+
+        <!-- Mobile Menu Overlay -->
+        <div id="mobile-menu" class="hidden absolute top-16 left-0 w-full bg-zinc-900/95 backdrop-blur-xl border-b border-zinc-800/50 p-4 shadow-2xl md:hidden">
+          <div class="flex flex-col space-y-2">
+            {navLinks.map(link => (
+              <a 
+                href={link.href} 
+                class={`px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
+                  currentPath === link.href 
+                  ? "bg-white/10 text-white" 
+                  : "text-text-secondary hover:text-white hover:bg-white/5"
+                }`}
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
+        </div>
       </nav>
     </div>
+
+    <script>
+      function setupMobileMenu() {
+        const btn = document.getElementById('mobile-menu-btn');
+        const menu = document.getElementById('mobile-menu');
+        
+        // Remove existing listeners if any (by cloning the node) 
+        // OR simply check if we already attached them.
+        // Since the element is persisted, the cleanest way is to check a data attribute.
+        
+        if (btn && menu && !btn.hasAttribute('data-menu-initialized')) {
+          btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const isHidden = menu.classList.contains('hidden');
+            if (isHidden) {
+              menu.classList.remove('hidden');
+            } else {
+              menu.classList.add('hidden');
+            }
+          });
+
+          // Close menu when clicking outside
+          document.addEventListener('click', (e) => {
+            if (!menu.contains(e.target as Node) && !btn.contains(e.target as Node)) {
+              menu.classList.add('hidden');
+            }
+          });
+
+          // Close menu when clicking a link
+          const links = menu.querySelectorAll('a');
+          links.forEach(link => {
+            link.addEventListener('click', () => {
+              menu.classList.add('hidden');
+            });
+          });
+
+          // Mark as initialized
+          btn.setAttribute('data-menu-initialized', 'true');
+        }
+      }
+
+      // Run on view transitions (and initial load)
+      document.addEventListener('astro:page-load', setupMobileMenu);
+    </script>
 
     <div class="pt-24"> <!-- Spacer for floating nav -->
       <main>

src/assets/quizizz.png

@@ -1,5 +1,8 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import { Image } from 'astro:assets';
+import postmanLogo from '../assets/postman.svg';
+import quizizzLogo from '../assets/quizizz.png';
 
 const experiences = [
   {
@@ -8,6 +11,7 @@ const experiences = [
     period: 'Nov 2023 - Present',
     location: 'Bengaluru, India',
     description: 'Building scalable EdTech systems serving millions of students and educators worldwide.',
+    logo: quizizzLogo,
     highlights: [
       'Developed multiple frontend features using Vue.js, including Corporate AI Studio and Interactive Videos.',
       'Transitioned to backend-focused role in Common Assessment, a district-wide high-scale test delivery platform, working in Golang.',
@@ -21,6 +25,7 @@ const experiences = [
     period: 'July 2021 - Nov 2023',
     location: 'Bengaluru, India',
     description: 'Full-stack developer on Public and Private API Networks.',
+    logo: postmanLogo,
     highlights: [
       'Built critical features for developer collaboration platform using React, Node.js (Sails JS), and AWS.',
       'Improved API discovery and collaboration tools for millions of developers.'
@@ -30,7 +35,8 @@ const experiences = [
     company: 'Postman',
     role: 'Software Engineer Intern',
     period: 'Feb 2021 - June 2021',
-    description: 'Gained hands-on experience with full-stack development and industry best practices.'
+    description: 'Gained hands-on experience with full-stack development and industry best practices.',
+    logo: postmanLogo
   }
 ];
 
@@ -75,14 +81,23 @@ const education = [
               <div class={`absolute -left-[5px] top-3 w-[9px] h-[9px] rounded-full ring-4 ${exp.current ? 'bg-accent ring-accent/20' : 'bg-zinc-700 ring-bg-primary'}`}></div>
 
               <div class="space-y-6">
-                <div class="space-y-1">
-                  <div class="md:hidden mb-2">
-                     <span class="text-xs font-bold uppercase tracking-widest text-accent">{exp.period}</span>
+                <div class="flex justify-between items-start gap-4">
+                  <div class="space-y-1 flex-1">
+                    <div class="md:hidden mb-2">
+                       <span class="text-xs font-bold uppercase tracking-widest text-accent">{exp.period}</span>
+                    </div>
+                    <h3 class="text-2xl font-bold text-text-primary tracking-tight group-hover:text-accent transition-colors">
+                      {exp.company}
+                    </h3>
+                    <p class="text-lg font-medium text-text-secondary">{exp.role}</p>
                   </div>
-                  <h3 class="text-2xl font-bold text-text-primary tracking-tight group-hover:text-accent transition-colors">
-                    {exp.company}
-                  </h3>
-                  <p class="text-lg font-medium text-text-secondary">{exp.role}</p>
+                  {exp.logo && (
+                    <Image 
+                      src={exp.logo} 
+                      alt={`${exp.company} logo`} 
+                      class="w-12 h-12 object-contain rounded-md bg-zinc-800/50 p-2 ring-1 ring-white/10"
+                    />
+                  )}
                 </div>
 
                 <p class="text-text-tertiary leading-relaxed max-w-2xl">