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:
juanatsap
2025-10-27 22:32:32 +00:00
parent dab68f34f2
commit cd5d5cff02
17 changed files with 397 additions and 43 deletions
+38
View File
@@ -42,6 +42,19 @@
</button>
</div>
<div class="cv-length-toggle">
<button
class="length-btn active"
onclick="toggleCVLength('short')">
{{if eq .Lang "es"}}Corto{{else}}Short{{end}}
</button>
<button
class="length-btn"
onclick="toggleCVLength('long')">
{{if eq .Lang "es"}}Largo{{else}}Long{{end}}
</button>
</div>
<div class="export-actions">
<button
class="export-btn"
@@ -68,5 +81,30 @@
<p>© {{.CV.Meta.LastUpdated}} {{.CV.Personal.Name}} |
{{if eq .Lang "es"}}Última actualización{{else}}Last updated{{end}}: {{.CV.Meta.LastUpdated}}</p>
</footer>
<script>
function toggleCVLength(length) {
// Update button states
document.querySelectorAll('.length-btn').forEach(btn => {
btn.classList.remove('active');
});
event.target.classList.add('active');
// Toggle visibility
const paper = document.querySelector('.cv-paper');
if (length === 'short') {
paper.classList.add('cv-short');
paper.classList.remove('cv-long');
} else {
paper.classList.add('cv-long');
paper.classList.remove('cv-short');
}
}
// Initialize with short version
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.cv-paper').classList.add('cv-short');
});
</script>
</body>
</html>