juanatsap
9a848e8c53
Implement a command palette accessible via CMD+K/Ctrl+K using the ninja-keys web component. Features include: - New /api/cmd-k endpoint serving dynamic CV entries (experiences, projects, courses) - Language-aware responses with 1-hour cache headers - Scroll-to-section functionality for quick navigation - Enhanced keyboard shortcuts modal with CMD+K documentation - Comprehensive test coverage for API and UI interactions Also includes cleanup of deprecated debug test files and various UI polish improvements to contact form, themes, and action bar components.
90 lines
4.4 KiB
HTML
90 lines
4.4 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 .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}}
|