juanatsap
bdf6a863a8
Comprehensive update to achieve feature parity with old React implementation. ## Data Layer (Backend) **Updated Go Models** (internal/models/cv.go): - Added Course struct (title, institution, location, date, duration, description) - Added Reference struct (title, URL, type) - Added Language.Detail field for proficiency descriptions - Added CV.Courses and CV.References arrays **Complete Data Population** (data/cv-es.json): - Added 6 NEW skill categories (42 items): * Lenguajes de Programación (11 items: Java, Groovy, PHP, XML, XSLT, ActionScript, Shell, C, C++) * Frameworks PHP (4 items: Yii, Zend, WordPress API, Joomla API) * Frameworks Java (8 items: Play!, Struts, Spring, Hibernate, Ibatis, Magnolia CMS, XWiki, TESEO) * Servidores de Aplicaciones (9 items: Apache, WAMP, MAMP, Tomcat, JBoss, Resin, Jetty, Websphere, Weblogic) * CMS y Entornos (6 items: Joomla, WordPress, RapidWeaver, Servoy, WebRatio, Magnolia) * Herramientas de Diseño (4 items: Corel, Photoshop, Illustrator, GIMP) - Updated existing categories with missing items: * Ecosistema JavaScript: +Redux, Flux, Gulp, Grunt * Desarrollo Web: +JSP, PHP, Handlebars, Moustache, Velocity, Freemarker, jQuery, mooTools, DOM, Ajax, SEO, WebServices * Bases de Datos: +Hypersonic, Dominio de SQL * Soft Skills: +5 team management items - Added Catalan language (Comprensión, Level 2) - Added detail field to all languages (oral/written breakdown) - Added 4 courses: * Servoy World 2011 (Amsterdam, 3 días) * Formador de Formadores (FOREM, 150 horas) * Windows 2003 Server (Cámara de Comercio, 80 horas) * I Jornada Extremeña (Universidad, 3 días) - Added 8 references: * Recommendation letters, portfolios, profiles, CVs - Fixed driver's license: Tipo C → Tipo B ## Presentation Layer (Frontend) **Template Updates** (templates/cv-content.html, templates/index.html): - Skills section: Now renders ALL 13 categories dynamically - Languages section: Added detail field display - NEW Courses section: Full course details with institutions - NEW References section: Clickable links with security attributes - NEW Other section: Driver's license display - Responsive grid layout maintained - Conditional rendering (sections only show if data exists) **Styling** (static/css/main.css): - Added .course-item, .course-desc styles - Added .reference-item, .ref-type styles - Added .language-detail styles - Maintained consistent sidebar section styling ## Impact **Before**: 7 skill categories, 3 languages, 0 courses, 0 references **After**: 13 skill categories (+6), 4 languages (+1), 4 courses (+4), 8 references (+8) **Total**: 90+ new data points added Sidebar now matches original React CV feature-for-feature.
275 lines
12 KiB
HTML
275 lines
12 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">
|
||
|
||
<!-- Primary Meta Tags -->
|
||
<title>{{.CV.Personal.Name}} - {{if eq .Lang "es"}}Curriculum Vitae{{else}}Curriculum Vitae{{end}}</title>
|
||
<meta name="title" content="{{.CV.Personal.Name}} - {{if eq .Lang "es"}}CV Profesional{{else}}Professional CV{{end}}">
|
||
<meta name="description" content="{{.CV.Personal.Title}} | {{if eq .Lang "es"}}18 años de experiencia en desarrollo web, SAP CDC, React, Node.js, Go, HTMX y desarrollo asistido por IA{{else}}18 years of experience in web development, SAP CDC, React, Node.js, Go, HTMX and AI-assisted development{{end}}">
|
||
<meta name="keywords" content="{{if eq .Lang "es"}}CV, Curriculum Vitae, {{.CV.Personal.Name}}, Desarrollador FullStack, SAP CDC, React, Node.js, Go, HTMX, IA, Desarrollo Web, Consultor Técnico{{else}}CV, Resume, {{.CV.Personal.Name}}, FullStack Developer, SAP CDC, React, Node.js, Go, HTMX, AI, Web Development, Technical Consultant{{end}}">
|
||
<meta name="author" content="{{.CV.Personal.Name}}">
|
||
<meta name="robots" content="index, follow">
|
||
<link rel="canonical" href="{{.CV.Personal.Website}}">
|
||
|
||
<!-- Open Graph / Facebook -->
|
||
<meta property="og:type" content="profile">
|
||
<meta property="og:url" content="{{.CV.Personal.Website}}">
|
||
<meta property="og:title" content="{{.CV.Personal.Name}} - {{if eq .Lang "es"}}CV Profesional{{else}}Professional CV{{end}}">
|
||
<meta property="og:description" content="{{.CV.Personal.Title}} | {{if eq .Lang "es"}}Consultor Técnico Senior con 18 años de experiencia{{else}}Senior Technical Consultant with 18 years of experience{{end}}">
|
||
<meta property="og:image" content="{{.CV.Personal.Website}}/static/images/profile.jpg">
|
||
<meta property="og:locale" content="{{if eq .Lang "es"}}es_ES{{else}}en_US{{end}}">
|
||
<meta property="og:site_name" content="{{.CV.Personal.Name}}">
|
||
<meta property="profile:first_name" content="Juan Andrés">
|
||
<meta property="profile:last_name" content="Moreno Rubio">
|
||
<meta property="profile:username" content="txeo">
|
||
|
||
<!-- Social Media Card (Generic) -->
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:title" content="{{.CV.Personal.Name}} - {{if eq .Lang "es"}}CV Profesional{{else}}Professional CV{{end}}">
|
||
<meta name="twitter:description" content="{{.CV.Personal.Title}}">
|
||
<meta name="twitter:image" content="{{.CV.Personal.Website}}/static/images/profile.jpg">
|
||
|
||
<!-- HTMX Configuration -->
|
||
<meta name="htmx-config" content='{"timeout":5000,"defaultSwapStyle":"innerHTML","defaultSwapDelay":0,"defaultSettleDelay":20}'>
|
||
|
||
<!-- HTMX with SRI (Subresource Integrity) -->
|
||
<script src="https://unpkg.com/htmx.org@1.9.10"
|
||
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
|
||
crossorigin="anonymous"></script>
|
||
|
||
<!-- CSS -->
|
||
<link rel="stylesheet" href="/static/css/main.css">
|
||
<link rel="stylesheet" href="/static/css/print.css" media="print">
|
||
|
||
<!-- Fonts with Preload -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
|
||
<!-- Structured Data (JSON-LD) -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Person",
|
||
"name": "{{.CV.Personal.Name}}",
|
||
"jobTitle": "{{.CV.Personal.Title}}",
|
||
"url": "{{.CV.Personal.Website}}",
|
||
"email": "{{.CV.Personal.Email}}",
|
||
"telephone": "{{.CV.Personal.Phone}}",
|
||
"address": {
|
||
"@type": "PostalAddress",
|
||
"addressLocality": "{{.CV.Personal.Location}}"
|
||
},
|
||
"sameAs": [
|
||
"{{.CV.Personal.LinkedIn}}",
|
||
"{{.CV.Personal.GitHub}}",
|
||
"{{.CV.Personal.Behance}}"
|
||
],
|
||
"alumniOf": {
|
||
"@type": "EducationalOrganization",
|
||
"name": "Universidad de Extremadura"
|
||
},
|
||
"knowsAbout": [
|
||
"Web Development",
|
||
"SAP Customer Data Cloud",
|
||
"React",
|
||
"Node.js",
|
||
"Go",
|
||
"HTMX",
|
||
"AI-Assisted Development",
|
||
"Full Stack Development"
|
||
],
|
||
"worksFor": {
|
||
"@type": "Organization",
|
||
"name": "Olympic Broadcasting Services"
|
||
}
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<!-- Single Black Bar with Everything -->
|
||
<div class="action-bar no-print" role="navigation" aria-label="Language and export controls">
|
||
<div class="action-bar-content">
|
||
<!-- Left: Language buttons -->
|
||
<div class="language-toggle" role="group" aria-label="Language selection">
|
||
<button
|
||
class="lang-btn {{if eq .Lang "en"}}active{{end}}"
|
||
hx-get="/cv?lang=en"
|
||
hx-target="#cv-content"
|
||
hx-swap="innerHTML swap:200ms settle:200ms"
|
||
hx-push-url="/?lang=en"
|
||
hx-indicator="#loading"
|
||
aria-label="Switch to English"
|
||
aria-pressed="{{if eq .Lang "en"}}true{{else}}false{{end}}">
|
||
English
|
||
</button>
|
||
<button
|
||
class="lang-btn {{if eq .Lang "es"}}active{{end}}"
|
||
hx-get="/cv?lang=es"
|
||
hx-target="#cv-content"
|
||
hx-swap="innerHTML swap:200ms settle:200ms"
|
||
hx-push-url="/?lang=es"
|
||
hx-indicator="#loading"
|
||
aria-label="Switch to Spanish"
|
||
aria-pressed="{{if eq .Lang "es"}}true{{else}}false{{end}}">
|
||
Español
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Center: CV Length Toggle -->
|
||
<div class="cv-length-toggle">
|
||
<button
|
||
class="length-btn active"
|
||
onclick="toggleCVLength('short')"
|
||
aria-label="{{if eq .Lang "es"}}Ver CV corto{{else}}View short CV{{end}}">
|
||
{{if eq .Lang "es"}}Corto{{else}}Short{{end}}
|
||
</button>
|
||
<button
|
||
class="length-btn"
|
||
onclick="toggleCVLength('long')"
|
||
aria-label="{{if eq .Lang "es"}}Ver CV largo{{else}}View long CV{{end}}">
|
||
{{if eq .Lang "es"}}Largo{{else}}Long{{end}}
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Right: Action buttons -->
|
||
<div class="action-buttons">
|
||
<a
|
||
class="export-btn"
|
||
href="/export/pdf?lang={{.Lang}}"
|
||
download
|
||
aria-label="{{if eq .Lang "es"}}Descargar PDF del CV{{else}}Download CV as PDF{{end}}">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="display: inline-block; vertical-align: middle;">
|
||
<path d="M8.5 11.5l3.5-3.5h-2.5v-6h-2v6h-2.5l3.5 3.5zm-6.5 2.5v2h12v-2h-12z"/>
|
||
</svg>
|
||
{{if eq .Lang "es"}}Descargar PDF{{else}}Download as PDF{{end}}
|
||
</a>
|
||
<button
|
||
class="export-btn"
|
||
onclick="window.print()"
|
||
aria-label="{{if eq .Lang "es"}}Imprimir CV{{else}}Print CV{{end}}">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="display: inline-block; vertical-align: middle;">
|
||
<path d="M14 4h-3v-3h-6v3h-3c-1.1 0-2 0.9-2 2v5h3v4h8v-4h3v-5c0-1.1-0.9-2-2-2zm-7-2h2v2h-2v-2zm5 11h-8v-5h8v5zm2-7c-0.552 0-1-0.448-1-1s0.448-1 1-1 1 0.448 1 1-0.448 1-1 1z"/>
|
||
</svg>
|
||
{{if eq .Lang "es"}}Imprimir{{else}}Print Friendly{{end}}
|
||
</button>
|
||
</div>
|
||
|
||
<span id="loading"
|
||
class="htmx-indicator"
|
||
role="status"
|
||
aria-live="polite"
|
||
aria-label="Loading">
|
||
<span class="loader"></span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CV Content Container -->
|
||
<div class="cv-container">
|
||
<main id="cv-content"
|
||
class="cv-paper"
|
||
role="main"
|
||
aria-live="polite">
|
||
{{template "cv-content.html" .}}
|
||
</main>
|
||
</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>
|
||
|
||
<!-- Error Toast -->
|
||
<div id="error-toast" class="error-toast no-print" role="alert" aria-live="assertive" style="display: none;">
|
||
<span class="error-icon">⚠️</span>
|
||
<span id="error-message"></span>
|
||
<button onclick="this.parentElement.style.display='none'" aria-label="Close error message" class="error-close">×</button>
|
||
</div>
|
||
|
||
<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');
|
||
});
|
||
|
||
// Error handling utility
|
||
function showError(message) {
|
||
const errorToast = document.getElementById('error-toast');
|
||
const errorMessage = document.getElementById('error-message');
|
||
errorMessage.textContent = message;
|
||
errorToast.style.display = 'flex';
|
||
|
||
// Auto-hide after 5 seconds
|
||
setTimeout(() => {
|
||
errorToast.style.display = 'none';
|
||
}, 5000);
|
||
}
|
||
|
||
// HTMX Global Error Handlers
|
||
document.body.addEventListener('htmx:responseError', function(evt) {
|
||
console.error('HTMX Response Error:', evt.detail);
|
||
const lang = document.documentElement.lang;
|
||
const message = lang === 'es'
|
||
? 'Error al cargar el contenido. Por favor, inténtelo de nuevo.'
|
||
: 'Failed to load content. Please try again.';
|
||
showError(message);
|
||
});
|
||
|
||
document.body.addEventListener('htmx:sendError', function(evt) {
|
||
console.error('HTMX Send Error:', evt.detail);
|
||
const lang = document.documentElement.lang;
|
||
const message = lang === 'es'
|
||
? 'Error de conexión. Verifique su conexión a internet.'
|
||
: 'Connection error. Please check your internet connection.';
|
||
showError(message);
|
||
});
|
||
|
||
document.body.addEventListener('htmx:timeout', function(evt) {
|
||
console.error('HTMX Timeout:', evt.detail);
|
||
const lang = document.documentElement.lang;
|
||
const message = lang === 'es'
|
||
? 'La solicitud tardó demasiado. Por favor, inténtelo de nuevo.'
|
||
: 'Request timed out. Please try again.';
|
||
showError(message);
|
||
});
|
||
|
||
document.body.addEventListener('htmx:afterSwap', function(evt) {
|
||
// Smooth scroll to top on language change
|
||
if (evt.detail.target.id === 'cv-content') {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}
|
||
});
|
||
|
||
// Log successful swaps for debugging
|
||
document.body.addEventListener('htmx:afterRequest', function(evt) {
|
||
if (evt.detail.successful) {
|
||
console.log('HTMX request successful:', evt.detail.pathInfo.requestPath);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|