Add collapsible sections, restructure menu, and refine sidebar layouts

- Wrapped all CV sections and sidebar sections in <details> tags for collapsibility
- Added Expand All/Collapse All menu options with CV Sections submenu
- Implemented smooth CSS animations for section expansion/collapse using max-height transitions
- Fixed menu item alignment issues (removed extra padding)
- Added dash between company name and duration in experience section
- Moved SAP Technologies and AI-Assisted Development to bottom of right sidebar
- Reordered JavaScript Ecosystem above Go Ecosystem in left sidebar
- Implemented different layouts for left vs right sidebars:
  - Left sidebar: title left-aligned, triangle on right
  - Right sidebar: title right-aligned, triangle on left
- Adjusted sidebar spacing for better visual hierarchy when sections are open/closed
This commit is contained in:
juanatsap
2025-11-09 13:43:29 +00:00
parent 2ce13481d0
commit 31dae9fa19
5 changed files with 439 additions and 142 deletions
+32 -30
View File
@@ -212,7 +212,7 @@
{
"position": "Programmer Analyst (Freelance)",
"company": "TwenTiC + ALTEN",
"companyURL": "https://www.twentic.com/kit-digital/",
"companyURL": "https://www.twentic.com/",
"location": "Barcelona, Spain",
"startDate": "2012-05",
"endDate": "2012-10",
@@ -327,24 +327,16 @@
]
},
{
"category": "SAP Technologies",
"category": "JavaScript Ecosystem",
"proficiency": 5,
"sidebar": "left",
"items": [
"SAP Customer Data Cloud (CDC)",
"SAP Cloud Platform",
"SAP S/4HANA",
"GDPR Compliance & Data Protection"
]
},
{
"category": "AI-Assisted Development",
"proficiency": 5,
"items": [
"AI Development Workflows (Claude Code, Copilot, GPT-4)",
"Agent-Based & Spec-Driven Development",
"Prompt Engineering & AI Integration",
"Automated Code Generation & Documentation",
"OpenAI & Anthropic APIs"
"Node.js & Express",
"React & React Ecosystem",
"Redux/Flux",
"Modern Build Tools (Webpack, Vite, ESBuild)",
"Package Management (npm, pnpm, bun)",
"Testing Frameworks (Jest, Playwright)"
]
},
{
@@ -361,19 +353,6 @@
"Standard Library (net/http, html/template)"
]
},
{
"category": "JavaScript Ecosystem",
"proficiency": 5,
"sidebar": "left",
"items": [
"Node.js & Express",
"React & React Ecosystem",
"Redux/Flux",
"Modern Build Tools (Webpack, Vite, ESBuild)",
"Package Management (npm, pnpm, bun)",
"Testing Frameworks (Jest, Playwright)"
]
},
{
"category": "Frontend Technologies",
"proficiency": 5,
@@ -476,6 +455,29 @@
"Excalidraw",
"GIMP"
]
},
{
"category": "SAP Technologies",
"proficiency": 5,
"sidebar": "right",
"items": [
"SAP Customer Data Cloud (CDC)",
"SAP Cloud Platform",
"SAP S/4HANA",
"GDPR Compliance & Data Protection"
]
},
{
"category": "AI-Assisted Development",
"proficiency": 5,
"sidebar": "right",
"items": [
"AI Development Workflows (Claude Code, Copilot, GPT-4)",
"Agent-Based & Spec-Driven Development",
"Prompt Engineering & AI Integration",
"Automated Code Generation & Documentation",
"OpenAI & Anthropic APIs"
]
}
],
"soft_skills": [
+32 -30
View File
@@ -212,7 +212,7 @@
{
"position": "Analista Programador (Freelance)",
"company": "TwenTiC + ALTEN",
"companyURL": "https://www.twentic.com/kit-digital/",
"companyURL": "https://www.twentic.com/",
"location": "Barcelona, España",
"startDate": "2012-05",
"endDate": "2012-10",
@@ -327,24 +327,16 @@
]
},
{
"category": "Tecnologías SAP",
"category": "Ecosistema JavaScript",
"proficiency": 5,
"sidebar": "left",
"items": [
"SAP Customer Data Cloud (CDC)",
"SAP Cloud Platform",
"SAP S/4HANA",
"Cumplimiento GDPR y Protección de Datos"
]
},
{
"category": "Desarrollo Asistido por IA",
"proficiency": 5,
"items": [
"Flujos de Desarrollo con IA (Claude Code, Copilot, GPT-4)",
"Desarrollo Basado en Agentes y Especificaciones",
"Ingeniería de Prompts e Integración de IA",
"Generación Automática de Código y Documentación",
"APIs OpenAI y Anthropic"
"Node.js y Express",
"React y Ecosistema React",
"Redux/Flux",
"Herramientas de Build Modernas (Webpack, Vite, ESBuild)",
"Gestión de Paquetes (npm, pnpm, bun)",
"Frameworks de Testing (Jest, Playwright)"
]
},
{
@@ -361,19 +353,6 @@
"Biblioteca Estándar (net/http, html/template)"
]
},
{
"category": "Ecosistema JavaScript",
"proficiency": 5,
"sidebar": "left",
"items": [
"Node.js y Express",
"React y Ecosistema React",
"Redux/Flux",
"Herramientas de Build Modernas (Webpack, Vite, ESBuild)",
"Gestión de Paquetes (npm, pnpm, bun)",
"Frameworks de Testing (Jest, Playwright)"
]
},
{
"category": "Tecnologías Frontend",
"proficiency": 5,
@@ -476,6 +455,29 @@
"Excalidraw",
"GIMP"
]
},
{
"category": "Tecnologías SAP",
"proficiency": 5,
"sidebar": "right",
"items": [
"SAP Customer Data Cloud (CDC)",
"SAP Cloud Platform",
"SAP S/4HANA",
"Cumplimiento GDPR y Protección de Datos"
]
},
{
"category": "Desarrollo Asistido por IA",
"proficiency": 5,
"sidebar": "right",
"items": [
"Flujos de Desarrollo con IA (Claude Code, Copilot, GPT-4)",
"Desarrollo Basado en Agentes y Especificaciones",
"Ingeniería de Prompts e Integración de IA",
"Generación Automática de Código y Documentación",
"APIs OpenAI y Anthropic"
]
}
],
"soft_skills": [