feat: enhance experience section with icons, duration, and improved styling
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
This commit is contained in:
juanatsap
@@ -48,6 +48,16 @@ func (h *CVHandler) Home(w http.ResponseWriter, r *http.Request) {
|
||||
return
|
||||
}
|
||||
|
||||
// Calculate duration for each experience
|
||||
for i := range cv.Experience {
|
||||
cv.Experience[i].Duration = calculateDuration(
|
||||
cv.Experience[i].StartDate,
|
||||
cv.Experience[i].EndDate,
|
||||
cv.Experience[i].Current,
|
||||
lang,
|
||||
)
|
||||
}
|
||||
|
||||
// Split skills between left and right sidebars
|
||||
skillsLeft, skillsRight := splitSkills(cv.Skills.Technical)
|
||||
|
||||
@@ -98,6 +108,16 @@ func (h *CVHandler) CVContent(w http.ResponseWriter, r *http.Request) {
|
||||
return
|
||||
}
|
||||
|
||||
// Calculate duration for each experience
|
||||
for i := range cv.Experience {
|
||||
cv.Experience[i].Duration = calculateDuration(
|
||||
cv.Experience[i].StartDate,
|
||||
cv.Experience[i].EndDate,
|
||||
cv.Experience[i].Current,
|
||||
lang,
|
||||
)
|
||||
}
|
||||
|
||||
// Split skills between left and right sidebars
|
||||
skillsLeft, skillsRight := splitSkills(cv.Skills.Technical)
|
||||
|
||||
@@ -207,3 +227,90 @@ func calculateYearsOfExperience() int {
|
||||
|
||||
return years
|
||||
}
|
||||
|
||||
// calculateDuration calculates the duration between two dates in years and months
|
||||
// Date format expected: "YYYY-MM" (e.g., "2021-01")
|
||||
// Returns a formatted string like "3 years 6 months" or "6 months"
|
||||
func calculateDuration(startDate, endDate string, current bool, lang string) string {
|
||||
// Parse start date
|
||||
start, err := time.Parse("2006-01", startDate)
|
||||
if err != nil {
|
||||
return ""
|
||||
}
|
||||
|
||||
// Determine end date
|
||||
var end time.Time
|
||||
if current {
|
||||
end = time.Now()
|
||||
} else {
|
||||
end, err = time.Parse("2006-01", endDate)
|
||||
if err != nil {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate total months
|
||||
totalMonths := (end.Year()-start.Year())*12 + int(end.Month()-start.Month())
|
||||
|
||||
// If end date is before start date, return empty
|
||||
if totalMonths < 0 {
|
||||
return ""
|
||||
}
|
||||
|
||||
years := totalMonths / 12
|
||||
months := totalMonths % 12
|
||||
|
||||
// Format the duration string based on language
|
||||
var result string
|
||||
if lang == "es" {
|
||||
if years > 0 && months > 0 {
|
||||
yearStr := "años"
|
||||
if years == 1 {
|
||||
yearStr = "año"
|
||||
}
|
||||
monthStr := "meses"
|
||||
if months == 1 {
|
||||
monthStr = "mes"
|
||||
}
|
||||
result = fmt.Sprintf("(%d %s %d %s)", years, yearStr, months, monthStr)
|
||||
} else if years > 0 {
|
||||
yearStr := "años"
|
||||
if years == 1 {
|
||||
yearStr = "año"
|
||||
}
|
||||
result = fmt.Sprintf("(%d %s)", years, yearStr)
|
||||
} else {
|
||||
monthStr := "meses"
|
||||
if months == 1 {
|
||||
monthStr = "mes"
|
||||
}
|
||||
result = fmt.Sprintf("(%d %s)", months, monthStr)
|
||||
}
|
||||
} else {
|
||||
if years > 0 && months > 0 {
|
||||
yearStr := "years"
|
||||
if years == 1 {
|
||||
yearStr = "year"
|
||||
}
|
||||
monthStr := "months"
|
||||
if months == 1 {
|
||||
monthStr = "month"
|
||||
}
|
||||
result = fmt.Sprintf("(%d %s %d %s)", years, yearStr, months, monthStr)
|
||||
} else if years > 0 {
|
||||
yearStr := "years"
|
||||
if years == 1 {
|
||||
yearStr = "year"
|
||||
}
|
||||
result = fmt.Sprintf("(%d %s)", years, yearStr)
|
||||
} else {
|
||||
monthStr := "months"
|
||||
if months == 1 {
|
||||
monthStr = "month"
|
||||
}
|
||||
result = fmt.Sprintf("(%d %s)", months, monthStr)
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
@@ -53,6 +53,7 @@ type Experience struct {
|
||||
Responsibilities []string `json:"responsibilities"`
|
||||
Technologies []string `json:"technologies"`
|
||||
Highlights []string `json:"highlights"`
|
||||
Duration string `json:"-"` // Calculated field, not from JSON
|
||||
}
|
||||
|
||||
type AIDevelopment struct {
|
||||
|
||||
@@ -63,52 +63,103 @@
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
transition: color 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Highlight active label based on parent container state */
|
||||
/* Flag icons - special styling */
|
||||
.flag-icon {
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Highlight active label/icon based on parent container state */
|
||||
.language-toggle:has(#langToggle:not(:checked)) .toggle-label-left,
|
||||
.cv-length-toggle:has(#lengthToggle:not(:checked)) .toggle-label-left,
|
||||
.logo-toggle:has(#logoToggle:not(:checked)) .toggle-label-left {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.language-toggle:has(#langToggle:checked) .toggle-label-right,
|
||||
.cv-length-toggle:has(#lengthToggle:checked) .toggle-label-right,
|
||||
.logo-toggle:has(#logoToggle:checked) .toggle-label-right {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Dim inactive icons */
|
||||
.language-toggle:has(#langToggle:not(:checked)) .toggle-label-right,
|
||||
.cv-length-toggle:has(#lengthToggle:not(:checked)) .toggle-label-right,
|
||||
.logo-toggle:has(#logoToggle:not(:checked)) .toggle-label-right {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.language-toggle:has(#langToggle:checked) .toggle-label-left,
|
||||
.cv-length-toggle:has(#lengthToggle:checked) .toggle-label-left,
|
||||
.logo-toggle:has(#logoToggle:checked) .toggle-label-left {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* Experience Item with Logo Support */
|
||||
.experience-item {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 2px solid #ddd;
|
||||
page-break-inside: avoid;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
gap: 1.2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.experience-item:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
display: none; /* Hidden by default */
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.company-logo img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.default-company-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
background: #f5f5f5;
|
||||
color: #999;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.experience-content {
|
||||
flex: 1;
|
||||
min-width: 0; /* Prevents flex item from overflowing */
|
||||
}
|
||||
|
||||
/* Show logos when toggle is active */
|
||||
/* Hide logos when toggle is OFF */
|
||||
.cv-paper:not(.show-logos) .company-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show logos when toggle is ON (default) */
|
||||
.show-logos .company-logo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
+9
-4
@@ -437,11 +437,16 @@ a:hover {
|
||||
|
||||
.experience-period,
|
||||
.experience-separator,
|
||||
.experience-location {
|
||||
color: #aaa;
|
||||
font-weight: 500;
|
||||
.experience-location,
|
||||
.experience-duration {
|
||||
color: #555;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
font-size: 0.9rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.experience-duration {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.short-desc {
|
||||
|
||||
@@ -74,11 +74,13 @@
|
||||
|
||||
{{range .CV.Experience}}
|
||||
<div class="experience-item">
|
||||
{{if .CompanyLogo}}
|
||||
<div class="company-logo">
|
||||
<img src="/static/images/companies/{{.CompanyLogo}}" alt="{{.Company}} logo" onerror="this.style.display='none'">
|
||||
{{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>
|
||||
{{end}}
|
||||
<div class="experience-content">
|
||||
<div class="experience-header">
|
||||
<div class="experience-title-line">
|
||||
@@ -93,6 +95,10 @@
|
||||
{{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>
|
||||
|
||||
+25
-11
@@ -39,6 +39,9 @@
|
||||
integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Iconify -->
|
||||
<script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
|
||||
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="/static/css/main.css">
|
||||
<link rel="stylesheet" href="/static/css/logo-toggle.css">
|
||||
@@ -96,9 +99,7 @@
|
||||
<div class="action-bar-content">
|
||||
<!-- Left: Site Title -->
|
||||
<div class="site-title">
|
||||
<svg class="site-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20M10,19H8V14H10V19M14,19H12V12H14V19M10,11H8V9H10V11Z"/>
|
||||
</svg>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@@ -106,32 +107,44 @@
|
||||
<div class="toggle-controls-center">
|
||||
<!-- Language toggle -->
|
||||
<div class="language-toggle">
|
||||
<span class="toggle-label-left">EN</span>
|
||||
<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">ES</span>
|
||||
<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: CV Length Toggle -->
|
||||
<div class="cv-length-toggle">
|
||||
<span class="toggle-label-left">{{if eq .Lang "es"}}Corto{{else}}Short{{end}}</span>
|
||||
<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">{{if eq .Lang "es"}}Largo{{else}}Long{{end}}</span>
|
||||
<span class="toggle-label-right">
|
||||
<span class="iconify" data-icon="mdi:file-document-multiple-outline" data-width="24" data-height="24"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Center Right: Logo Toggle -->
|
||||
<div class="logo-toggle">
|
||||
<span class="toggle-label-left">{{if eq .Lang "es"}}Sin logos{{else}}No logos{{end}}</span>
|
||||
<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" onclick="toggleLogos()" aria-label="{{if eq .Lang "es"}}Mostrar logos de empresas{{else}}Show company logos{{end}}">
|
||||
<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">{{if eq .Lang "es"}}Logos{{else}}Logos{{end}}</span>
|
||||
<span class="toggle-label-right">
|
||||
<span class="iconify" data-icon="mdi:image-multiple-outline" data-width="24" data-height="24"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -236,9 +249,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize with short version
|
||||
// Initialize with short version and logos enabled
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.querySelector('.cv-paper').classList.add('cv-short');
|
||||
document.querySelector('.cv-paper').classList.add('show-logos');
|
||||
});
|
||||
|
||||
// Error handling utility
|
||||
|
||||
Reference in New Issue
Block a user