Files

T

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

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)

2025-10-27 22:32:32 +00:00

1.9 KiB

Raw Blame History

Cómo Añadir tu Foto al CV

📸 Paso 1: Prepara tu Foto

Busca una foto profesional (preferiblemente tipo LinkedIn)
Formato recomendado: JPG o PNG
Tamaño: Al menos 300x300 píxeles (cuadrada es mejor)
Calidad: Fondo neutro, buena iluminación

📁 Paso 2: Guarda la Foto

Guarda tu foto en:

static/images/profile/photo.jpg

Puedes usar cualquiera de estos nombres:

photo.jpg ✅ (recomendado)
photo.png (cambiar en template)
profile.jpg (cambiar en template)

🔄 Paso 3: Actualizar (si usas otro nombre)

Si tu foto se llama diferente a photo.jpg, edita templates/cv-content.html:

<!-- Cambiar esta línea: -->
<img src="/static/images/profile/photo.jpg" ...>

<!-- Por ejemplo, si tu foto es profile.png: -->
<img src="/static/images/profile/profile.png" ...>

🖼️ Descargar desde LinkedIn

Opción 1: Manualmente

Abre tu perfil de LinkedIn
Click derecho en tu foto → "Guardar imagen como..."
Guárdala como photo.jpg en static/images/profile/

Opción 2: Desde tu sitio actual

Si ya tienes tu foto en https://juan.andres.morenoyrubio.com:

cd static/images/profile
# Abre el inspector del navegador, busca tu foto, y copia la URL
curl -o photo.jpg "URL_DE_TU_FOTO"

✅ Verificar

Reinicia el servidor: ./cv-server
Abre http://localhost:8080
Deberías ver tu foto en la esquina superior izquierda

Si no funciona, verás un placeholder gris con el texto "Add your photo".

🎨 Ajustar el Tamaño (Opcional)

La foto se muestra como un círculo de 120px. Para cambiar el tamaño, edita static/css/main.css:

.cv-photo {
    width: 150px;  /* Cambiar aquí */
    height: 150px; /* Y aquí */
    border-radius: 50%;
}

Nota: El template ya incluye un fallback automático al placeholder si la foto no existe, así que el sitio funcionará con o sin foto.

1.9 KiB Raw Blame History