feat: add collapsible accordion for sidebars on mobile
PROBLEM: - Left and right sidebars occupy too much space on mobile - User wants curriculum (main content) prioritized on mobile - Sidebars should be collapsed by default, expand only on user interaction SOLUTION: HTML Changes (cv-content.html): - Wrapped each sidebar in accordion structure - Added .sidebar-accordion-header with brain icon, title, and chevron * Left sidebar: "Technical Skills" / "Competencias Técnicas" * Right sidebar: "More Skills" / "Más Competencias" - Added .sidebar-accordion-content wrapper around sidebar sections - Added onclick="toggleSidebar(this)" handler CSS Changes (main.css): Desktop (default): - .sidebar-accordion-header: display: none (hidden on desktop) - .sidebar-accordion-content: always visible (no restrictions) Mobile @ 900px: - .sidebar-accordion-header: display: flex, styled as clickable bar * Padding: 1rem 1.5rem * Background: var(--sidebar-gray) with hover effects * Font: 700 weight, 1.1rem size * Chevron rotates 180deg when active - .sidebar-accordion-content: collapsed by default * max-height: 0 (collapsed) * max-height: 5000px when .active (expanded) * Smooth transitions: 0.3s ease-out (close) / 0.5s ease-in (open) * Padding: 0 when closed, 1.5rem when open - .cv-sidebar: padding: 0 (accordion header handles padding) JavaScript Changes (index.html): - Added toggleSidebar(header) function * Toggles .active class on header and content * Smooth expand/collapse animation via CSS max-height transition DATA Changes (cv-en.json, cv-es.json): - Updated summary with more professional, experience-focused description - Emphasizes 18+ years experience, international clients, practical solutions BEHAVIOR: - Desktop: Sidebars always visible, no accordion headers - Mobile: Sidebars collapsed by default showing only header bar - Click header: Expands sidebar with smooth animation - Click again: Collapses sidebar - Main content prioritized and always visible - Each sidebar toggles independently
This commit is contained in:
juanatsap
+40
-26
@@ -19,18 +19,25 @@
|
||||
<div class="page-content">
|
||||
<!-- Left Sidebar - Skills (first half) -->
|
||||
<aside class="cv-sidebar cv-sidebar-left">
|
||||
{{range $index, $category := .SkillsLeft}}
|
||||
<section class="sidebar-section">
|
||||
<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}}
|
||||
<div class="sidebar-accordion-header" onclick="toggleSidebar(this)">
|
||||
<iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
|
||||
<span>{{if eq .Lang "es"}}Competencias Técnicas{{else}}Technical Skills{{end}}</span>
|
||||
<iconify-icon icon="mdi:chevron-down" width="20" height="20" class="chevron"></iconify-icon>
|
||||
</div>
|
||||
<div class="sidebar-accordion-content">
|
||||
{{range $index, $category := .SkillsLeft}}
|
||||
<section class="sidebar-section">
|
||||
<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}}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area - Page 1 -->
|
||||
@@ -81,9 +88,9 @@
|
||||
</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.
|
||||
Desarrollador full-stack con experiencia en Go, Node.js, React y HTMX para aplicaciones modernas, además de conocimientos en Java y PHP para proyectos legacy. He trabajado en más de 30 sitios web para diversos clientes, desde e-commerce y plataformas empresariales hasta sistemas de autenticación que gestionan millones de usuarios. Familiarizado con flujos de trabajo asistidos por IA y gestión de infraestructura (Linux, Docker, CI/CD). Me adapto bien tanto al trabajo independiente como colaborativo en equipos internacionales.
|
||||
{{else}}
|
||||
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.
|
||||
Full-stack developer with experience in Go, Node.js, React, and HTMX for modern applications, plus Java and PHP knowledge for legacy projects. I've worked on over 30 websites for diverse clients, from e-commerce and enterprise platforms to authentication systems managing millions of users. Familiar with AI-assisted development workflows and infrastructure management (Linux, Docker, CI/CD). I adapt well to both independent work and collaborative teams across different countries.
|
||||
{{end}}
|
||||
</p>
|
||||
</details>
|
||||
@@ -357,18 +364,25 @@
|
||||
|
||||
<!-- Right Sidebar - Skills (second half) -->
|
||||
<aside class="cv-sidebar cv-sidebar-right">
|
||||
{{range $index, $category := .SkillsRight}}
|
||||
<section class="sidebar-section">
|
||||
<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}}
|
||||
<div class="sidebar-accordion-header" onclick="toggleSidebar(this)">
|
||||
<iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
|
||||
<span>{{if eq .Lang "es"}}Más Competencias{{else}}More Skills{{end}}</span>
|
||||
<iconify-icon icon="mdi:chevron-down" width="20" height="20" class="chevron"></iconify-icon>
|
||||
</div>
|
||||
<div class="sidebar-accordion-content">
|
||||
{{range $index, $category := .SkillsRight}}
|
||||
<section class="sidebar-section">
|
||||
<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}}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user