2c372eee49
**Social Links in Footer (Page 2):** - Replace address/phone with LinkedIn, GitHub, and Behance links - Maintain email@ link - All links are clickable and open in new tabs - Footer displays social media profiles prominently **Company Logo Toggle Feature:** - Add "Show logos" toggle switch in top action bar - Toggle displays company logos (48x48px) to the left of each experience item - LinkedIn-style layout when logos are shown - Logos hidden by default, optional display via toggle - Graceful fallback: missing logos don't break layout (onerror handler) - Logos directory created at static/images/logos/ with README **Technical Implementation:** - New CSS file: logo-toggle.css for toggle switch and logo layout - JavaScript: toggleLogos() function for show/hide functionality - Template updates: experience items now support flex layout with logos - Action bar grid updated to accommodate 4 columns - Logo display uses CSS class `.show-logos` on `.cv-paper` - Print CSS: logos hidden in PDF exports by default **User Experience:** - Clean toggle switch UI with smooth animations - Mobile responsive design - Accessibility: proper ARIA labels for toggle - Optional feature that doesn't clutter default view - Professional LinkedIn-style appearance when enabled Logos can be added to static/images/logos/ directory using filenames from the companyLogo field in CV JSON data.
150 lines
6.5 KiB
HTML
150 lines
6.5 KiB
HTML
<!-- Professional Title Badges - Full Width Top Bar -->
|
|
<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 {{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>
|
|
|
|
<!-- Left Sidebar - Skills -->
|
|
<aside class="cv-sidebar">
|
|
<!-- Skills Section - Dynamically render all categories -->
|
|
{{range .CV.Skills.Technical}}
|
|
<section class="sidebar-section">
|
|
<h3 class="sidebar-title">{{.Category}}</h3>
|
|
<div class="sidebar-content">
|
|
{{range .Items}}<div class="skill-item">{{.}}</div>{{end}}
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
|
|
<!-- Languages Section -->
|
|
<section class="sidebar-section">
|
|
<h3 class="sidebar-title">{{if eq .Lang "es"}}Idiomas{{else}}Languages{{end}}</h3>
|
|
<div class="sidebar-content">
|
|
{{range .CV.Languages}}
|
|
<div class="language-item">
|
|
<strong>{{.Language}}</strong>: {{.Proficiency}}
|
|
{{if .Detail}}<br><small style="color: #666;">{{.Detail}}</small>{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Courses Section -->
|
|
{{if .CV.Courses}}
|
|
<section class="sidebar-section">
|
|
<h3 class="sidebar-title">{{if eq .Lang "es"}}Cursos Realizados{{else}}Training Courses{{end}}</h3>
|
|
<div class="sidebar-content">
|
|
{{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}}
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
|
|
<!-- References Section -->
|
|
{{if .CV.References}}
|
|
<section class="sidebar-section">
|
|
<h3 class="sidebar-title">{{if eq .Lang "es"}}Referencias{{else}}References{{end}}</h3>
|
|
<div class="sidebar-content">
|
|
{{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}}
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
|
|
<!-- Other Section (Driver's License) -->
|
|
{{if .CV.Other.DriverLicense}}
|
|
<section class="sidebar-section">
|
|
<h3 class="sidebar-title">{{if eq .Lang "es"}}Otros{{else}}Other{{end}}</h3>
|
|
<div class="sidebar-content">
|
|
{{if eq .Lang "es"}}Carnet de conducir {{.CV.Other.DriverLicense}}{{else}}Driver's License {{.CV.Other.DriverLicense}}{{end}}
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
</aside>
|
|
|
|
<!-- Main Content Area -->
|
|
<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="cv-experience-years">{{if eq .Lang "es"}}20 años de experiencia{{else}}20 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="experience-header">
|
|
<div class="experience-title-line">
|
|
<h4 class="position">{{.Position}} / {{if eq $.Lang "es"}}Analista Programador{{else}}Analyst Programmer{{end}}</h4>
|
|
<span class="experience-period">{{.StartDate}} / {{if .Current}}{{if eq $.Lang "es"}}presente{{else}}now{{end}}{{else}}{{.EndDate}}{{end}} - ({{.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>
|
|
{{end}}
|
|
</section>
|
|
|
|
</main>
|