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
+40
-16
@@ -47,8 +47,11 @@
|
||||
</div>
|
||||
|
||||
<!-- Education -->
|
||||
<section class="cv-section">
|
||||
<h3 class="section-title">{{if eq .Lang "es"}}Formación{{else}}Training{{end}}</h3>
|
||||
<section id="education" class="cv-section">
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:school" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Formación{{else}}Training{{end}}
|
||||
</h3>
|
||||
{{range .CV.Education}}
|
||||
<div class="education-item">
|
||||
<strong>{{.Degree}}</strong> ({{.StartDate}}-{{.EndDate}}) {{if eq $.Lang "es"}}obtenido de{{else}}obtained from the{{end}} <strong>{{.Institution}}</strong> ({{.Location}})
|
||||
@@ -57,8 +60,11 @@
|
||||
</section>
|
||||
|
||||
<!-- Skills Summary -->
|
||||
<section class="cv-section">
|
||||
<h3 class="section-title">{{if eq .Lang "es"}}Competencias{{else}}Skills{{end}}</h3>
|
||||
<section id="skills" class="cv-section">
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:brain" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Competencias{{else}}Skills{{end}}
|
||||
</h3>
|
||||
<p class="summary-text">
|
||||
{{if eq .Lang "es"}}
|
||||
Amplio conocimiento en entornos web, tanto J2EE como PHP. Experto en tecnologías front-end, aunque con considerable experiencia en sistemas back-end. Receptivo al aprendizaje de nuevas tecnologías, y con una gran dosis de creatividad. Capacidad de analizar problemas y aportar soluciones específicas adaptadas a cada tipo de cliente. Me gusta trabajar tanto solo como en grupos.
|
||||
@@ -69,8 +75,11 @@
|
||||
</section>
|
||||
|
||||
<!-- Experience -->
|
||||
<section class="cv-section">
|
||||
<h3 class="section-title">{{if eq .Lang "es"}}Experiencia{{else}}Experience{{end}}</h3>
|
||||
<section id="experience" class="cv-section">
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:office-building" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Experiencia{{else}}Experience{{end}}
|
||||
</h3>
|
||||
|
||||
{{range .CV.Experience}}
|
||||
<div class="experience-item">
|
||||
@@ -150,8 +159,11 @@
|
||||
<main class="cv-main">
|
||||
<!-- Awards Section -->
|
||||
{{if .CV.Awards}}
|
||||
<section class="cv-section">
|
||||
<h3 class="section-title">{{if eq .Lang "es"}}Premios y Reconocimientos{{else}}Awards{{end}}</h3>
|
||||
<section id="awards" class="cv-section">
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:trophy" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Premios y Reconocimientos{{else}}Awards{{end}}
|
||||
</h3>
|
||||
{{range .CV.Awards}}
|
||||
<div class="award-item">
|
||||
{{if .AwardLogo}}
|
||||
@@ -182,8 +194,11 @@
|
||||
|
||||
<!-- Courses Section -->
|
||||
{{if .CV.Courses}}
|
||||
<section class="cv-section">
|
||||
<h3 class="section-title">{{if eq .Lang "es"}}Cursos Realizados{{else}}Courses{{end}}</h3>
|
||||
<section id="courses" class="cv-section">
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:school" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Cursos Realizados{{else}}Courses{{end}}
|
||||
</h3>
|
||||
{{range .CV.Courses}}
|
||||
<div class="course-item">
|
||||
<div class="course-icon">
|
||||
@@ -222,8 +237,11 @@
|
||||
{{end}}
|
||||
|
||||
<!-- Languages Section -->
|
||||
<section class="cv-section">
|
||||
<h3 class="section-title">{{if eq .Lang "es"}}Idiomas{{else}}Languages{{end}}</h3>
|
||||
<section id="languages" class="cv-section">
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:translate" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Idiomas{{else}}Languages{{end}}
|
||||
</h3>
|
||||
{{range .CV.Languages}}
|
||||
<div class="language-item">
|
||||
<strong>{{.Language}}:</strong> {{.Proficiency}}{{if .Detail}} {{.Detail}}{{end}}
|
||||
@@ -233,8 +251,11 @@
|
||||
|
||||
<!-- References Section -->
|
||||
{{if .CV.References}}
|
||||
<section class="cv-section">
|
||||
<h3 class="section-title">{{if eq .Lang "es"}}Referencias{{else}}References{{end}}</h3>
|
||||
<section id="references" class="cv-section">
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:link-variant" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Referencias{{else}}References{{end}}
|
||||
</h3>
|
||||
{{range .CV.References}}
|
||||
<div class="reference-item">
|
||||
{{if .TextBefore}}{{.TextBefore}} {{end}}<a href="{{.URL}}" target="_blank" rel="noopener noreferrer"><strong>{{if .LinkText}}{{.LinkText}}{{else}}{{.Title}}{{end}}</strong></a>{{if .TextAfter}} {{.TextAfter}}{{end}}
|
||||
@@ -245,8 +266,11 @@
|
||||
|
||||
<!-- Other Section (Driver's License) -->
|
||||
{{if .CV.Other.DriverLicense}}
|
||||
<section class="cv-section">
|
||||
<h3 class="section-title">{{if eq .Lang "es"}}Otros{{else}}Other{{end}}</h3>
|
||||
<section id="other" class="cv-section">
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:information" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Otros{{else}}Other{{end}}
|
||||
</h3>
|
||||
<div class="other-content">
|
||||
{{if eq .Lang "es"}}Carnet de conducir tipo {{.CV.Other.DriverLicense}}{{else}}Driving License type {{.CV.Other.DriverLicense}}{{end}}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user