juanatsap
27c2f4b44f
Experience Section Improvements: - Increased company logo size from 48px to 64px - Added default office building icon for companies without logos - Increased spacing between entries (2.5rem margin, 2rem padding) - Added visible separator lines (2px solid #ddd) - Made dates bold (weight: 600) and larger (1.05rem) - Changed date color to #555 for better contrast Dynamic Duration Calculation: - Added automatic years/months calculation for each position - Format: "(4 years 10 months)", "(2 years)", "(6 months)" - Smart pluralization in English and Spanish - Handles current positions (calculates to today) - Added Duration field to Experience model Iconify Integration: - Added Iconify library (v3.1.1) for icon management - Replaced EN/ES text with round flag icons (circle-flags:us, circle-flags:es) - Updated CV site icon to mdi:file-account - Replaced toggle text with intuitive icons: * Short/Long: mdi:file-document-outline / mdi:file-document-multiple-outline * Logos: mdi:image-off-outline / mdi:image-multiple-outline - Default company icon: mdi:office-building (64x64px, light gray background) Logo Display: - Logos now show by default (toggle checked on page load) - Toggle controls icon visibility - Consistent spacing with default icon placeholder Files modified: - internal/handlers/cv.go: Added calculateDuration() function - internal/models/cv.go: Added Duration field to Experience struct - templates/index.html: Iconify integration, flag icons, toggle icons - templates/cv-content.html: Duration display, default icon logic - static/css/main.css: Bold dates, larger font sizes - static/css/logo-toggle.css: Icon styling, separator lines, spacing
263 lines
13 KiB
HTML
263 lines
13 KiB
HTML
<!-- PAGE 1 -->
|
|
<div class="cv-page page-1">
|
|
<!-- Professional Title Badges - Full Width Top Bar -->
|
|
<div class="cv-title-badges-header">
|
|
<span class="title-badge">{{if eq .Lang "es"}}ANALISTA{{else}}ANALYST{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">{{if eq .Lang "es"}}CONSULTOR TÉCNICO{{else}}TECHNICAL CONSULTANT{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">NODEJS + REACTJS {{if eq .Lang "es"}}DESARROLLADOR{{else}}DEVELOPER{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">WEB {{if eq .Lang "es"}}DESARROLLADOR{{else}}DEVELOPER{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">GO + HTMX {{if eq .Lang "es"}}DESARROLLADOR{{else}}DEVELOPER{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">PHP {{if eq .Lang "es"}}DESARROLLADOR{{else}}DEVELOPER{{end}}</span>
|
|
</div>
|
|
|
|
<!-- Page 1 Content Grid: Left Sidebar + Main Content -->
|
|
<div class="page-content">
|
|
<!-- Left Sidebar - Skills (first half) -->
|
|
<aside class="cv-sidebar cv-sidebar-left">
|
|
{{range $index, $category := .SkillsLeft}}
|
|
<section class="sidebar-section">
|
|
<h3 class="sidebar-title">{{$category.Category}}</h3>
|
|
<div class="sidebar-content">
|
|
{{range $category.Items}}<div class="skill-item">{{.}}</div>{{end}}
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
</aside>
|
|
|
|
<!-- Main Content Area - Page 1 -->
|
|
<main class="cv-main">
|
|
<!-- Header with Name and Photo -->
|
|
<div class="cv-header">
|
|
<div class="cv-header-content">
|
|
<div class="cv-header-left">
|
|
<h1 class="cv-name">{{.CV.Personal.Name}}</h1>
|
|
<p class="years-experience">{{.YearsOfExperience}} {{if eq .Lang "es"}}años de experiencia{{else}}years of experience{{end}}</p>
|
|
<!-- Intro/Excerpt Text - No section heading, just the text -->
|
|
<div class="intro-text">{{.CV.Summary}}</div>
|
|
</div>
|
|
<div class="cv-photo">
|
|
<img src="/static/images/profile/photo.jpg" alt="{{.CV.Personal.Name}}" onerror="this.src='/static/images/profile/placeholder.svg'">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Education -->
|
|
<section class="cv-section">
|
|
<h3 class="section-title">{{if eq .Lang "es"}}Formación{{else}}Training{{end}}</h3>
|
|
{{range .CV.Education}}
|
|
<div class="education-item">
|
|
<strong>{{.Degree}}</strong> ({{.StartDate}}-{{.EndDate}}) {{if eq $.Lang "es"}}obtenido de{{else}}obtained from the{{end}} <strong>{{.Institution}}</strong> ({{.Location}})
|
|
</div>
|
|
{{end}}
|
|
</section>
|
|
|
|
<!-- Skills Summary -->
|
|
<section class="cv-section">
|
|
<h3 class="section-title">{{if eq .Lang "es"}}Competencias{{else}}Skills{{end}}</h3>
|
|
<p class="summary-text">
|
|
{{if eq .Lang "es"}}
|
|
Amplio conocimiento en entornos web, tanto J2EE como PHP. Experto en tecnologías front-end, aunque con considerable experiencia en sistemas back-end. Receptivo al aprendizaje de nuevas tecnologías, y con una gran dosis de creatividad. Capacidad de analizar problemas y aportar soluciones específicas adaptadas a cada tipo de cliente. Me gusta trabajar tanto solo como en grupos.
|
|
{{else}}
|
|
Extensive knowledge in web environments, both J2EE and PHP. Expert in front-end technologies, although with considerable experience in back-end systems. Receptive to learning new technologies, and with a large dose of creativity. Ability to analyze problems and provide specific solutions tailored to each client type. I like to work both alone and in groups.
|
|
{{end}}
|
|
</p>
|
|
</section>
|
|
|
|
<!-- Experience -->
|
|
<section class="cv-section">
|
|
<h3 class="section-title">{{if eq .Lang "es"}}Experiencia{{else}}Experience{{end}}</h3>
|
|
|
|
{{range .CV.Experience}}
|
|
<div class="experience-item">
|
|
<div class="company-logo">
|
|
{{if .CompanyLogo}}
|
|
<img src="/static/images/companies/{{.CompanyLogo}}" alt="{{.Company}} logo" onerror="this.parentElement.innerHTML='<span class=\'iconify default-company-icon\' data-icon=\'mdi:office-building\' data-width=\'48\' data-height=\'48\'></span>'">
|
|
{{else}}
|
|
<span class="iconify default-company-icon" data-icon="mdi:office-building" data-width="48" data-height="48"></span>
|
|
{{end}}
|
|
</div>
|
|
<div class="experience-content">
|
|
<div class="experience-header">
|
|
<div class="experience-title-line">
|
|
<h4 class="position">
|
|
<span class="position-title">{{.Position}}</span>
|
|
{{if .Company}}
|
|
{{if .CompanyURL}}
|
|
<a href="{{.CompanyURL}}" target="_blank" rel="noopener noreferrer" class="company-link">{{.Company}}</a>
|
|
{{else}}
|
|
<span class="company-name">{{.Company}}</span>
|
|
{{end}}
|
|
{{end}}
|
|
</h4>
|
|
<span class="experience-period">{{.StartDate}} / {{if .Current}}{{if eq $.Lang "es"}}presente{{else}}now{{end}}{{else}}{{.EndDate}}{{end}}</span>
|
|
{{if .Duration}}
|
|
<span class="experience-separator"> - </span>
|
|
<span class="experience-duration">{{.Duration}}</span>
|
|
{{end}}
|
|
<span class="experience-separator"> - </span>
|
|
<span class="experience-location">({{.Location}})</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{if .ShortDescription}}
|
|
<p class="short-desc">{{.ShortDescription}}</p>
|
|
{{end}}
|
|
|
|
<div class="long-only">
|
|
<ul class="responsibilities">
|
|
{{range .Responsibilities}}
|
|
<li>{{.}}</li>
|
|
{{end}}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PAGE 2 -->
|
|
<div class="cv-page page-2">
|
|
<!-- Professional Title Badges - Same as Page 1 -->
|
|
<div class="cv-title-badges-header">
|
|
<span class="title-badge">{{if eq .Lang "es"}}ANALISTA PROGRAMADOR{{else}}ANALYST PROGRAMMER{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">NODEJS + REACTJS {{if eq .Lang "es"}}DESARROLLADOR{{else}}DEVELOPER{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">WEB {{if eq .Lang "es"}}DESARROLLADOR{{else}}DEVELOPER{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">GO + HTMX {{if eq .Lang "es"}}DESARROLLADOR{{else}}DEVELOPER{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">PHP {{if eq .Lang "es"}}DESARROLLADOR{{else}}DEVELOPER{{end}}</span>
|
|
</div>
|
|
|
|
<!-- Page 2 Content Grid: Main Content + Right Sidebar -->
|
|
<div class="page-content">
|
|
<!-- Main Content Area - Page 2 -->
|
|
<main class="cv-main">
|
|
<!-- Awards Section -->
|
|
{{if .CV.Awards}}
|
|
<section class="cv-section">
|
|
<h3 class="section-title">{{if eq .Lang "es"}}Premios y Reconocimientos{{else}}Awards{{end}}</h3>
|
|
{{range .CV.Awards}}
|
|
<div class="award-item">
|
|
<strong>{{.Title}}</strong><br>
|
|
<small>{{.Issuer}} - {{.Date}}</small>
|
|
{{if .Description}}<p class="award-desc">{{.Description}}</p>{{end}}
|
|
</div>
|
|
{{end}}
|
|
</section>
|
|
{{end}}
|
|
|
|
<!-- Courses Section -->
|
|
{{if .CV.Courses}}
|
|
<section class="cv-section">
|
|
<h3 class="section-title">{{if eq .Lang "es"}}Cursos Realizados{{else}}Courses{{end}}</h3>
|
|
{{range .CV.Courses}}
|
|
<div class="course-item">
|
|
<strong>{{.Title}}</strong><br>
|
|
<small>{{.Institution}} - {{.Location}}</small><br>
|
|
<small>{{.Date}} ({{.Duration}})</small>
|
|
{{if .Description}}<p class="course-desc">{{.Description}}</p>{{end}}
|
|
</div>
|
|
{{end}}
|
|
</section>
|
|
{{end}}
|
|
|
|
<!-- Languages Section -->
|
|
<section class="cv-section">
|
|
<h3 class="section-title">{{if eq .Lang "es"}}Idiomas{{else}}Languages{{end}}</h3>
|
|
{{range .CV.Languages}}
|
|
<div class="language-item">
|
|
<strong>{{.Language}}</strong>: {{.Proficiency}}
|
|
{{if .Detail}}<br><small style="color: #666;">{{.Detail}}</small>{{end}}
|
|
</div>
|
|
{{end}}
|
|
</section>
|
|
|
|
<!-- References Section -->
|
|
{{if .CV.References}}
|
|
<section class="cv-section">
|
|
<h3 class="section-title">{{if eq .Lang "es"}}Referencias{{else}}References{{end}}</h3>
|
|
{{range .CV.References}}
|
|
<div class="reference-item">
|
|
<a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.Title}}</a>
|
|
<small class="ref-type">({{.Type}})</small>
|
|
</div>
|
|
{{end}}
|
|
</section>
|
|
{{end}}
|
|
|
|
<!-- Other Section (Driver's License) -->
|
|
{{if .CV.Other.DriverLicense}}
|
|
<section class="cv-section">
|
|
<h3 class="section-title">{{if eq .Lang "es"}}Otros{{else}}Other{{end}}</h3>
|
|
<div class="other-content">
|
|
{{if eq .Lang "es"}}Carnet de conducir {{.CV.Other.DriverLicense}}{{else}}Driver's License {{.CV.Other.DriverLicense}}{{end}}
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
</main>
|
|
|
|
<!-- Right Sidebar - Skills (second half) -->
|
|
<aside class="cv-sidebar cv-sidebar-right">
|
|
{{range $index, $category := .SkillsRight}}
|
|
<section class="sidebar-section">
|
|
<h3 class="sidebar-title">{{$category.Category}}</h3>
|
|
<div class="sidebar-content">
|
|
{{range $category.Items}}<div class="skill-item">{{.}}</div>{{end}}
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
</aside>
|
|
</div>
|
|
|
|
<!-- Footer - Only on Page 2 -->
|
|
<footer class="cv-footer">
|
|
<ul class="footer-content">
|
|
<li>
|
|
<div class="footer-label">linkedin_</div>
|
|
<div class="footer-separator"><i class="fa fa-circle"></i></div>
|
|
<div class="footer-value">
|
|
<a href="{{.CV.Personal.LinkedIn}}" target="_blank" rel="noopener noreferrer">{{.CV.Personal.LinkedIn}}</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="footer-label">github_</div>
|
|
<div class="footer-separator"><i class="fa fa-circle"></i></div>
|
|
<div class="footer-value">
|
|
<a href="{{.CV.Personal.GitHub}}" target="_blank" rel="noopener noreferrer">{{.CV.Personal.GitHub}}</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="footer-label">behance_</div>
|
|
<div class="footer-separator"><i class="fa fa-circle"></i></div>
|
|
<div class="footer-value">
|
|
<a href="{{.CV.Personal.Behance}}" target="_blank" rel="noopener noreferrer">{{.CV.Personal.Behance}}</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="footer-label">email@</div>
|
|
<div class="footer-separator"><i class="fa fa-circle"></i></div>
|
|
<div class="footer-value">
|
|
<a href="mailto:{{.CV.Personal.Email}}" target="_blank" rel="noopener noreferrer">{{.CV.Personal.Email}}</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="footer-label">phone#</div>
|
|
<div class="footer-separator"><i class="fa fa-circle"></i></div>
|
|
<div class="footer-value">
|
|
<a href="tel:+34676875420" target="_blank" rel="noopener noreferrer">+34 676 875 420</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</footer>
|
|
</div>
|