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

internal/handlers/cv.go

@@ -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
+}

internal/models/cv.go

@@ -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 {

static/css/logo-toggle.css

@@ -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;
+    width: 64px;
-    height: 48px;
+    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;
 }

static/css/main.css

@@ -437,11 +437,16 @@ a:hover {
 
 .experience-period,
 .experience-separator,
-.experience-location {
+.experience-location,
-    color: #aaa;
+.experience-duration {
-    font-weight: 500;
+    color: #555;
+    font-weight: 600;
     display: inline-block;
-    font-size: 0.9rem;
+    font-size: 1.05rem;
+}
+
+.experience-duration {
+    font-style: italic;
 }
 
 .short-desc {

templates/cv-content.html

@@ -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">&nbsp;-&nbsp;</span>
+                                <span class="experience-duration">{{.Duration}}</span>
+                                {{end}}
                                 <span class="experience-separator">&nbsp;-&nbsp;</span>
                                 <span class="experience-location">({{.Location}})</span>
                             </div>

templates/index.html

@@ -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">
+                <span class="iconify site-icon" data-icon="mdi:file-account" data-width="24" data-height="24"></span>
-                    <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="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