From 896571d83834cacdca6eb2ae066e561bf6331cf1 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Thu, 5 Jun 2025 23:03:02 +0200
Subject: Enhance homepage layout and content, improve accessibility, and
 update styles

---
 src/partials/Header.astro | 203 ++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 171 insertions(+), 32 deletions(-)

(limited to 'src/partials/Header.astro')

diff --git a/src/partials/Header.astro b/src/partials/Header.astro
index 500fadd..e8db9d5 100644
--- a/src/partials/Header.astro
+++ b/src/partials/Header.astro
@@ -3,60 +3,199 @@ import t from "../i18n/es.json";
 ---
 
 <header>
-  <a href="/">{t.header.home}</a>
-  <a href="/trajectory/">{t.header.trajectory}</a>
-  <a href="/portfolio/">{t.header.portfolio}</a>
-  <a href="/blog/">{t.header.blog}</a>
-  <a href="/contact/">{t.header.contact}</a>
+  <div class="header-container">
+    <div class="brand">
+      <!-- Brand placeholder - you can replace this with a logo or name -->
+      <a href="/" class="brand-link" aria-label="Ariel Costas Home">Ariel&ZeroWidthSpace;<span class="brand-accent">Costas</span></a>
+    </div>
+
+    <div class="mobile-toggle" id="mobile-toggle" aria-expanded="false" aria-controls="nav-links" aria-label="Toggle menu">
+      <span class="bar"></span>
+      <span class="bar"></span>
+      <span class="bar"></span>
+    </div>
+
+    <nav class="nav-links" id="nav-links" aria-label="Main navigation">
+      <a href="/">{t.header.home}</a>
+      <a href="/trajectory/">{t.header.trajectory}</a>
+      <a href="/portfolio/">{t.header.portfolio}</a>
+      <a href="/blog/">{t.header.blog}</a>
+      <a href="/contact/">{t.header.contact}</a>
+    </nav>
+  </div>
 </header>
 
+<script>
+  // Wait for the DOM to be fully loaded
+  document.addEventListener('DOMContentLoaded', () => {
+    const mobileToggle = document.getElementById('mobile-toggle');
+    const navLinks = document.getElementById('nav-links');
+
+    // Toggle mobile menu
+    mobileToggle?.addEventListener('click', () => {
+      const isExpanded = mobileToggle.getAttribute('aria-expanded') === 'true';
+      mobileToggle.setAttribute('aria-expanded', !isExpanded ? 'true' : 'false');
+      mobileToggle.classList.toggle('active');
+      navLinks?.classList.toggle('active');
+    });
+
+    // Handle Escape key to close menu
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && navLinks?.classList.contains('active')) {
+        mobileToggle?.classList.remove('active');
+        navLinks.classList.remove('active');
+        mobileToggle?.setAttribute('aria-expanded', 'false');
+        mobileToggle?.focus();
+      }
+    });
+
+    // Add active class to current page link
+    const currentPath = window.location.pathname;
+    const navItems = document.querySelectorAll('.nav-links a');
+    navItems.forEach(item => {
+      const href = item.getAttribute('href') ?? '';
+      if (href === currentPath || (href !== '/' && currentPath.startsWith(href))) {
+        item.classList.add('active');
+        item.setAttribute('aria-current', 'page');
+      }
+    });
+  });
+</script>
+
 <style lang="scss">
   @use "../../styles/variables" as *;
 
   header {
     color: $accent;
+    padding: 1rem 2rem;
+
+    .header-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      max-width: 1200px;
+      margin: 0 auto;
+      width: 100%;
+    }
+
+    .brand {
+      margin-right: auto;
+
+      .brand-link {
+        font-size: 1.8rem;
+        font-weight: 800;
+        text-decoration: none;
+        color: $accent;
+
+        .brand-accent {
+          color: $accentDark;
+        }
+      }
+    }
+
+    .nav-links {
+      display: flex;
+      gap: 2rem;
+      align-items: center;
+
+      a {
+        text-decoration: none;
+        font-weight: 700;
+        font-size: 1.2rem;
+        text-transform: uppercase;
+        transition:
+          color 0.2s ease-in-out,
+          border-bottom-color 0.2s ease-in-out;
+        color: $accent;
+        line-height: 1;
+        border-bottom: 2px solid transparent;
 
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 2rem;
+        &:hover {
+          color: $accentDark;
+          border-bottom-color: currentColor;
+        }
 
-    padding: 2rem;
+        &.active {
+          color: $accentDark;
+        }
+      }
+    }
 
-    a {
-      text-decoration: none;
-      font-weight: 700;
-      font-size: 1.2rem;
-      text-transform: uppercase;
-      transition:
-        color 0.2s ease-in-out,
-        border-bottom-color 0.2s ease-in-out;
-      color: $accent;
-      line-height: 1;
-      border-bottom: 2px solid transparent;
+    .mobile-toggle {
+      display: none;
+      flex-direction: column;
+      justify-content: space-between;
+      width: 2rem;
+      height: 1.25rem;
+      cursor: pointer;
+      z-index: 10;
 
-      &:hover {
-        color: $accentDark;
-        border-bottom-color: currentColor;
+      .bar {
+        height: 3px;
+        width: 100%;
+        background-color: $accent;
+        border-radius: 3px;
+        transition: all 0.2s ease;
       }
 
       &.active {
-        color: $accentDark;
+        .bar:nth-child(1) {
+          transform: translateY(0.5rem) rotate(45deg);
+        }
+
+        .bar:nth-child(2) {
+          opacity: 0;
+        }
+
+        .bar:nth-child(3) {
+          transform: translateY(-0.5rem) rotate(-45deg);
+        }
       }
     }
   }
 
-  @media (max-width: $breakpointTablet) {
+  @media (max-width: $breakpointDesktop) {
     header {
-      flex-direction: column;
-      align-items: center;
-      gap: 1rem;
+      .nav-links {
+        gap: 1.5rem;
 
-      a {
-        font-size: 1.5rem;
+        a {
+          font-size: 1rem;
+        }
       }
     }
   }
 
+  @media (max-width: $breakpointTablet) {
+    header {
+      .mobile-toggle {
+        display: flex;
+      }
+
+      .nav-links {
+        position: fixed;
+        top: 0;
+        right: -100%;
+        width: 80%;
+        max-width: 300px;
+        height: 100vh;
+        background-color: $lightAlt;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 2rem;
+        transition: right 0.3s ease;
+        box-shadow: $shadow;
+        z-index: 5;
+
+        a {
+          font-size: 1.5rem;
+        }
+
+        &.active {
+          right: 0;
+        }
+      }
+    }
+  }
 </style>
-- 
cgit v1.3