diff --git a/doc/2-MODERN-WEB-TECHNIQUES.md b/doc/2-MODERN-WEB-TECHNIQUES.md
index 9cf015a..57181bf 100644
--- a/doc/2-MODERN-WEB-TECHNIQUES.md
+++ b/doc/2-MODERN-WEB-TECHNIQUES.md
@@ -1994,12 +1994,23 @@ document.addEventListener('htmx:afterSettle', function(evt) {
**Implementation Locations:**
- **CSS:** `static/css/skeleton.css` - Complete skeleton system with shimmer animations
- **JavaScript:** `static/js/main.js` (lines 231-273) - HTMX event handlers for skeleton control
-- **Templates:** `templates/partials/sections/header.html` - Component wrapper structure
+- **Templates (ALL 13 sections):**
+ - `templates/partials/sections/header.html` - Header with name, photo, intro
+ - `templates/partials/sections/education.html` - Education history
+ - `templates/partials/sections/skills-summary.html` - Skills overview
+ - `templates/partials/sections/experience.html` - Work experience with logos
+ - `templates/partials/sections/awards.html` - Awards with logos and descriptions
+ - `templates/partials/sections/projects.html` - Projects with tech stacks
+ - `templates/partials/sections/courses.html` - Courses with institutions
+ - `templates/partials/sections/languages.html` - Language proficiency
+ - `templates/partials/sections/references.html` - Professional references
+ - `templates/partials/sections/other.html` - Additional information
+ - `templates/cv-content.html` - Skills sidebars (left/right) + footer
- **Page Containers:** `templates/cv-content.html` - Parent containers receiving `.loading` class
- **Language Switch:** `templates/language-switch.html` - `.selector-btn` triggers skeleton display
**Testing:** Automated tests in `tests/mjs/12-skeleton-language-transitions.test.mjs` verify:
-- ✅ Component wrapper structure (dual-state: actual + skeleton content)
+- ✅ Component wrapper structure (dual-state: actual + skeleton content) - **13 sections total**
- ✅ Skeleton CSS loaded (shimmer animation verified)
- ✅ First language switch (EN → ES) - Loading class added/removed
- ✅ Second language switch (ES → EN) - Consistent behavior
@@ -2007,22 +2018,30 @@ document.addEventListener('htmx:afterSettle', function(evt) {
- ✅ No stuck loading states (all containers clean after transition)
- ✅ JavaScript event handlers configured (languageSwitching flag)
-**Test Results:** 7/7 tests pass - Complete validation of skeleton loader functionality
+**Test Results:** 7/7 tests pass - Complete validation of skeleton loader functionality across all 13 curriculum sections
**Run Test:** `bun tests/mjs/12-skeleton-language-transitions.test.mjs`
-**Pixel-Perfect Matching:**
+**Pixel-Perfect Matching (Structural Fidelity):**
-| Component | Skeleton Dimensions | Actual Content Match |
-|-----------|---------------------|----------------------|
-| Header name | 40px height, 75% width | `` tag exact size |
-| Experience years | 24px height, 55% width | Subtitle exact size |
-| Profile photo | 150x200px, absolute positioned | Photo exact dimensions |
-| Section titles | 24px height + icon gap | Title + iconify-icon |
-| Experience items | 60px logo + flex content | Logo + text layout |
-| Skill badges | 32px height pills | Actual skill badge size |
+| Section | Skeleton Elements | Actual Content Match |
+|---------|-------------------|----------------------|
+| Header | Name (40px × 75%), experience years, photo, intro | ``, `
`, `![]()
`, intro text exact layout |
+| Education | Section title + 2-3 degree lines | Title + iconify-icon, degree items with dates |
+| Skills Summary | Section title + skill categories | Title + category headers with skill pills |
+| Experience | Logo + position line + dates + description + 3 responsibility lines | Company logo (60px), position text, date ranges, description paragraph, `
` list |
+| Awards | Logo + title line + issuer + description | Award logo, title text, issuer organization, description paragraph |
+| Projects | Icon + title line + dates + description + 2 tech lines | Project icon, title text, date range, description, tech stack badges |
+| Courses | Icon + title line + institution + dates | Course icon, course name, institution name, completion date |
+| Languages | Section title + language items with proficiency | Title + language name with proficiency level |
+| References | Section title + reference entries | Title + referee name and title |
+| Skills Sidebars | Accordion header + category sections + skill items | Accordion structure with categories and skill pills |
-**Key Innovation:** Component-level architecture allows each CV section to independently show loading state without affecting rest of page. Skeletons are absolutely positioned overlays, so they don't disrupt document flow.
+**Key Innovation:**
+- **Structural fidelity** - Each skeleton mirrors the exact HTML structure of its actual content (not just generic boxes)
+- **Component-level architecture** - Each CV section independently shows loading state without affecting rest of page
+- **Absolutely positioned overlays** - Skeletons don't disrupt document flow, preventing layout shift
+- **Realistic placeholders** - Multiple skeleton items per section (e.g., 3 experience items, 2 projects) match expected content count
---
diff --git a/static/css/skeleton.css b/static/css/skeleton.css
index fe7f354..b181f49 100644
--- a/static/css/skeleton.css
+++ b/static/css/skeleton.css
@@ -196,6 +196,30 @@
gap: 8px;
}
+/* NEW: Structural skeleton lines for experience */
+.skeleton-position-line {
+ height: 20px;
+ width: 80%;
+}
+
+.skeleton-date-line {
+ height: 14px;
+ width: 50%;
+}
+
+.skeleton-description-line {
+ height: 16px;
+ width: 100%;
+ margin-top: 4px;
+}
+
+.skeleton-responsibility-line {
+ height: 14px;
+ width: 100%;
+ margin-left: 16px; /* Indent like list items */
+}
+
+/* Legacy styles (keeping for backward compatibility) */
.skeleton-position {
height: 20px;
width: 80%;
@@ -216,22 +240,261 @@
width: 85%;
}
+/* Section Skeleton Base */
+.skeleton-section {
+ padding: 16px 0;
+}
+
+.skeleton-section-title {
+ height: 28px;
+ width: 35%;
+ margin-bottom: 20px;
+}
+
/* Education Item Skeleton */
.skeleton-education-item {
- margin-bottom: 16px;
+ height: 48px;
+ width: 100%;
+ margin-bottom: 12px;
}
-.skeleton-degree {
+.skeleton-education-item:last-child {
+ margin-bottom: 0;
+}
+
+/* Skills Summary Skeleton */
+.skeleton-summary-paragraph {
height: 18px;
- width: 75%;
- margin-bottom: 6px;
+ width: 100%;
+ margin-bottom: 10px;
}
-.skeleton-institution {
+.skeleton-summary-paragraph:last-child {
+ margin-bottom: 0;
+}
+
+/* Award Item Skeleton */
+.skeleton-award-item {
+ display: flex;
+ gap: 16px;
+ margin-bottom: 24px;
+}
+
+.skeleton-award-logo {
+ width: 60px;
+ height: 60px;
+ border-radius: 8px;
+ flex-shrink: 0;
+}
+
+.skeleton-award-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+/* NEW: Structural skeleton lines for awards */
+.skeleton-award-title-line {
+ height: 20px;
+ width: 70%;
+}
+
+.skeleton-award-info-line {
+ height: 14px;
+ width: 50%;
+}
+
+/* Legacy styles (keeping for backward compatibility) */
+.skeleton-award-title {
+ height: 20px;
+ width: 70%;
+}
+
+.skeleton-award-info {
height: 16px;
width: 50%;
}
+.skeleton-award-description {
+ height: 40px;
+ width: 100%;
+ margin-top: 4px;
+}
+
+/* Project Item Skeleton */
+.skeleton-project-item {
+ display: flex;
+ gap: 16px;
+ margin-bottom: 24px;
+}
+
+.skeleton-project-icon {
+ width: 80px;
+ height: 80px;
+ border-radius: 8px;
+ flex-shrink: 0;
+}
+
+.skeleton-project-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+/* NEW: Structural skeleton lines for projects */
+.skeleton-project-title-line {
+ height: 20px;
+ width: 75%;
+}
+
+.skeleton-tech-line {
+ height: 14px;
+ width: 85%;
+ margin-top: 4px;
+}
+
+.skeleton-footer-line {
+ height: 16px;
+ width: 70%;
+ margin-top: 16px;
+}
+
+/* Legacy styles (keeping for backward compatibility) */
+.skeleton-project-title {
+ height: 20px;
+ width: 75%;
+}
+
+.skeleton-project-info {
+ height: 16px;
+ width: 55%;
+}
+
+.skeleton-project-description {
+ height: 40px;
+ width: 100%;
+ margin-top: 4px;
+}
+
+.skeleton-project-description.short {
+ width: 80%;
+}
+
+/* Course Item Skeleton */
+.skeleton-course-item {
+ display: flex;
+ gap: 16px;
+ margin-bottom: 20px;
+}
+
+.skeleton-course-icon {
+ width: 80px;
+ height: 80px;
+ border-radius: 8px;
+ flex-shrink: 0;
+}
+
+.skeleton-course-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+/* NEW: Structural skeleton lines for courses */
+.skeleton-course-title-line {
+ height: 18px;
+ width: 70%;
+}
+
+.skeleton-course-info-line {
+ height: 14px;
+ width: 60%;
+}
+
+/* Legacy styles (keeping for backward compatibility) */
+.skeleton-course-title {
+ height: 18px;
+ width: 70%;
+}
+
+.skeleton-course-info {
+ height: 16px;
+ width: 60%;
+}
+
+/* Language Item Skeleton */
+.skeleton-language-item {
+ height: 20px;
+ width: 100%;
+ margin-bottom: 12px;
+}
+
+.skeleton-language-item:last-child {
+ margin-bottom: 0;
+}
+
+/* Reference Item Skeleton */
+.skeleton-reference-item {
+ height: 22px;
+ width: 100%;
+ margin-bottom: 10px;
+}
+
+.skeleton-reference-item:last-child {
+ margin-bottom: 0;
+}
+
+/* Other Section Skeleton */
+.skeleton-other-item {
+ height: 20px;
+ width: 60%;
+}
+
+/* Sidebar Skeleton */
+.skeleton-sidebar {
+ padding: 16px 0;
+}
+
+.skeleton-sidebar-header {
+ height: 28px;
+ width: 80%;
+ margin-bottom: 20px;
+}
+
+/* Skill Item Skeleton (Sidebar) - Already defined above but keeping for reference */
+
+/* Footer Skeleton */
+.skeleton-footer {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 16px 0;
+}
+
+.skeleton-footer-item {
+ height: 20px;
+ width: 100%;
+}
+
+.skeleton-footer-item:nth-child(2) {
+ width: 90%;
+}
+
+.skeleton-footer-item:nth-child(3) {
+ width: 85%;
+}
+
+.skeleton-footer-item:nth-child(4) {
+ width: 80%;
+}
+
+.skeleton-footer-item:nth-child(5) {
+ width: 75%;
+}
+
/* Text Block Skeletons (Generic) */
.skeleton-text {
height: 16px;
diff --git a/templates/cv-content.html b/templates/cv-content.html
index 2e1afbe..07180a9 100644
--- a/templates/cv-content.html
+++ b/templates/cv-content.html
@@ -11,28 +11,53 @@
-