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
- Updated action bar with transparent buttons (colored on hover only)
- Repositioned language selector after CV title for better flow
- Simplified toggle labels (removed parentheses values)
- Changed button styling: transparent by default, green/gray on hover
- Updated name format to "Moreno Rubio, Juan Andrés" with right alignment
- Added LIVGolf experience (Apr 2024-present) with detailed responsibilities
- Updated profile photo to dni.jpeg
- Refined summary text focusing on consultant/analyst/developer roles
- Added award logos (clicplan.png, drolosoft.png, teseo.png)
- Implemented smooth logo animations (fade/scale transitions)
- Adjusted toggle dimensions (80px wide, 30px tall) with smaller icons (16x16)
- Added breathing room to title and icon with proper padding
- Removed italic styling from name per user preference
**Social Links in Footer (Page 2):**
- Replace address/phone with LinkedIn, GitHub, and Behance links
- Maintain email@ link
- All links are clickable and open in new tabs
- Footer displays social media profiles prominently
**Company Logo Toggle Feature:**
- Add "Show logos" toggle switch in top action bar
- Toggle displays company logos (48x48px) to the left of each experience item
- LinkedIn-style layout when logos are shown
- Logos hidden by default, optional display via toggle
- Graceful fallback: missing logos don't break layout (onerror handler)
- Logos directory created at static/images/logos/ with README
**Technical Implementation:**
- New CSS file: logo-toggle.css for toggle switch and logo layout
- JavaScript: toggleLogos() function for show/hide functionality
- Template updates: experience items now support flex layout with logos
- Action bar grid updated to accommodate 4 columns
- Logo display uses CSS class `.show-logos` on `.cv-paper`
- Print CSS: logos hidden in PDF exports by default
**User Experience:**
- Clean toggle switch UI with smooth animations
- Mobile responsive design
- Accessibility: proper ARIA labels for toggle
- Optional feature that doesn't clutter default view
- Professional LinkedIn-style appearance when enabled
Logos can be added to static/images/logos/ directory using filenames
from the companyLogo field in CV JSON data.
Features:
- Profile photo display (right side, inline with header)
- Company logos for all major employers (8 logos downloaded)
- Short/Long CV toggle for condensed/detailed view
- Short descriptions (1-2 lines) for quick overview
- Experience separators with border lines
Photo Implementation:
- Circular photo (120px) on right side of header
- Placeholder SVG if photo not uploaded
- Instructions in ADDING-YOUR-PHOTO.md
- Photo stored in static/images/profile/
Company Logos:
- Olympic Broadcasting Services, AENA, SAP, Gigya
- Accenture, Everis, Indra, Megabanner
- 40px logos displayed inline with experience
- Auto-hide if logo missing
- Mobile: logos hidden for cleaner layout
Short/Long Toggle:
- Toggle buttons in action bar (Corto/Largo)
- Short mode: shows shortDescription only
- Long mode: shows full responsibilities + technologies
- CSS-based show/hide (no page reload)
- Defaults to short view
Layout Updates:
- Header: text left, photo right, inline alignment
- Experience items: separated by border lines
- Responsive: photo centers on mobile
- Print-optimized: smaller photo in PDF
Data Updates:
- Added shortDescription field to Experience struct
- 13 short descriptions for all positions (EN/ES)
- Added companyLogo field with filename mapping
- JSON updated with all new fields
Tech:
- Pure CSS toggle (no HTMX needed)
- Vanilla JavaScript for button states
- Maintains bilingual support (ES/EN)
juanatsap