txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: optimize mobile layout with unified design system

Browse Source 
Comprehensive mobile optimization (≤768px) for improved consistency and readability:

- Center profile photo between name and intro text on mobile
- Unify all logo/icon sizes to 60×60px for visual consistency
- Standardize spacing across experience, courses, projects, and awards
- Reduce font sizes proportionally for better mobile readability
- Remove justified text alignment (except intro/skills) to prevent awkward spacing
- Apply consistent 1rem gaps and 1.5rem padding throughout
- Optimize sidebar items with reduced margins and font sizes

Technical improvements:
- Add comprehensive mobile breakpoint rules at 768px
- Implement flexible photo positioning (absolute on desktop, static on mobile)
- Ensure uniform typography scale across all content types
This commit is contained in:
juanatsap
2025-11-10 15:45:55 +00:00
parent 18db4011f8
commit fc700f1f0e
5 changed files with 483 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/handlers/cv.go
+79 -21
View File
@@ -185,6 +185,7 @@ func (h *CVHandler) CVContent(w http.ResponseWriter, r *http.Request) {
}
// ExportPDF handles PDF export requests using chromedp
// TEMPORARILY DISABLED - Work in progress
func (h *CVHandler) ExportPDF(w http.ResponseWriter, r *http.Request) {
// Get language from query parameter
lang := r.URL.Query().Get("lang")
@@ -198,33 +199,90 @@ func (h *CVHandler) ExportPDF(w http.ResponseWriter, r *http.Request) {
return
}
// Construct URL to generate PDF from
// Use localhost instead of the actual server address to avoid network overhead
url := fmt.Sprintf("http://%s/?lang=%s", h.serverAddr, lang)
log.Printf("PDF export requested but temporarily disabled (redirecting to print friendly)")
log.Printf("Generating PDF from URL: %s", url)
// Generate PDF
pdfData, err := h.pdfGenerator.GenerateFromURL(r.Context(), url)
if err != nil {
log.Printf("PDF generation failed: %v", err)
HandleError(w, r, InternalError(err))
return
// Return HTML with message and redirect to print friendly
message := "PDF Export - Work in Progress"
body := "The PDF export feature is currently being improved. Please use the <strong>Print Friendly</strong> button instead (Ctrl+P or Cmd+P to save as PDF)."
if lang == "es" {
message = "Exportación PDF - En Desarrollo"
body = "La función de exportación a PDF está siendo mejorada. Por favor, usa el botón <strong>Imprimir Amigable</strong> en su lugar (Ctrl+P o Cmd+P para guardar como PDF)."
}
// Set response headers
filename := fmt.Sprintf("CV-Juan-Andres-Moreno-Rubio-%s.pdf", lang)
w.Header().Set("Content-Type", "application/pdf")
w.Header().Set("Content-Disposition", fmt.Sprintf("attachment; filename=%s", filename))
w.Header().Set("Content-Length", fmt.Sprintf("%d", len(pdfData)))
w.Header().Set("Content-Type", "text/html; charset=utf-8")
w.WriteHeader(http.StatusOK)
// Write PDF data
if _, err := w.Write(pdfData); err != nil {
log.Printf("Failed to write PDF response: %v", err)
return
redirectMsg := "Redirecting in 5 seconds..."
if lang == "es" {
redirectMsg = "Redirigiendo en 5 segundos..."
}
log.Printf("Successfully generated PDF: %s (%d bytes)", filename, len(pdfData))
html := fmt.Sprintf(`<!DOCTYPE html>
<html lang="%s">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>%s</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background: linear-gradient(135deg, #667eea 0%%, #764ba2 100%%);
}
.container {
background: white;
padding: 3rem;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
max-width: 500px;
text-align: center;
}
h1 {
color: #333;
margin: 0 0 1rem 0;
font-size: 1.8rem;
}
p {
color: #666;
line-height: 1.6;
margin: 1rem 0;
}
.redirect-info {
margin-top: 2rem;
padding: 1rem;
background: #f0f4ff;
border-radius: 8px;
font-size: 0.9rem;
color: #555;
}
.icon {
font-size: 3rem;
margin-bottom: 1rem;
}
</style>
<script>
setTimeout(function() {
window.location.href = '/?lang=%s';
}, 5000);
</script>
</head>
<body>
<div class="container">
<div class="icon">🚧</div>
<h1>%s</h1>
<p>%s</p>
<div class="redirect-info">
%s
</div>
</div>
</body>
</html>`, lang, message, lang, message, body, redirectMsg)
w.Write([]byte(html))
}
// splitSkills splits skill categories between left (page 1) and right (page 2) sidebars
static/css/main.css
+333 -32
View File
@@ -78,6 +78,12 @@ a:hover {
height: 100%;
}
.site-title-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.site-icon {
color: #fff;
flex-shrink: 0;
@@ -88,6 +94,14 @@ a:hover {
padding: 0 .5rem 0 1.5rem;
}
/* Mobile icon hidden by default, shown only on mobile */
.site-icon-mobile {
display: none;
color: #fff;
flex-shrink: 0;
margin-right: 0.5rem;
}
/* Site logo and title links */
.site-logo-link,
.site-title-link {
@@ -236,7 +250,7 @@ iconify-icon {
position: absolute;
width: 24px;
height: 24px;
left: 3px;
left: 2px;
background: white;
border-radius: 50%;
transition: transform 0.3s ease;
@@ -246,7 +260,7 @@ iconify-icon {
}
.icon-toggle input:checked + .icon-toggle-slider::before {
transform: translateX(45px);
transform: translateX(43px);
}
.icon-toggle input:checked + .icon-toggle-slider {
@@ -264,11 +278,11 @@ iconify-icon {
}
.icon-toggle-slider .icon-left {
left: 8px;
left: 6px;
}
.icon-toggle-slider .icon-right {
right: 7px;
right: 6px;
}
.icon-toggle input:not(:checked) + .icon-toggle-slider .icon-left {
@@ -287,7 +301,7 @@ iconify-icon {
}
.icon-toggle input:checked + .icon-toggle-slider .icon-right {
color: #fff;
color: #333;
font-weight: bold;
}
@@ -320,7 +334,8 @@ iconify-icon {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
/* gap: 0.5rem; */
gap: 0rem;
text-decoration: none;
white-space: nowrap;
letter-spacing: -0.01em;
@@ -329,6 +344,7 @@ iconify-icon {
transition: all 0.2s ease;
outline: none !important;
box-shadow: none !important;
min-width: 50px!important;
}
.selector-btn:focus,
@@ -520,7 +536,7 @@ iconify-icon {
.theme-clean .cv-main {
grid-column: 1 !important;
padding: 2rem !important;
padding: 2rem 3rem!important;
transition: all 0.3s ease-in-out;
}
@@ -665,7 +681,7 @@ iconify-icon {
.sidebar-content {
font-family: 'Quicksand', sans-serif;
font-size: 0.95em;
font-size: 0.95rem;
font-weight: 400;
line-height: 1.5;
}
@@ -730,6 +746,9 @@ iconify-icon {
.cv-header-left {
flex: 1;
position: relative;
/* Desktop: Add right padding to make room for the photo */
padding-right: 185px; /* Photo width (150px) + gap (35px) */
}
.cv-photo {
@@ -739,12 +758,11 @@ iconify-icon {
overflow: hidden;
border: 3px solid white;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
/* Colocación a manopla de la foto :) */
margin: 15px;
{{/* top: 25px; */}}
position: relative;
right: 5px;
/* Desktop: Position photo in the right padding area */
position: absolute;
top: 15px;
right: 15px; /* Margin from the right edge */
}
.cv-photo img {
@@ -973,7 +991,7 @@ iconify-icon {
.short-desc {
color: var(--text-dark);
font-size: 0.9rem;
font-size: 0.95rem;
line-height: 1.6;
margin-top: 0.5rem;
}
@@ -993,7 +1011,7 @@ iconify-icon {
padding-left: 1.2rem;
margin-bottom: 0.4rem;
position: relative;
font-size: 0.9rem;
font-size: 0.95rem;
color: var(--text-dark);
line-height: 1.5;
}
@@ -1047,7 +1065,7 @@ iconify-icon {
/* Education */
.education-item {
margin-bottom: 1rem;
font-size: 0.9rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-dark);
}
@@ -1061,7 +1079,7 @@ iconify-icon {
}
.language-item {
font-size: 1.1rem!important;
font-size: 0.95rem!important;
color: var(--text-dark);
margin-bottom: 0.3rem!important;
line-height: 1.4!important;
@@ -1258,7 +1276,7 @@ iconify-icon {
}
.project-desc {
font-size: 0.9rem;
font-size: 0.95rem;
color: var(--text-dark);
margin-top: 0.5rem;
line-height: 1.6;
@@ -1276,7 +1294,7 @@ iconify-icon {
margin-top: -1.5rem;
padding-top: 0rem;
text-align: center;
font-size: 0.95em;
font-size: 0.95rem;
color: var(--text-gray);
}
@@ -1298,7 +1316,7 @@ iconify-icon {
margin-bottom: 0!important;
line-height: 1.4!important;
margin-left: 2rem!important;
font-size: 1.1rem!important;
font-size: 0.95rem!important;
}
.reference-item a {
@@ -1422,9 +1440,9 @@ footer {
font-size: 1.8rem;
}
.cv-photo {
width: 120px;
height: 150px;
.intro-text {
font-size: 0.9em;
margin-top: 15px;
}
.action-bar-content {
@@ -1447,11 +1465,6 @@ footer {
gap: 0.25rem;
}
.intro-text {
font-size: 0.9em;
margin-top: 15px;
}
/* ========== Hide header controls, show in menu ========== */
/* Keep language selector visible in header */
.view-controls-center {
@@ -1702,7 +1715,7 @@ a:focus {
margin-bottom: 0!important;
line-height: 1.4!important;
margin-left: 2rem!important;
font-size: 1.1rem!important;
font-size: 0.95rem!important;
}
/* Award item with logo */
@@ -1839,7 +1852,7 @@ a:focus {
.course-desc {
margin-top: 0.5em;
color: var(--text-gray);
font-size: 0.95em;
font-size: 0.95rem;
}
.reference-item {
@@ -1929,6 +1942,11 @@ a:focus {
margin-bottom: 0;
padding: 0;
}
.site-title {
justify-content: space-between;
width: 100%;
}
}
/* ===============================================
@@ -2082,7 +2100,7 @@ a:focus {
.submenu-content {
position: fixed; /* Changed from absolute to fixed to break out of parent overflow */
left: 278px; /* Slight overlap with menu to eliminate any gap */
left: 232px; /* Slight overlap with menu to eliminate any gap */
background: #ffffff;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
border-radius: 8px;
@@ -2279,6 +2297,11 @@ html {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.site-title {
justify-content: space-between;
width: 100%;
}
}
/* Hide menu overlay on print */
@@ -2831,3 +2854,281 @@ html {
margin-top: 10px !important;
}
}
/* ========================================
Responsive: Small Screens (up to 540px)
======================================== */
/* ========================================
Responsive: Tablet Screens - Center Photo (up to 768px)
======================================== */
@media (max-width: 768px) {
/* ========================================
TYPOGRAPHY - Subtle font size reductions
======================================== */
.cv-name {
text-align: center;
font-size: 1.6rem;
}
.years-experience {
text-align: center;
font-size: 1.1em;
}
.section-title {
font-size: 1.2em;
}
.sidebar-title {
font-size: 1.2em;
}
.experience-period,
.experience-separator,
.experience-location,
.experience-duration {
font-size: 0.95rem;
}
.position {
font-size: 0.95rem;
}
.short-desc,
.responsibilities li {
font-size: 0.85rem;
}
/* ========================================
TEXT ALIGNMENT FIXES - Selective alignment
======================================== */
/* Keep justified for intro and skills */
.intro-text,
.summary-text {
text-align: justify;
font-size: 0.85rem;
line-height: 1.5;
}
.intro-text {
margin-top: 0;
width: 100%;
}
/* Left-align for course/project descriptions */
.course-desc,
.project-desc {
text-align: left !important;
font-size: 0.85rem !important;
line-height: 1.5;
}
/* ========================================
HEADER LAYOUT - Centered photo
======================================== */
.cv-header-content {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.cv-header-left {
width: 100%;
position: static;
padding-right: 0;
}
.cv-photo {
position: static;
width: auto;
height: auto;
max-width: 250px;
margin: 1.5rem auto;
text-align: center;
right: auto;
top: auto;
}
.cv-photo img {
width: 100%;
height: auto;
max-height: none;
}
/* ========================================
UNIFIED LOGO/ICON SIZING - Consistent 60px
======================================== */
.company-logo,
.course-icon,
.project-icon,
.award-logo {
width: 60px !important;
height: 60px !important;
flex-shrink: 0;
}
.company-logo img,
.course-icon img,
.project-icon img,
.award-logo img {
width: 60px !important;
height: 60px !important;
object-fit: contain;
}
.default-company-icon,
.default-course-icon,
.default-project-icon,
.default-award-icon {
width: 60px !important;
height: 60px !important;
}
/* ========================================
CONSISTENT ITEM LAYOUT - Uniform spacing
======================================== */
.experience-item,
.course-item,
.project-item,
.award-item {
display: flex;
flex-direction: row;
gap: 1rem !important;
align-items: flex-start;
margin-bottom: 2rem !important;
padding-bottom: 1.5rem !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.experience-item {
margin-bottom: 1.8rem !important;
}
.experience-content,
.course-content,
.project-content,
.award-content {
flex: 1;
min-width: 0;
}
/* ========================================
FONT SIZE CONSISTENCY - Titles and descriptions
======================================== */
.course-title,
.project-title,
.award-item strong {
font-size: 0.95rem !important;
line-height: 1.4;
}
.course-item small,
.project-item small,
.award-item small {
font-size: 0.8rem !important;
}
.course-desc,
.project-desc,
.award-desc {
font-size: 0.85rem !important;
line-height: 1.5;
}
/* ========================================
RESPONSIBILITIES MOBILE OPTIMIZATION
======================================== */
.responsibilities li:has(img),
.responsibilities li:has(iconify-icon) {
grid-template-columns: 60px 1fr !important;
gap: 0.75rem !important;
margin-bottom: 0.75rem !important;
}
.responsibilities li img,
.responsibilities li iconify-icon.default-company-icon {
width: 60px !important;
height: 60px !important;
}
/* ========================================
SIDEBAR ITEMS MOBILE OPTIMIZATION
======================================== */
.language-item,
.reference-item,
.other-content {
margin-bottom: 0 !important;
line-height: 1.4 !important;
margin-left: 1rem !important;
font-size: 0.85rem !important;
}
}
/* ========================================
Responsive: All Mobile Screens (up to 540px)
======================================== */
@media (max-width: 540px) {
/* Hide year from title in mobile view */
.site-title-year {
display: none;
}
/* Hide desktop logo, show mobile icon in title */
.site-logo-link {
display: none;
}
.site-icon-mobile {
display: inline-flex;
}
/* Align language selector to the right */
.site-title {
justify-content: space-between;
width: 100%;
}
.language-selector {
margin-left: auto;
padding-left: 0;
margin-right: 0rem;
}
/* ========== Language Selector - Show Short Names Only ========== */
.language-selector .selector-btn {
position: relative;
padding: 0.4rem 0.75rem;
min-width: 40px;
font-size: 0; /* Hide actual text */
overflow: visible;
transition: font-size 0.3s ease;
display: inline-flex;
justify-content: center;
align-items: center;
}
/* Show only short version (EN/ES) */
.language-selector .selector-btn::before {
content: attr(data-short);
font-size: 0.95rem;
opacity: 1;
transition: opacity 0.3s ease;
display: block;
width: 100%;
text-align: center;
}
/* Keep short names on hover (no expansion) */
.language-selector .selector-btn:hover {
font-size: 0;
min-width: 40px;
}
.language-selector .selector-btn:hover::before {
content: attr(data-short);
opacity: 1;
}
}
static/css/print.css
+51 -39
View File
@@ -44,22 +44,52 @@
display: none !important;
}
/* Hide ALL icons in print */
iconify-icon,
.section-icon,
.default-company-icon,
.default-project-icon,
.default-course-icon,
.default-award-icon {
display: none !important;
/* ===================================
SHOW ALL ICONS, LOGOS, AND BADGES - Print Default
=================================== */
/* Section title icons - smaller for print */
.section-icon {
width: 16px !important;
height: 16px !important;
vertical-align: middle !important;
margin-right: 4px !important;
}
/* Hide company/project/course logos */
/* Company/Project/Course logos - compact for print */
.company-logo,
.project-icon,
.course-icon,
.award-logo {
display: none !important;
width: 40px !important;
height: 40px !important;
flex-shrink: 0 !important;
}
.company-logo img,
.project-icon img,
.course-icon img,
.award-logo img {
width: 40px !important;
height: 40px !important;
object-fit: contain !important;
}
/* Default fallback icons - show at print size */
.default-company-icon,
.default-project-icon,
.default-course-icon,
.default-award-icon {
width: 40px !important;
height: 40px !important;
}
/* Badges - keep visible for print */
.current-badge,
.expired-badge,
.maintained-badge {
font-size: 7pt !important;
padding: 1px 4px !important;
}
/* ===================================
@@ -191,12 +221,12 @@
PHOTO - FIXED ASPECT RATIO (3:4 Portrait)
=================================== */
.cv-photo {
width: 60px !important;
height: 80px !important; /* Maintains 3:4 ratio */
width: 90px !important;
height: 120px !important; /* Maintains 3:4 ratio */
object-fit: contain !important; /* Show full photo, no crop */
border: none !important; /* Remove border */
box-shadow: none !important;
margin: 10px 15px 10px 10px !important;
margin: 0px 0px 20px 20px !important;
page-break-inside: avoid;
}
@@ -241,10 +271,6 @@
margin-bottom: 3mm !important; /* More space for lists */
}
.section-icon {
display: none; /* Hide section icons in print */
}
.summary-text {
font-size: 9pt;
line-height: 1.5;
@@ -254,6 +280,8 @@
EXPERIENCE - REDUCED SPACING (60px → 26px)
=================================== */
.experience-item {
display: flex !important; /* Show logos side-by-side with content */
gap: 12px !important;
margin-bottom: 4mm !important; /* ~15px, down from 40px */
padding-bottom: 3mm !important; /* ~11px, down from 32px */
border-bottom: 0.5pt solid #dddddd !important;
@@ -305,7 +333,7 @@
line-height: 1.4 !important;
}
/* All logos already hidden above - no exceptions */
/* Logos are visible at 40x40 for compact print layout */
/* ===================================
PROJECTS & COURSES
@@ -313,7 +341,8 @@
.project-item,
.course-item,
.award-item {
display: block !important; /* Remove flex/grid layouts for print */
display: flex !important; /* Show logos side-by-side with content */
gap: 12px !important;
margin-bottom: 4mm !important;
padding-bottom: 3mm !important;
border-bottom: 0.5pt solid #dddddd !important;
@@ -345,13 +374,13 @@
font-weight: 600 !important;
}
/* Icons/logos already hidden - display: none above */
/* Logos visible at 40x40 - default icons remain hidden */
/* Consistent item titles */
.project-title,
.course-title,
.award-item strong,
.course-item strong {
.experience-title,
.award-title {
font-size: 10pt !important;
font-weight: 600 !important;
line-height: 1.3 !important;
@@ -382,14 +411,6 @@
margin-left: 0.5mm !important;
}
/* Course title styling to match experience */
.course-title {
font-size: 10pt !important;
font-weight: 600 !important;
line-height: 1.3 !important;
margin-bottom: 0.5mm !important;
}
/* Course metadata (date, location) - match experience style */
.course-period,
.course-location,
@@ -531,15 +552,6 @@
font-weight: 600;
}
/* ===================================
BADGES - Hidden for minimal print
=================================== */
.current-badge,
.expired-badge,
.maintained-badge {
display: none !important;
}
/* ===================================
CV LENGTH TOGGLE - Force Short Version for Print Friendly
=================================== */
templates/cv-content.html
+6 -3
View File
@@ -41,12 +41,15 @@
<div class="cv-header-left">
<h1 class="cv-name">Moreno Rubio, Juan Andrés</h1>
<p class="years-experience">{{.YearsOfExperience}} {{if eq .Lang "es"}}años de experiencia{{else}}years of experience{{end}}</p>
<!-- Photo positioned for mobile (centered between name and intro) -->
<div class="cv-photo">
<img src="/static/images/profile/dni.jpeg" alt="{{.CV.Personal.Name}}" onerror="this.src='/static/images/profile/placeholder.svg'">
</div>
<!-- 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/dni.jpeg" alt="{{.CV.Personal.Name}}" onerror="this.src='/static/images/profile/placeholder.svg'">
</div>
</div>
</div>
templates/index.html
+14 -9
View File
@@ -99,20 +99,25 @@
<div class="action-bar-content">
<!-- Left: Site Title + Hamburger Menu + Language -->
<div class="site-title">
<a href="/" class="site-logo-link" id="logoLink" aria-label="Home">
<iconify-icon icon="mdi:file-account" width="24" height="24" class="site-icon"></iconify-icon>
</a>
<!-- Left group: Logo + Hamburger -->
<div class="site-title-left">
<a href="/" class="site-logo-link" id="logoLink" aria-label="Home">
<iconify-icon icon="mdi:file-account" width="24" height="24" class="site-icon"></iconify-icon>
</a>
<!-- Hamburger Menu Button -->
<button class="hamburger-btn" aria-label="Toggle navigation menu">
<iconify-icon icon="mdi:menu" width="24" height="24"></iconify-icon>
</button>
<!-- Hamburger Menu Button -->
<button class="hamburger-btn" aria-label="Toggle navigation menu">
<iconify-icon icon="mdi:menu" width="24" height="24"></iconify-icon>
</button>
</div>
<!-- Center: Title -->
<a href="/" class="site-title-link" id="titleLink">
<span class="site-title-text">CV JAMR - {{.CurrentYear}}</span>
<iconify-icon icon="mdi:file-account" width="20" height="20" class="site-icon-mobile"></iconify-icon>
<span class="site-title-text">CV JAMR<span class="site-title-year"> - {{.CurrentYear}}</span></span>
</a>
<!-- Language selector (next to title) -->
<!-- Right: Language selector -->
<div class="language-selector">
<button class="selector-btn {{if eq .Lang "en"}}active{{end}}" data-short="EN" onclick="selectLanguage('en')" aria-label="English">
English