juanatsap
cd5d5cff02
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)
73 lines
1.9 KiB
Markdown
73 lines
1.9 KiB
Markdown
# 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.
|