jonaspm · jonaspm · Apr 30, 2025 · Apr 30, 2025 · Apr 30, 2025
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -0,0 +1,72 @@
+---
+const navItems = ['Home', 'Bio', 'Skills', 'Projects', 'Contact'];
+---
+
+<header class="fixed top-0 left-0 right-0 z-20 bg-grayblue-800 bg-opacity-90">
+    <nav class="container mx-auto px-6 py-3">
+        <!-- Mobile menu button -->
+        <div class="flex items-center justify-between md:hidden">
+            <a href="#home" class="text-grayblue-100 font-medium text-lg">Jonas <span class="text-blue-300">PM</span></a>
+            <button id="mobile-menu-button" class="text-grayblue-300 hover:text-blue-300 transition-colors focus:outline-none">
+                <span class="material-symbols-rounded transition-transform duration-300" id="menu-icon">menu</span>
+            </button>
+        </div>
+
+        <!-- Desktop navigation -->
+        <ul class="hidden md:flex justify-center gap-6">
+            {navItems.map((item) => (
+                <li>
+                    <a href={`#${item.toLowerCase()}`} class="text-sm font-light uppercase tracking-wider transition-colors text-grayblue-300 hover:text-blue-300">
+                        {item}
+                    </a>
+                </li>
+            ))}
+        </ul>
+
+        <!-- Mobile navigation menu -->
+        <ul id="mobile-menu" class="max-h-0 overflow-hidden md:hidden flex-col flex gap-4 transition-all duration-300 ease-in-out">
+            {navItems.map((item) => (
+                <li class="text-center">
+                    <a href={`#${item.toLowerCase()}`} class="block text-sm font-light uppercase tracking-wider transition-colors text-grayblue-300 hover:text-blue-300">
+                        {item}
+                    </a>
+                </li>
+            ))}
+        </ul>
+    </nav>
+</header>
+
+<script>
+    // Mobile menu toggle functionality
+    const mobileMenuButton = document.getElementById('mobile-menu-button');
+    const mobileMenu = document.getElementById('mobile-menu');
+    const menuIcon = document.getElementById('menu-icon');
+
+    if (mobileMenuButton && mobileMenu && menuIcon) {
+        mobileMenuButton.addEventListener('click', () => {
+            // Toggle menu visibility with animation
+            if (mobileMenu.classList.contains('max-h-0')) {
+                mobileMenu.classList.remove('max-h-0');
+                mobileMenu.classList.add('max-h-96', 'py-2'); // Set a large enough height to accommodate content
+                menuIcon.textContent = 'close';
+                menuIcon.classList.add('rotate-180');
+            } else {
+                mobileMenu.classList.add('max-h-0');
+                mobileMenu.classList.remove('max-h-96', 'py-2');
+                menuIcon.textContent = 'menu';
+                menuIcon.classList.remove('rotate-180');
+            }
+        });
+
+        // Close mobile menu when clicking on a link
+        const mobileMenuLinks = mobileMenu.querySelectorAll('a');
+        mobileMenuLinks.forEach(link => {
+            link.addEventListener('click', () => {
+                mobileMenu.classList.add('max-h-0');
+                mobileMenu.classList.remove('max-h-96', 'py-2');
+                menuIcon.textContent = 'menu';
+                menuIcon.classList.remove('rotate-180');
+            });
+        });
+    }
+</script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
 ---
 const { title } = Astro.props
 import '@/styles/global.css'
+import Navigation from '@/components/Navigation.astro'
 ---
 
 <!DOCTYPE html>
@@ -13,18 +14,18 @@ import '@/styles/global.css'
     <meta name="author" content="Jonas Perusquia Morales" />
     <meta name="keywords" content="Jonas Perusquia Morales, CTO, Chief Technology Officer, Software Engineer, Web Developer, Jonas Perusquia" />
     <meta name="generator" content={Astro.generator} />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
     <title>{title}</title>
     <script type="text/javascript">
       (function(c,l,a,r,i,t,y){
           c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
           t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
           y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
       })(window, document, "clarity", "script", "l5tvca8qee");
-  </script>
+    </script>
   </head>
   <body class="min-h-screen h-full bg-grayblue-900 text-grayblue-100">
-    <main>
-      <slot />
-    </main>
+    <Navigation />
+    <slot />
   </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -44,28 +44,10 @@ const projects = [
 	},
 ]
 
-const navItems = ['Home', 'Bio', 'Skills', 'Projects', 'Contact']
-
 ---
 
 <Layout title="Jonas Perusquia Morales">
-
-    <header class="fixed top-0 left-0 right-0 z-20 bg-grayblue-800 bg-opacity-90">
-        <nav class="container mx-auto px-6 py-3">
-            <ul class="flex justify-center gap-6">
-                {navItems.map((item) => (
-                    <li>
-                        <a href={`#${item.toLowerCase()}`} class="text-sm font-light uppercase tracking-wider transition-colors text-grayblue-300 hover:text-blue-300">
-                            {item}
-                        </a>
-                    </li>
-                ))}
-            </ul>
-        </nav>
-    </header>
-
     <main class="max-w-7xl mx-auto px-6 pt-14 xs:pt-20">
-
         <!-- HOME SECTION -->
         <section id="home" class="py-14 sm:py-20">
             <div class="flex flex-col items-center lg:flex-row lg:justify-between">
@@ -78,7 +60,7 @@ const navItems = ['Home', 'Bio', 'Skills', 'Projects', 'Contact']
                     <div class="flex gap-4 mt-6 justify-center lg:justify-start">
                         {
                             socialNetworks.map(socialNetwork => (
-                                <a href={socialNetwork.url} class="text-grayblue-300 hover:text-blue-300 transition-transform hover:scale-110">
+                                <a aria-label={socialNetwork.name} href={socialNetwork.url} class="text-grayblue-300 hover:text-blue-300 transition-transform hover:scale-110">
                                     <div class="h-6 w-6">
                                         <Fragment set:html={socialNetwork.image} />
                                     </div>
@@ -94,6 +76,7 @@ const navItems = ['Home', 'Bio', 'Skills', 'Projects', 'Contact']
                         width={320}
                         height={320}
                         class="rounded-full object-cover"
+                        loading="eager"
                     />
                 </div>
             </div>
@@ -141,7 +124,7 @@ const navItems = ['Home', 'Bio', 'Skills', 'Projects', 'Contact']
                             </div>
                             <div class="project-image self-center">
                                 <div class="overflow-hidden aspect-video rounded-lg">
-                                    <img class="duration-300 transition-all aspect-video " src={ project.image.src } alt={ project.name }></img>
+                                    <img loading="lazy" class="duration-300 transition-all aspect-video " src={ project.image.src } alt={ project.name }></img>
                                 </div>
                             </div>
                         </a>
@@ -162,5 +145,4 @@ const navItems = ['Home', 'Bio', 'Skills', 'Projects', 'Contact']
     <footer class="bg-grayblue-800 py-6 text-center text-sm text-grayblue-400">
         <p>Made with ♥️ from Chihuahua, Mexico.</p>
     </footer>
-
 </Layout>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -369,4 +369,8 @@ html {
   & img {
     @apply scale-110;
   }
+}
+
+#mobile-menu {
+  interpolate-size: allow-keywords;
 }