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)
This commit is contained in:
@@ -0,0 +1,72 @@
|
||||
# Cómo Añadir tu Foto al CV
|
||||
|
||||
## 📸 Paso 1: Prepara tu Foto
|
||||
|
||||
1. **Busca una foto profesional** (preferiblemente tipo LinkedIn)
|
||||
2. **Formato recomendado**: JPG o PNG
|
||||
3. **Tamaño**: Al menos 300x300 píxeles (cuadrada es mejor)
|
||||
4. **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`:
|
||||
|
||||
```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
|
||||
1. Abre tu perfil de LinkedIn
|
||||
2. Click derecho en tu foto → "Guardar imagen como..."
|
||||
3. 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:
|
||||
|
||||
```bash
|
||||
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
|
||||
|
||||
1. Reinicia el servidor: `./cv-server`
|
||||
2. Abre http://localhost:8080
|
||||
3. 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`:
|
||||
|
||||
```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.
|
||||
Reference in New Issue
Block a user