txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add photo, company logos, and short/long CV toggle

Browse Source 
Features:
- Profile photo display (right side, inline with header)
- Company logos for all major employers (8 logos downloaded)
- Short/Long CV toggle for condensed/detailed view
- Short descriptions (1-2 lines) for quick overview
- Experience separators with border lines

Photo Implementation:
- Circular photo (120px) on right side of header
- Placeholder SVG if photo not uploaded
- Instructions in ADDING-YOUR-PHOTO.md
- Photo stored in static/images/profile/

Company Logos:
- Olympic Broadcasting Services, AENA, SAP, Gigya
- Accenture, Everis, Indra, Megabanner
- 40px logos displayed inline with experience
- Auto-hide if logo missing
- Mobile: logos hidden for cleaner layout

Short/Long Toggle:
- Toggle buttons in action bar (Corto/Largo)
- Short mode: shows shortDescription only
- Long mode: shows full responsibilities + technologies
- CSS-based show/hide (no page reload)
- Defaults to short view

Layout Updates:
- Header: text left, photo right, inline alignment
- Experience items: separated by border lines
- Responsive: photo centers on mobile
- Print-optimized: smaller photo in PDF

Data Updates:
- Added shortDescription field to Experience struct
- 13 short descriptions for all positions (EN/ES)
- Added companyLogo field with filename mapping
- JSON updated with all new fields

Tech:
- Pure CSS toggle (no HTMX needed)
- Vanilla JavaScript for button states
- Maintains bilingual support (ES/EN)
This commit is contained in:
juanatsap
2025-10-27 22:32:32 +00:00
parent dab68f34f2
commit cd5d5cff02
17 changed files with 397 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
data/cv-en.json
+34 -13
View File
@@ -35,7 +35,9 @@
"React",
"Node.js",
"API Integration"
]
],
"companyLogo": "olympic-broadcasting.png",
"shortDescription": "SAP CDC solutions for international broadcasting events. Custom implementations and technical guidance."
},
{
"position": "Senior Technical Consultant",
@@ -64,7 +66,9 @@
"highlights": [
"Successfully deployed authentication system for all AENA airports in Spain",
"Managed identity flows for millions of users across web and mobile platforms"
]
],
"companyLogo": "aena.png",
"shortDescription": "Lead Technical Consultant for AENA Airports Authentication System serving millions of passengers across all Spanish airports."
},
{
"position": "Senior Technical Consultant",
@@ -87,7 +91,9 @@
"JavaScript",
"Cloud Platforms",
"Technical Documentation"
]
],
"companyLogo": "sap.png",
"shortDescription": "SAP Customer Data Cloud technical consulting, troubleshooting, and stakeholder education on GDPR compliance."
},
{
"position": "Junior Technical Consultant",
@@ -109,7 +115,9 @@
"JavaScript",
"Customer Support",
"System Monitoring"
]
],
"companyLogo": "gigya.png",
"shortDescription": "Technical support and problem-solving for Gigya platform. System monitoring and training program development."
},
{
"position": "Fullstack Developer",
@@ -130,7 +138,9 @@
"Video Processing",
"Database Design",
"PostgreSQL"
]
],
"companyLogo": "megabanner.png",
"shortDescription": "Full-stack development with video system integration for advertisement inclusion in gas station networks."
},
{
"position": "Fullstack Developer",
@@ -152,7 +162,9 @@
"API Design",
"CI/CD",
"DevOps"
]
],
"companyLogo": "everis.png",
"shortDescription": "API design and automated deployment pipelines. Software testing and scalability implementation."
},
{
"position": "FullStack Developer",
@@ -170,7 +182,9 @@
"JavaScript",
"Redux",
"Webpack"
]
],
"companyLogo": "everis.png",
"shortDescription": "React application development for multiple clients."
},
{
"position": "Fullstack Developer",
@@ -187,7 +201,9 @@
"Java",
"JavaScript",
"Web Development"
]
],
"companyLogo": "indra.png",
"shortDescription": "Project management and customer feedback collection across development stages."
},
{
"position": "Technical Director / Programmer",
@@ -212,7 +228,8 @@
"highlights": [
"Reduced production times by 75% through optimized pipelines",
"Successfully managed technical team and product development"
]
],
"shortDescription": "Technical Director leading development of backend and 5 websites. Reduced production times by 75%."
},
{
"position": "Programmer Analyst (Freelance)",
@@ -230,7 +247,8 @@
"PHP",
"MySQL",
"JavaScript"
]
],
"shortDescription": "WordPress and PHP website development as freelance programmer."
},
{
"position": "Analyst Programmer / Expert Technician",
@@ -248,7 +266,8 @@
"Java",
"System Configuration",
"Technical Support"
]
],
"shortDescription": "Software and hardware configuration, technical problem-solving, and team mentoring."
},
{
"position": "Senior Programmer",
@@ -266,7 +285,8 @@
"Java",
"Search Engine Technology",
"European R&D Projects"
]
],
"shortDescription": "European R&D project for revolutionary search engine development."
},
{
"position": "Junior Programmer",
@@ -285,7 +305,8 @@
"Java Applets",
"Data Visualization",
"Chart Generation"
]
],
"shortDescription": "JAVA development specialized in data chart generation and applet development."
}
],
"education": [
data/cv-es.json
+34 -13
View File
@@ -35,7 +35,9 @@
"React",
"Node.js",
"Integración de APIs"
]
],
"companyLogo": "olympic-broadcasting.png",
"shortDescription": "Soluciones SAP CDC para eventos de transmisión internacional. Implementaciones personalizadas y orientación técnica."
},
{
"position": "Consultor Técnico Senior",
@@ -64,7 +66,9 @@
"highlights": [
"Despliegue exitoso del sistema de autenticación para todos los aeropuertos AENA en España",
"Gestión de flujos de identidad para millones de usuarios en plataformas web y móviles"
]
],
"companyLogo": "aena.png",
"shortDescription": "Consultor Técnico Principal del Sistema de Autenticación de Aeropuertos AENA sirviendo a millones de pasajeros en todos los aeropuertos españoles."
},
{
"position": "Consultor Técnico Senior",
@@ -87,7 +91,9 @@
"JavaScript",
"Plataformas Cloud",
"Documentación Técnica"
]
],
"companyLogo": "sap.png",
"shortDescription": "Consultoría técnica SAP Customer Data Cloud, resolución de problemas y educación de stakeholders en cumplimiento GDPR."
},
{
"position": "Consultor Técnico Junior",
@@ -109,7 +115,9 @@
"JavaScript",
"Soporte al Cliente",
"Monitoreo de Sistemas"
]
],
"companyLogo": "gigya.png",
"shortDescription": "Soporte técnico y resolución de problemas para plataforma Gigya. Monitoreo de sistemas y desarrollo de programas de formación."
},
{
"position": "Desarrollador Fullstack",
@@ -130,7 +138,9 @@
"Procesamiento de Video",
"Diseño de Bases de Datos",
"PostgreSQL"
]
],
"companyLogo": "megabanner.png",
"shortDescription": "Desarrollo full-stack con integración de sistema de video para inclusión de anuncios en redes de estaciones de servicio."
},
{
"position": "Desarrollador Fullstack",
@@ -152,7 +162,9 @@
"Diseño de APIs",
"CI/CD",
"DevOps"
]
],
"companyLogo": "everis.png",
"shortDescription": "Diseño de APIs y pipelines de despliegue automatizados. Testing de software e implementación de escalabilidad."
},
{
"position": "Desarrollador FullStack",
@@ -170,7 +182,9 @@
"JavaScript",
"Redux",
"Webpack"
]
],
"companyLogo": "everis.png",
"shortDescription": "Desarrollo de aplicaciones React para múltiples clientes."
},
{
"position": "Desarrollador Fullstack",
@@ -187,7 +201,9 @@
"Java",
"JavaScript",
"Desarrollo Web"
]
],
"companyLogo": "indra.png",
"shortDescription": "Gestión de proyectos y recopilación de feedback de clientes en diferentes etapas de desarrollo."
},
{
"position": "Director Técnico / Programador",
@@ -212,7 +228,8 @@
"highlights": [
"Reducción del 75% en tiempos de producción mediante pipelines optimizados",
"Gestión exitosa de equipo técnico y desarrollo de productos"
]
],
"shortDescription": "Director Técnico liderando desarrollo de backend y 5 sitios web. Reducción del 75% en tiempos de producción."
},
{
"position": "Analista Programador (Freelance)",
@@ -230,7 +247,8 @@
"PHP",
"MySQL",
"JavaScript"
]
],
"shortDescription": "Desarrollo de sitios web WordPress y PHP como programador freelance."
},
{
"position": "Analista Programador / Técnico Experto",
@@ -248,7 +266,8 @@
"Java",
"Configuración de Sistemas",
"Soporte Técnico"
]
],
"shortDescription": "Configuración de software y hardware, resolución de problemas técnicos y mentoría de equipos."
},
{
"position": "Programador Senior",
@@ -266,7 +285,8 @@
"Java",
"Tecnología de Motores de Búsqueda",
"Proyectos Europeos I+D"
]
],
"shortDescription": "Proyecto europeo I+D para desarrollo de motor de búsqueda revolucionario."
},
{
"position": "Programador Junior",
@@ -285,7 +305,8 @@
"Applets Java",
"Visualización de Datos",
"Generación de Gráficos"
]
],
"shortDescription": "Desarrollo JAVA especializado en generación de gráficos de datos y desarrollo de applets."
}
],
"education": [