juanatsap
d5c90248cc
Bubbles: - Teams-style layout: bot avatar (green circle) on left, message beside it - User messages right-aligned, no avatar (clean, like Teams) - Rounded bubbles (border-radius: 16px) instead of square - Distinct corner radii for conversation flow Navigation: - Links no longer close the chat — panel stays open for continued navigation - Added #certifications anchor (alias to courses section) - Fixed agent instruction to use #courses for certifications references Theme: - All colors use CSS variables from _themes.css - Automatically adapts to light/dark without explicit .theme-clean overrides - Panel uses --paper-bg (white in light, dark in dark theme) Size modes: - 3 discrete toggle buttons: compact, half-screen, fullscreen - Active state highlighted, direct selection (no confusing cycling) - Removed chat-half-left (simplified to compact/half/full) Intelligence: - React query now returns results (verified: 4 companies + 2 projects + skills)
87 lines
3.8 KiB
HTML
87 lines
3.8 KiB
HTML
{{define "section-courses"}}
|
|
<!-- Courses Section -->
|
|
{{if .CV.Courses}}
|
|
<span id="certifications"></span>
|
|
<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}}">
|
|
<div class="course-icon">
|
|
{{if .LogoIndex}}
|
|
<span class="icon-sprite icon-section icon-course" style="--icon-index: {{.LogoIndex}};" role="img" aria-label="{{.Title}} logo"></span>
|
|
{{else if .CourseLogo}}
|
|
<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>'">
|
|
{{else}}
|
|
<iconify-icon icon="mdi:school" width="80" height="80" class="default-course-icon"></iconify-icon>
|
|
{{end}}
|
|
</div>
|
|
<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}}
|