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
juanatsap
04fdae2347