Files
cv-site/templates/partials/sections/courses.html
T
juanatsap 9a848e8c53 feat: Add CMD+K command palette with ninja-keys integration
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.
2025-12-01 13:03:06 +00:00

86 lines
3.6 KiB
HTML

{{define "section-courses"}}
<!-- Courses Section -->
{{if .CV.Courses}}
<section id="courses" class="cv-section component-wrapper">
<!-- Actual Content -->
<div class="actual-content">
<details open>
<summary>
<h3 class="section-title">
<iconify-icon icon="mdi:school" width="24" height="24" class="section-icon"></iconify-icon>
{{.UI.Navigation.Courses}}
</h3>
</summary>
{{range .CV.Courses}}
<div class="course-item" id="course-{{.CourseID}}" data-course="{{.CourseID}}" data-title="{{.Title}}" data-institution="{{.Institution}}">
{{if .CourseLogo}}
<div class="course-icon">
<img src="/static/images/courses/{{.CourseLogo}}" alt="{{.Title}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:school\' width=\'80\' height=\'80\' class=\'default-course-icon\'></iconify-icon>'">
</div>
{{else}}
<div class="course-icon">
<iconify-icon icon="mdi:school" width="80" height="80" class="default-course-icon"></iconify-icon>
</div>
{{end}}
<div class="course-content">
<strong>{{.Title}}</strong><br>
<small>{{.Institution}} - {{.Date}} - ({{.Location}})</small>
{{if .ShortDescription}}
<p class="course-desc short-desc">{{.ShortDescription}}</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>
<!-- Course Item 1 - With description and responsibilities -->
<div class="skeleton-course-item">
<div class="skeleton skeleton-course-icon"></div>
<div class="skeleton-course-content">
<div class="skeleton skeleton-course-title-line"></div>
<div class="skeleton skeleton-course-info-line"></div>
<div class="skeleton skeleton-description-line"></div>
<div class="skeleton skeleton-responsibility-line"></div>
<div class="skeleton skeleton-responsibility-line" style="width: 94%;"></div>
</div>
</div>
<!-- Course Item 2 - Shorter -->
<div class="skeleton-course-item">
<div class="skeleton skeleton-course-icon"></div>
<div class="skeleton-course-content">
<div class="skeleton skeleton-course-title-line"></div>
<div class="skeleton skeleton-course-info-line"></div>
<div class="skeleton skeleton-description-line" style="width: 85%;"></div>
</div>
</div>
<!-- Course Item 3 -->
<div class="skeleton-course-item">
<div class="skeleton skeleton-course-icon"></div>
<div class="skeleton-course-content">
<div class="skeleton skeleton-course-title-line"></div>
<div class="skeleton skeleton-course-info-line"></div>
</div>
</div>
</div>
</div>
</section>
{{end}}
{{end}}