feat: Extend skeleton loaders to all 13 CV sections with structural fidelity
Implemented comprehensive skeleton loaders for the entire CV curriculum, providing smooth loading animations during language transitions across all sections. **Sections Implemented (13 total):** - Header (title-badges + personal info) - Education - Skills Summary - Experience (with company logos, descriptions, responsibilities) - Awards (with logos, issuers, descriptions) - Projects (with icons, descriptions, tech stacks) - Courses (with icons, institutions, dates) - Languages - References - Other Information - Skills Sidebars (left and right) - Footer **Key Features:** - Structural fidelity: Skeletons mirror exact HTML structure of actual content - Each section has realistic placeholders (e.g., 3 experience items, 2 projects) - Smooth CSS transitions with shimmer animations - Zero layout shift - Component-level architecture allows independent loading states **Technical Implementation:** - Modified all section templates in templates/partials/sections/ - Added .component-wrapper with .actual-content + .skeleton-content structure - Extended skeleton.css with structural skeleton classes - JavaScript event handlers in main.js already handle all sections via CSS cascade **Testing:** - Manual Playwright test: 13/13 component wrappers verified - Automated test: 7/7 tests passing - All skeleton loaders show during language switches - No stuck loading states **Documentation:** - Updated tests/TEST-SUMMARY.md with all 13 sections - Updated doc/2-MODERN-WEB-TECHNIQUES.md with comprehensive details - Added structural fidelity table showing skeleton elements for each section Files modified: 14 templates + CSS + 2 docs
This commit is contained in:
juanatsap
+90
-40
@@ -11,28 +11,53 @@
|
||||
<!-- Page 1 Content Grid: Left Sidebar + Main Content -->
|
||||
<div class="page-content">
|
||||
<!-- Left Sidebar - Skills (first half) -->
|
||||
<aside class="cv-sidebar cv-sidebar-left">
|
||||
<details class="sidebar-accordion" open>
|
||||
<summary class="sidebar-accordion-header">
|
||||
<iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
|
||||
<span>{{if eq .Lang "es"}}Competencias Técnicas{{else}}Technical Skills{{end}}</span>
|
||||
<iconify-icon icon="mdi:chevron-down" width="20" height="20" class="chevron"></iconify-icon>
|
||||
</summary>
|
||||
<div class="sidebar-accordion-content">
|
||||
{{range .SkillsLeft}}
|
||||
<section class="sidebar-section">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="sidebar-title">{{.Category}}</h3>
|
||||
</summary>
|
||||
<div class="sidebar-content">
|
||||
{{range .Items}}<div class="skill-item">{{.}}</div>{{end}}
|
||||
<aside class="cv-sidebar cv-sidebar-left component-wrapper">
|
||||
<!-- Actual Content -->
|
||||
<div class="actual-content">
|
||||
<details class="sidebar-accordion" open>
|
||||
<summary class="sidebar-accordion-header">
|
||||
<iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
|
||||
<span>{{if eq .Lang "es"}}Competencias Técnicas{{else}}Technical Skills{{end}}</span>
|
||||
<iconify-icon icon="mdi:chevron-down" width="20" height="20" class="chevron"></iconify-icon>
|
||||
</summary>
|
||||
<div class="sidebar-accordion-content">
|
||||
{{range .SkillsLeft}}
|
||||
<section class="sidebar-section">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="sidebar-title">{{.Category}}</h3>
|
||||
</summary>
|
||||
<div class="sidebar-content">
|
||||
{{range .Items}}<div class="skill-item">{{.}}</div>{{end}}
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Skeleton Content -->
|
||||
<div class="skeleton-content">
|
||||
<div class="skeleton-sidebar">
|
||||
<div class="skeleton skeleton-sidebar-header"></div>
|
||||
<div class="skeleton-skill-category">
|
||||
<div class="skeleton skeleton-skill-title"></div>
|
||||
<div class="skeleton-skill-items">
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="skeleton-skill-category">
|
||||
<div class="skeleton skeleton-skill-title"></div>
|
||||
<div class="skeleton-skill-items">
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area - Page 1 -->
|
||||
@@ -65,28 +90,53 @@
|
||||
</main>
|
||||
|
||||
<!-- Right Sidebar - Skills (second half) -->
|
||||
<aside class="cv-sidebar cv-sidebar-right">
|
||||
<details class="sidebar-accordion" open>
|
||||
<summary class="sidebar-accordion-header">
|
||||
<iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
|
||||
<span>{{if eq .Lang "es"}}Más Competencias{{else}}More Skills{{end}}</span>
|
||||
<iconify-icon icon="mdi:chevron-down" width="20" height="20" class="chevron"></iconify-icon>
|
||||
</summary>
|
||||
<div class="sidebar-accordion-content">
|
||||
{{range .SkillsRight}}
|
||||
<section class="sidebar-section">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="sidebar-title">{{.Category}}</h3>
|
||||
</summary>
|
||||
<div class="sidebar-content">
|
||||
{{range .Items}}<div class="skill-item">{{.}}</div>{{end}}
|
||||
<aside class="cv-sidebar cv-sidebar-right component-wrapper">
|
||||
<!-- Actual Content -->
|
||||
<div class="actual-content">
|
||||
<details class="sidebar-accordion" open>
|
||||
<summary class="sidebar-accordion-header">
|
||||
<iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
|
||||
<span>{{if eq .Lang "es"}}Más Competencias{{else}}More Skills{{end}}</span>
|
||||
<iconify-icon icon="mdi:chevron-down" width="20" height="20" class="chevron"></iconify-icon>
|
||||
</summary>
|
||||
<div class="sidebar-accordion-content">
|
||||
{{range .SkillsRight}}
|
||||
<section class="sidebar-section">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="sidebar-title">{{.Category}}</h3>
|
||||
</summary>
|
||||
<div class="sidebar-content">
|
||||
{{range .Items}}<div class="skill-item">{{.}}</div>{{end}}
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Skeleton Content -->
|
||||
<div class="skeleton-content">
|
||||
<div class="skeleton-sidebar">
|
||||
<div class="skeleton skeleton-sidebar-header"></div>
|
||||
<div class="skeleton-skill-category">
|
||||
<div class="skeleton skeleton-skill-title"></div>
|
||||
<div class="skeleton-skill-items">
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="skeleton-skill-category">
|
||||
<div class="skeleton skeleton-skill-title"></div>
|
||||
<div class="skeleton-skill-items">
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user