Add collapsible sections, restructure menu, and refine sidebar layouts
- Wrapped all CV sections and sidebar sections in <details> tags for collapsibility - Added Expand All/Collapse All menu options with CV Sections submenu - Implemented smooth CSS animations for section expansion/collapse using max-height transitions - Fixed menu item alignment issues (removed extra padding) - Added dash between company name and duration in experience section - Moved SAP Technologies and AI-Assisted Development to bottom of right sidebar - Reordered JavaScript Ecosystem above Go Ecosystem in left sidebar - Implemented different layouts for left vs right sidebars: - Left sidebar: title left-aligned, triangle on right - Right sidebar: title right-aligned, triangle on left - Adjusted sidebar spacing for better visual hierarchy when sections are open/closed
This commit is contained in:
juanatsap
+89
-45
@@ -21,10 +21,14 @@
|
||||
<aside class="cv-sidebar cv-sidebar-left">
|
||||
{{range $index, $category := .SkillsLeft}}
|
||||
<section class="sidebar-section">
|
||||
<h3 class="sidebar-title">{{$category.Category}}</h3>
|
||||
<div class="sidebar-content">
|
||||
{{range $category.Items}}<div class="skill-item">{{.}}</div>{{end}}
|
||||
</div>
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="sidebar-title">{{$category.Category}}</h3>
|
||||
</summary>
|
||||
<div class="sidebar-content">
|
||||
{{range $category.Items}}<div class="skill-item">{{.}}</div>{{end}}
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
</aside>
|
||||
@@ -48,23 +52,30 @@
|
||||
|
||||
<!-- Education -->
|
||||
<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>
|
||||
<details open>
|
||||
<summary>
|
||||
<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>
|
||||
</summary>
|
||||
{{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}})
|
||||
</div>
|
||||
{{end}}
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- Skills Summary -->
|
||||
<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>
|
||||
<details open>
|
||||
<summary>
|
||||
<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>
|
||||
</summary>
|
||||
<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.
|
||||
@@ -72,14 +83,18 @@
|
||||
Extensive knowledge in web environments, both J2EE and PHP. Expert in front-end technologies, although with considerable experience in back-end systems. Receptive to learning new technologies, and with a large dose of creativity. Ability to analyze problems and provide specific solutions tailored to each client type. I like to work both alone and in groups.
|
||||
{{end}}
|
||||
</p>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- Experience -->
|
||||
<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>
|
||||
<details open>
|
||||
<summary>
|
||||
<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>
|
||||
</summary>
|
||||
|
||||
{{range .CV.Experience}}
|
||||
<div class="experience-item">
|
||||
@@ -91,7 +106,7 @@
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="experience-content">
|
||||
<strong>{{.Position}}{{if .Company}} - {{if .CompanyURL}}<a href="{{.CompanyURL}}" target="_blank" rel="noopener noreferrer">{{.Company}}</a>{{else}}{{.Company}}{{end}}{{if .Duration}} <span class="duration-text">{{.Duration}}</span>{{end}}{{end}}</strong><br>
|
||||
<strong>{{.Position}}{{if .Company}} - {{if .CompanyURL}}<a href="{{.CompanyURL}}" target="_blank" rel="noopener noreferrer">{{.Company}}</a>{{else}}{{.Company}}{{end}}{{if .Duration}} - <span class="duration-text">{{.Duration}}</span>{{end}}{{end}}</strong><br>
|
||||
<small>{{.StartDate}} / {{if .Current}}{{if eq $.Lang "es"}}presente{{else}}now{{end}}{{else}}{{.EndDate}}{{end}} - ({{.Location}})</small>
|
||||
|
||||
{{if .ShortDescription}}
|
||||
@@ -108,6 +123,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</details>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
@@ -135,10 +151,13 @@
|
||||
<!-- Awards Section -->
|
||||
{{if .CV.Awards}}
|
||||
<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>
|
||||
<details open>
|
||||
<summary>
|
||||
<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>
|
||||
</summary>
|
||||
{{range .CV.Awards}}
|
||||
<div class="award-item">
|
||||
{{if .AwardLogo}}
|
||||
@@ -164,16 +183,20 @@
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
|
||||
<!-- Projects Section -->
|
||||
{{if .CV.Projects}}
|
||||
<section id="projects" class="cv-section">
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:web" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Proyectos Personales / Freelance{{else}}Personal / Freelance Projects{{end}}
|
||||
</h3>
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:web" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Proyectos Personales / Freelance{{else}}Personal / Freelance Projects{{end}}
|
||||
</h3>
|
||||
</summary>
|
||||
{{range .CV.Projects}}
|
||||
<div class="project-item">
|
||||
{{if .ProjectLogo}}
|
||||
@@ -222,16 +245,20 @@
|
||||
<p>{{if eq .Lang "es"}}Ver todos los proyectos en mi{{else}}See all projects on my{{end}}
|
||||
<a href="{{.CV.Personal.Domestika}}" target="_blank" rel="noopener noreferrer"><strong>{{if eq .Lang "es"}}portfolio de Domestika{{else}}Domestika portfolio{{end}}</strong></a></p>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
|
||||
<!-- Courses Section -->
|
||||
{{if .CV.Courses}}
|
||||
<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>
|
||||
<details open>
|
||||
<summary>
|
||||
<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>
|
||||
</summary>
|
||||
{{range .CV.Courses}}
|
||||
<div class="course-item">
|
||||
{{if .CourseLogo}}
|
||||
@@ -261,47 +288,60 @@
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
|
||||
<!-- Languages Section -->
|
||||
<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>
|
||||
<details open>
|
||||
<summary>
|
||||
<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>
|
||||
</summary>
|
||||
{{range .CV.Languages}}
|
||||
<div class="language-item">
|
||||
<strong>{{.Language}}:</strong> {{.Proficiency}}{{if .Detail}} {{.Detail}}{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- References Section -->
|
||||
{{if .CV.References}}
|
||||
<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>
|
||||
<details open>
|
||||
<summary>
|
||||
<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>
|
||||
</summary>
|
||||
{{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}}
|
||||
</div>
|
||||
{{end}}
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
|
||||
<!-- Other Section (Driver's License) -->
|
||||
{{if .CV.Other.DriverLicense}}
|
||||
<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>
|
||||
<details open>
|
||||
<summary>
|
||||
<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>
|
||||
</summary>
|
||||
<div class="other-content">
|
||||
{{if eq .Lang "es"}}Carnet de conducir tipo {{.CV.Other.DriverLicense | safeHTML}}{{else}}Driving License type {{.CV.Other.DriverLicense | safeHTML}}{{end}}
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
</main>
|
||||
@@ -310,10 +350,14 @@
|
||||
<aside class="cv-sidebar cv-sidebar-right">
|
||||
{{range $index, $category := .SkillsRight}}
|
||||
<section class="sidebar-section">
|
||||
<h3 class="sidebar-title">{{$category.Category}}</h3>
|
||||
<div class="sidebar-content">
|
||||
{{range $category.Items}}<div class="skill-item">{{.}}</div>{{end}}
|
||||
</div>
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="sidebar-title">{{$category.Category}}</h3>
|
||||
</summary>
|
||||
<div class="sidebar-content">
|
||||
{{range $category.Items}}<div class="skill-item">{{.}}</div>{{end}}
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
</aside>
|
||||
|
||||
Reference in New Issue
Block a user