feat: add hamburger navigation menu with smooth scrolling to CV sections

Implemented a complete navigation system with the following features:

**Navigation Menu:**
- Hamburger button in top-left of action bar
- Slide-out navigation menu with all CV sections
- Smooth close on click outside or after selection
- Mobile-responsive design (280px desktop, 240px mobile)

**Section Anchors:**
- Added ID anchors to all CV sections:
  - #education (Training/Formación)
  - #skills (Skills/Competencias)
  - #experience (Experience/Experiencia)
  - #awards (Awards/Premios y Reconocimientos)
  - #courses (Courses/Cursos Realizados)
  - #languages (Languages/Idiomas)
  - #references (References/Referencias)
  - #other (Other/Otros)

**Section Icons:**
- Added descriptive icons to all section titles
- Icons match their purpose (school for education/courses, trophy for awards, etc.)
- Consistent 24x24 size for section titles, 20x20 for menu items

**Smooth Scrolling:**
- Implemented smooth scroll behavior with proper offset calculation
- Accounts for fixed header height
- Added scroll-padding-top for better anchor positioning

**Accessibility:**
- Proper ARIA labels and roles
- aria-expanded attribute for hamburger button
- Keyboard navigation support
- Screen reader friendly

**Styling:**
- Clean white menu background with shadow
- Blue hover states matching CV accent color
- Left border indicator on hover
- Smooth transitions (0.3s ease-in-out)
- Print-friendly (menu hidden in print mode)

**Bilingual Support:**
- Menu items automatically translate based on language
- Works seamlessly with English/Spanish switching

This commit is contained in:

juanatsap

2025-11-07 19:11:21 +00:00

parent 14db8df663

commit 59b95c4448

16 changed files with 257 additions and 18 deletions

static/images/companies/indra.png

BIN

View File

Binary file not shown.

Before

Width: | Height: | Size: 10 B

After

Width: | Height: | Size: 10 KiB