From 04fdae2347a6ed11658b1f66994b7250daa816c7 Mon Sep 17 00:00:00 2001 From: juanatsap Date: Mon, 10 Nov 2025 18:16:54 +0000 Subject: [PATCH] feat: add collapsible accordion for sidebars on mobile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- data/cv-en.json | 2 +- data/cv-es.json | 2 +- static/css/main.css | 59 +++++++++++++++++++++++++++++++++- templates/cv-content.html | 66 ++++++++++++++++++++++++--------------- templates/index.html | 16 ++++++++++ 5 files changed, 116 insertions(+), 29 deletions(-) diff --git a/data/cv-en.json b/data/cv-en.json index b11523f..961f527 100644 --- a/data/cv-en.json +++ b/data/cv-en.json @@ -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", diff --git a/data/cv-es.json b/data/cv-es.json index 8c51a33..4c89875 100644 --- a/data/cv-es.json +++ b/data/cv-es.json @@ -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", diff --git a/static/css/main.css b/static/css/main.css index 459acb3..3c970d6 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -569,6 +569,15 @@ iconify-icon { font-size: 0.9rem; } +/* Sidebar Accordion - Hidden on desktop, visible on mobile */ +.sidebar-accordion-header { + display: none; +} + +.sidebar-accordion-content { + /* Always visible on desktop */ +} + .sidebar-section { margin-bottom: 2rem; } @@ -1933,7 +1942,55 @@ a:focus { position: static !important; grid-column: unset; grid-row: unset; - padding: 2rem 1.5rem; + padding: 0 !important; + } + + /* ========== Sidebar Accordion on Mobile ========== */ + .sidebar-accordion-header { + display: flex !important; + align-items: center; + gap: 0.75rem; + padding: 1rem 1.5rem; + background: var(--sidebar-gray); + cursor: pointer; + user-select: none; + border-bottom: 2px solid rgba(0, 0, 0, 0.1); + transition: background-color 0.2s ease; + } + + .sidebar-accordion-header:hover { + background: #c5c5c5; + } + + .sidebar-accordion-header:active { + background: #b8b8b8; + } + + .sidebar-accordion-header span { + font-weight: 700; + font-size: 1.1rem; + flex: 1; + } + + .sidebar-accordion-header .chevron { + transition: transform 0.3s ease; + } + + .sidebar-accordion-header.active .chevron { + transform: rotate(180deg); + } + + .sidebar-accordion-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease-out; + padding: 0 1.5rem; + } + + .sidebar-accordion-content.active { + max-height: 5000px; + transition: max-height 0.5s ease-in; + padding: 1.5rem 1.5rem 0.5rem 1.5rem; } .page-1 .cv-main, diff --git a/templates/cv-content.html b/templates/cv-content.html index 75ef2f4..2a5d6bb 100644 --- a/templates/cv-content.html +++ b/templates/cv-content.html @@ -19,18 +19,25 @@
@@ -81,9 +88,9 @@

{{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}}

@@ -357,18 +364,25 @@
diff --git a/templates/index.html b/templates/index.html index a4dfbe0..1477c57 100644 --- a/templates/index.html +++ b/templates/index.html @@ -503,6 +503,22 @@ // Flag to keep header visible after navigation let keepHeaderVisible = false; + // Toggle sidebar accordion (mobile only) + function toggleSidebar(header) { + const content = header.nextElementSibling; + const isActive = header.classList.contains('active'); + + if (isActive) { + // Close + header.classList.remove('active'); + content.classList.remove('active'); + } else { + // Open + header.classList.add('active'); + content.classList.add('active'); + } + } + // Expand all sections function expandAllSections(event) { event.preventDefault();