juanatsap
9636b3659f
- Move all bilingual text from templates to UI JSON (labels, buttons, modals) - Move skills summary paragraph to CV JSON with HTML support - Add new UI sections: navigation, viewControls, sections, footer, portfolio, pdfModal, shortcutsModal, infoModal, widgets - Update Go structs to match expanded JSON structure - Add template.HTML type for CV.SkillsSummary field - Add JSON content validation test (70-json-content-validation.test.mjs) Templates now contain only structural logic (CSS classes, HTML attributes) while all user-visible text loads from JSON files for proper i18n support.
104 lines
4.6 KiB
HTML
104 lines
4.6 KiB
HTML
{{define "section-projects"}}
|
|
<!-- Projects Section -->
|
|
{{if .CV.Projects}}
|
|
<section id="projects" class="cv-section component-wrapper">
|
|
<!-- Actual Content -->
|
|
<div class="actual-content">
|
|
<details open>
|
|
<summary>
|
|
<h3 class="section-title">
|
|
<iconify-icon icon="mdi:web" width="24" height="24" class="section-icon"></iconify-icon>
|
|
{{.UI.Navigation.Projects}}
|
|
</h3>
|
|
</summary>
|
|
{{range .CV.Projects}}
|
|
<div class="project-item">
|
|
{{if .ProjectLogo}}
|
|
<div class="project-icon">
|
|
<img src="/static/images/projects/{{.ProjectLogo}}" alt="{{.Title}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:web\' width=\'80\' height=\'80\' class=\'default-project-icon\'></iconify-icon>'">
|
|
</div>
|
|
{{else}}
|
|
<div class="project-icon">
|
|
<iconify-icon icon="mdi:web" width="80" height="80" class="default-project-icon"></iconify-icon>
|
|
</div>
|
|
{{end}}
|
|
<div class="project-content">
|
|
<strong>
|
|
{{if .ProjectName}}
|
|
{{if .URL}}<a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.ProjectName}}</a>{{else}}{{.ProjectName}}{{end}}{{if .ProjectDesc}} - {{.ProjectDesc}}{{end}}
|
|
{{else}}
|
|
{{if .URL}}<a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.Title}}</a>{{else}}{{.Title}}{{end}}
|
|
{{end}}
|
|
</strong>
|
|
{{if .Current}}<span class="live-badge"><iconify-icon icon="mdi:wifi" width="14" height="14"></iconify-icon>LIVE</span>{{end}}
|
|
{{if .MaintainedBy}}<span class="maintained-badge">{{$.UI.Sections.MaintainedBy}} {{.MaintainedBy}}</span>{{end}}
|
|
<br>
|
|
<small>{{if .StartDate}}{{.StartDate}}{{if .Current}}{{if .DynamicDate}} / {{.DynamicDate}}{{else}} / {{$.UI.Sections.Present}}{{end}}{{end}}{{end}} - ({{.Location}})</small>
|
|
|
|
{{if .ShortDescription}}
|
|
<p class="project-desc short-desc">{{.ShortDescription | safeHTML}}</p>
|
|
{{end}}
|
|
|
|
{{if .Responsibilities}}
|
|
<ul class="responsibilities long-only">
|
|
{{range .Responsibilities}}
|
|
<li>{{. | safeHTML}}</li>
|
|
{{end}}
|
|
</ul>
|
|
{{end}}
|
|
|
|
{{if .Technologies}}
|
|
<div class="project-technologies long-only">
|
|
<strong>{{$.UI.Sections.Technologies}}</strong>
|
|
{{range $index, $tech := .Technologies}}{{if $index}}, {{end}}{{$tech}}{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
<!-- Link to full portfolio -->
|
|
<div class="projects-footer">
|
|
<p>{{.UI.Portfolio.SeeAllProjects}}
|
|
<a href="{{.CV.Personal.Domestika}}" target="_blank" rel="noopener noreferrer"><strong>{{.UI.Portfolio.DomestikaPortfolio}}</strong></a></p>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
|
|
<!-- Skeleton Content -->
|
|
<div class="skeleton-content">
|
|
<div class="skeleton-section">
|
|
<div class="skeleton skeleton-section-title"></div>
|
|
|
|
<!-- Project Item 1 - With responsibilities and technologies -->
|
|
<div class="skeleton-project-item">
|
|
<div class="skeleton skeleton-project-icon"></div>
|
|
<div class="skeleton-project-content">
|
|
<div class="skeleton skeleton-project-title-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: 93%;"></div>
|
|
<div class="skeleton skeleton-tech-line"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Item 2 - Shorter -->
|
|
<div class="skeleton-project-item">
|
|
<div class="skeleton skeleton-project-icon"></div>
|
|
<div class="skeleton-project-content">
|
|
<div class="skeleton skeleton-project-title-line"></div>
|
|
<div class="skeleton skeleton-date-line"></div>
|
|
<div class="skeleton skeleton-description-line" style="width: 88%;"></div>
|
|
<div class="skeleton skeleton-tech-line"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Projects footer -->
|
|
<div class="skeleton skeleton-footer-line"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
{{end}}
|