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": "Full-stack developer specializing in modern web technologies: Go, Node.js, React, and HTMX. Frontend expert with strong backend and VPS infrastructure experience, including CI/CD pipelines. Applying AI methodologies to software engineering for enhanced productivity and code quality. Problem solver delivering tailored solutions for diverse client needs, with proven experience across over 40 national and international clients. Effective working independently or in teams.",
"summary": "Developer with 18+ years building web applications for international clients, from Olympic broadcasting platforms to airport authentication systems serving millions of users. I focus on finding practical solutions that balance modern approaches with proven reliability. Comfortable working across the full stack—from user interfaces to server infrastructure—and adapting to different team environments, whether collaborating remotely with international teams or working independently on complete projects.",
"experience": [
{
"position": "Senior SAP Technical Consultant",
+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",