feat: comprehensive UI redesign and content updates
- Updated action bar with transparent buttons (colored on hover only) - Repositioned language selector after CV title for better flow - Simplified toggle labels (removed parentheses values) - Changed button styling: transparent by default, green/gray on hover - Updated name format to "Moreno Rubio, Juan Andrés" with right alignment - Added LIVGolf experience (Apr 2024-present) with detailed responsibilities - Updated profile photo to dni.jpeg - Refined summary text focusing on consultant/analyst/developer roles - Added award logos (clicplan.png, drolosoft.png, teseo.png) - Implemented smooth logo animations (fade/scale transitions) - Adjusted toggle dimensions (80px wide, 30px tall) with smaller icons (16x16) - Added breathing room to title and icon with proper padding - Removed italic styling from name per user preference
This commit is contained in:
juanatsap
+124
-68
@@ -39,8 +39,8 @@
|
||||
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Iconify -->
|
||||
<script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
|
||||
<!-- Iconify - Load synchronously for immediate rendering -->
|
||||
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
||||
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="/static/css/main.css">
|
||||
@@ -97,77 +97,77 @@
|
||||
<!-- 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: Site Title -->
|
||||
<!-- Left: Site Title and Language -->
|
||||
<div class="site-title">
|
||||
<span class="iconify site-icon" data-icon="mdi:file-account" data-width="24" data-height="24"></span>
|
||||
<span class="site-title-text">{{if eq .Lang "es"}}Curriculum Vitae 2025{{else}}Curriculum Vitae 2025{{end}}</span>
|
||||
<iconify-icon icon="mdi:file-account" width="24" height="24" class="site-icon"></iconify-icon>
|
||||
<span class="site-title-text">CV {{.CurrentYear}} - JAMR</span>
|
||||
|
||||
<!-- Language selector (after title) -->
|
||||
<div class="language-selector">
|
||||
<button class="selector-btn {{if eq .Lang "en"}}active{{end}}" onclick="selectLanguage('en')" aria-label="English">
|
||||
English
|
||||
</button>
|
||||
<button class="selector-btn {{if eq .Lang "es"}}active{{end}}" onclick="selectLanguage('es')" aria-label="Español">
|
||||
Español
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center: Toggle controls -->
|
||||
<div class="toggle-controls-center">
|
||||
<!-- Language toggle -->
|
||||
<div class="language-toggle">
|
||||
<span class="toggle-label-left flag-icon">
|
||||
<span class="iconify" data-icon="circle-flags:us" data-width="28" data-height="28"></span>
|
||||
</span>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="langToggle" {{if eq .Lang "es"}}checked{{end}} onclick="toggleLanguage()" aria-label="{{if eq .Lang "es"}}Switch to English{{else}}Switch to Spanish{{end}}">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label-right flag-icon">
|
||||
<span class="iconify" data-icon="circle-flags:es" data-width="28" data-height="28"></span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Center: View controls with labels -->
|
||||
<div class="view-controls-center">
|
||||
<!-- CV Length toggle -->
|
||||
<div class="selector-group">
|
||||
<label class="selector-label">{{if eq .Lang "es"}}Longitud{{else}}Length{{end}}:</label>
|
||||
<label class="icon-toggle">
|
||||
<input type="checkbox" id="lengthToggle" onchange="toggleCVLength()">
|
||||
<span class="icon-toggle-slider">
|
||||
<iconify-icon icon="mdi:file-document-outline" width="16" height="16" class="icon-left"></iconify-icon>
|
||||
<iconify-icon icon="mdi:file-document-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Center: CV Length Toggle -->
|
||||
<div class="cv-length-toggle">
|
||||
<span class="toggle-label-left">
|
||||
<span class="iconify" data-icon="mdi:file-document-outline" data-width="24" data-height="24"></span>
|
||||
</span>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="lengthToggle" onclick="toggleCVLength()" aria-label="{{if eq .Lang "es"}}Cambiar longitud del CV{{else}}Toggle CV length{{end}}">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label-right">
|
||||
<span class="iconify" data-icon="mdi:file-document-multiple-outline" data-width="24" data-height="24"></span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Logo toggle -->
|
||||
<div class="selector-group">
|
||||
<label class="selector-label">{{if eq .Lang "es"}}Logos{{else}}Logos{{end}}:</label>
|
||||
<label class="icon-toggle">
|
||||
<input type="checkbox" id="logoToggle" checked onchange="toggleLogos()">
|
||||
<span class="icon-toggle-slider">
|
||||
<iconify-icon icon="mdi:image-off-outline" width="16" height="16" class="icon-left"></iconify-icon>
|
||||
<iconify-icon icon="mdi:image-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Center Right: Logo Toggle -->
|
||||
<div class="logo-toggle">
|
||||
<span class="toggle-label-left">
|
||||
<span class="iconify" data-icon="mdi:image-off-outline" data-width="24" data-height="24"></span>
|
||||
</span>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="logoToggle" checked onclick="toggleLogos()" aria-label="{{if eq .Lang "es"}}Mostrar logos de empresas{{else}}Show company logos{{end}}">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label-right">
|
||||
<span class="iconify" data-icon="mdi:image-multiple-outline" data-width="24" data-height="24"></span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Theme toggle -->
|
||||
<div class="selector-group">
|
||||
<label class="selector-label">{{if eq .Lang "es"}}Vista{{else}}View{{end}}:</label>
|
||||
<label class="icon-toggle">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span class="icon-toggle-slider">
|
||||
<iconify-icon icon="mdi:page-layout-sidebar-left" width="16" height="16" class="icon-left"></iconify-icon>
|
||||
<iconify-icon icon="mdi:page-layout-body" width="16" height="16" class="icon-right"></iconify-icon>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Action buttons -->
|
||||
<div class="action-buttons">
|
||||
<div class="action-buttons-right">
|
||||
<a
|
||||
class="export-btn"
|
||||
class="action-btn pdf-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}}
|
||||
aria-label="{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}">
|
||||
<iconify-icon icon="mdi:download" width="18" height="18"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Descargar como 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}}
|
||||
class="action-btn print-btn"
|
||||
onclick="printFriendly()"
|
||||
aria-label="{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}">
|
||||
<iconify-icon icon="mdi:leaf" width="18" height="18"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -205,9 +205,12 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleLanguage() {
|
||||
const checkbox = document.getElementById('langToggle');
|
||||
const lang = checkbox.checked ? 'es' : 'en';
|
||||
function selectLanguage(lang) {
|
||||
// Update button states
|
||||
document.querySelectorAll('.language-selector .selector-btn').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
event.target.closest('.selector-btn').classList.add('active');
|
||||
|
||||
// Use HTMX to load new content
|
||||
htmx.ajax('GET', `/cv?lang=${lang}`, {
|
||||
@@ -226,33 +229,86 @@
|
||||
}
|
||||
|
||||
function toggleCVLength() {
|
||||
const checkbox = document.getElementById('lengthToggle');
|
||||
const toggle = document.getElementById('lengthToggle');
|
||||
const paper = document.querySelector('.cv-paper');
|
||||
const lang = document.documentElement.lang;
|
||||
const label = document.getElementById('lengthLabel');
|
||||
|
||||
if (checkbox.checked) {
|
||||
if (toggle.checked) {
|
||||
label.textContent = lang === 'es' ? 'Largo' : 'Long';
|
||||
paper.classList.add('cv-long');
|
||||
paper.classList.remove('cv-short');
|
||||
} else {
|
||||
label.textContent = lang === 'es' ? 'Corto' : 'Short';
|
||||
paper.classList.add('cv-short');
|
||||
paper.classList.remove('cv-long');
|
||||
}
|
||||
}
|
||||
|
||||
function toggleLogos() {
|
||||
const checkbox = document.getElementById('logoToggle');
|
||||
const toggle = document.getElementById('logoToggle');
|
||||
const paper = document.querySelector('.cv-paper');
|
||||
const lang = document.documentElement.lang;
|
||||
const label = document.getElementById('logoLabel');
|
||||
|
||||
if (checkbox.checked) {
|
||||
if (toggle.checked) {
|
||||
label.textContent = lang === 'es' ? 'Con' : 'On';
|
||||
paper.classList.add('show-logos');
|
||||
} else {
|
||||
label.textContent = lang === 'es' ? 'Sin' : 'Off';
|
||||
paper.classList.remove('show-logos');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize with short version and logos enabled
|
||||
function toggleTheme() {
|
||||
const toggle = document.getElementById('themeToggle');
|
||||
const container = document.querySelector('.cv-container');
|
||||
const lang = document.documentElement.lang;
|
||||
const label = document.getElementById('themeLabel');
|
||||
|
||||
if (toggle.checked) {
|
||||
label.textContent = lang === 'es' ? 'Limpia' : 'Clean';
|
||||
container.classList.add('theme-clean');
|
||||
localStorage.setItem('cv-theme', 'clean');
|
||||
} else {
|
||||
label.textContent = lang === 'es' ? 'Completa' : 'Full';
|
||||
container.classList.remove('theme-clean');
|
||||
localStorage.setItem('cv-theme', 'default');
|
||||
}
|
||||
}
|
||||
|
||||
// Print Friendly - applies Clean theme before printing
|
||||
function printFriendly() {
|
||||
const container = document.querySelector('.cv-container');
|
||||
const wasClean = container.classList.contains('theme-clean');
|
||||
|
||||
// Apply clean theme for printing
|
||||
if (!wasClean) {
|
||||
container.classList.add('theme-clean');
|
||||
}
|
||||
|
||||
// Print
|
||||
window.print();
|
||||
|
||||
// Restore original theme after print dialog
|
||||
setTimeout(() => {
|
||||
if (!wasClean) {
|
||||
container.classList.remove('theme-clean');
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// Initialize with short version, logos enabled, and saved theme
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.querySelector('.cv-paper').classList.add('cv-short');
|
||||
document.querySelector('.cv-paper').classList.add('show-logos');
|
||||
|
||||
// Restore theme preference
|
||||
const savedTheme = localStorage.getItem('cv-theme') || 'default';
|
||||
if (savedTheme === 'clean') {
|
||||
document.getElementById('themeToggle').checked = true;
|
||||
toggleTheme();
|
||||
}
|
||||
});
|
||||
|
||||
// Error handling utility
|
||||
|
||||
Reference in New Issue
Block a user