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
2025-11-10 18:16:54 +00:00
parent e211f78c64
commit 04fdae2347
5 changed files with 116 additions and 29 deletions
+1 -1
View File
@@ -14,7 +14,7 @@
"website": "https://juan.andres.morenoyrubio.com",
"photo": "/static/images/profile.jpg"
},
"summary": "Desarrollador full-stack especializado en tecnologías web modernas: Go, Node.js, React y HTMX. Experto en front-end con sólida experiencia en back-end e infraestructura VPS, incluyendo pipelines CI/CD. Aplicando metodologías de IA en ingeniería de software para mejorar productividad y calidad del código. Capacidad de aportar soluciones adaptadas a cada cliente, con experiencia demostrada en más de 40 clientes nacionales e internacionales. Eficaz trabajando solo o en equipo.",
"summary": "Desarrollador con más de 18 años construyendo aplicaciones web para clientes internacionales, desde plataformas de broadcasting olímpico hasta sistemas de autenticación aeroportuaria que sirven a millones de usuarios. Me enfoco en encontrar soluciones prácticas que equilibren enfoques modernos con fiabilidad probada. Cómodo trabajando en todo el stack—desde interfaces de usuario hasta infraestructura de servidores—y adaptándome a diferentes entornos de equipo, ya sea colaborando remotamente con equipos internacionales o trabajando de forma independiente en proyectos completos.",
"experience": [
{
"position": "Consultor Técnico Senior SAP",