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)
111 lines
3.9 KiB
HTML
111 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{if eq .Lang "es"}}es{{else}}en{{end}}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="{{.CV.Personal.Name}} - {{.CV.Personal.Title}}">
|
|
<meta name="keywords" content="CV, Resume, {{.CV.Personal.Name}}, Developer, SAP, AI">
|
|
<title>{{.CV.Personal.Name}} - Curriculum Vitae</title>
|
|
|
|
<!-- HTMX -->
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" href="/static/css/main.css">
|
|
<link rel="stylesheet" href="/static/css/print.css" media="print">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<!-- Language & Export Bar (hidden in print) -->
|
|
<div class="action-bar no-print">
|
|
<div class="action-bar-content">
|
|
<div class="language-toggle">
|
|
<button
|
|
class="lang-btn {{if eq .Lang "en"}}active{{end}}"
|
|
hx-get="/cv?lang=en"
|
|
hx-target="#cv-content"
|
|
hx-swap="innerHTML"
|
|
hx-indicator="#loading">
|
|
🇬🇧 English
|
|
</button>
|
|
<button
|
|
class="lang-btn {{if eq .Lang "es"}}active{{end}}"
|
|
hx-get="/cv?lang=es"
|
|
hx-target="#cv-content"
|
|
hx-swap="innerHTML"
|
|
hx-indicator="#loading">
|
|
🇪🇸 Español
|
|
</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"
|
|
onclick="window.print()">
|
|
📄 {{if eq .Lang "es"}}Descargar PDF{{else}}Download PDF{{end}}
|
|
</button>
|
|
</div>
|
|
|
|
<span id="loading" class="htmx-indicator">
|
|
<span class="loader"></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CV Content Container -->
|
|
<div class="cv-container">
|
|
<div id="cv-content" class="cv-paper">
|
|
{{template "cv-content.html" .}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer (hidden in print) -->
|
|
<footer class="no-print">
|
|
<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>
|