juanatsap
b5a50ca3ef
Reduces HTTP requests from 44+ individual images to 3 sprite sheets (~93% reduction). Includes Go sprite generator tool, CSS classes, template integration, and E2E tests. - Add cmd/sprites/main.go for sprite generation (60x60px + 120x120px @2x) - Add _sprites.css with responsive sizing and retina support - Update templates to use sprites with logoIndex fallback - Add Makefile targets: sprites, sprites-clean - Add 9-test E2E suite for sprite functionality - Add doc/22-SPRITES.md with usage documentation
92 lines
4.6 KiB
HTML
92 lines
4.6 KiB
HTML
{{define "section-experience"}}
|
|
<!-- Experience -->
|
|
<section id="experience" class="cv-section component-wrapper">
|
|
<!-- Actual Content -->
|
|
<div class="actual-content">
|
|
<details open>
|
|
<summary>
|
|
<h3 class="section-title">
|
|
<iconify-icon icon="mdi:office-building" width="24" height="24" class="section-icon"></iconify-icon>
|
|
{{.UI.Navigation.Experience}}
|
|
</h3>
|
|
</summary>
|
|
|
|
{{range .CV.Experience}}
|
|
<div class="experience-item" id="exp-{{.CompanyID}}" data-company="{{.CompanyID}}" data-title="{{.Company}}" data-position="{{.Position}}">
|
|
<div class="company-logo">
|
|
{{if .LogoIndex}}
|
|
<span class="icon-sprite icon-section icon-company" style="--icon-index: {{.LogoIndex}};" role="img" aria-label="{{.Company}} logo"></span>
|
|
{{else if .CompanyLogo}}
|
|
<img src="/static/images/companies/{{.CompanyLogo}}" alt="{{.Company}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:office-building\' width=\'80\' height=\'80\' class=\'default-company-icon\'></iconify-icon>'">
|
|
{{else}}
|
|
<iconify-icon icon="mdi:office-building" width="80" height="80" class="default-company-icon"></iconify-icon>
|
|
{{end}}
|
|
</div>
|
|
<div class="experience-content">
|
|
<strong>{{.Position}}{{if .Company}} - {{if .CompanyURL}}<a href="{{.CompanyURL}}" target="_blank" rel="noopener noreferrer">{{.Company}}</a>{{else}}{{.Company}}{{end}}{{if .Duration}} - <span class="duration-text">{{.Duration}}</span>{{end}}{{end}}</strong>
|
|
{{if .Current}}<span class="current-badge">{{$.UI.Sections.CurrentBadge}}</span>{{end}}
|
|
{{if .Expired}}<span class="expired-badge">{{$.UI.Sections.ExpiredBadge}}</span>{{end}}
|
|
<br>
|
|
<small>{{.StartDate}} / {{if .Current}}{{$.UI.Sections.Present}}{{else}}{{.EndDate}}{{end}} - ({{.Location}})</small>
|
|
|
|
{{if .ShortDescription}}
|
|
<p class="experience-desc short-desc">{{.ShortDescription | safeHTML}}</p>
|
|
{{end}}
|
|
|
|
{{if .Responsibilities}}
|
|
<ul class="responsibilities long-only">
|
|
{{range .Responsibilities}}
|
|
<li>{{. | safeHTML}}</li>
|
|
{{end}}
|
|
</ul>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</details>
|
|
</div>
|
|
|
|
<!-- Skeleton Content -->
|
|
<div class="skeleton-content">
|
|
<div class="skeleton-section">
|
|
<div class="skeleton skeleton-section-title"></div>
|
|
|
|
<!-- Experience Item 1 - Full structure -->
|
|
<div class="skeleton-experience-item">
|
|
<div class="skeleton skeleton-company-logo"></div>
|
|
<div class="skeleton-experience-content">
|
|
<div class="skeleton skeleton-position-line"></div>
|
|
<div class="skeleton skeleton-date-line"></div>
|
|
<div class="skeleton skeleton-description-line"></div>
|
|
<div class="skeleton skeleton-responsibility-line"></div>
|
|
<div class="skeleton skeleton-responsibility-line" style="width: 95%;"></div>
|
|
<div class="skeleton skeleton-responsibility-line" style="width: 90%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Experience Item 2 - Full structure -->
|
|
<div class="skeleton-experience-item">
|
|
<div class="skeleton skeleton-company-logo"></div>
|
|
<div class="skeleton-experience-content">
|
|
<div class="skeleton skeleton-position-line"></div>
|
|
<div class="skeleton skeleton-date-line"></div>
|
|
<div class="skeleton skeleton-description-line"></div>
|
|
<div class="skeleton skeleton-responsibility-line"></div>
|
|
<div class="skeleton skeleton-responsibility-line" style="width: 92%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Experience Item 3 - Shorter -->
|
|
<div class="skeleton-experience-item">
|
|
<div class="skeleton skeleton-company-logo"></div>
|
|
<div class="skeleton-experience-content">
|
|
<div class="skeleton skeleton-position-line"></div>
|
|
<div class="skeleton skeleton-date-line"></div>
|
|
<div class="skeleton skeleton-description-line" style="width: 85%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{end}}
|