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

templates/partials/sections/projects.html

@@ -1,15 +1,17 @@
 {{define "section-projects"}}
 <!-- Projects Section -->
 {{if .CV.Projects}}
-<section id="projects" class="cv-section">
-    <details open>
-        <summary>
-            <h3 class="section-title">
-                <iconify-icon icon="mdi:web" width="24" height="24" class="section-icon"></iconify-icon>
-                {{if eq .Lang "es"}}Proyectos Personales / Freelance{{else}}Personal / Freelance Projects{{end}}
-            </h3>
-        </summary>
-    {{range .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>
+                    {{if eq .Lang "es"}}Proyectos Personales / Freelance{{else}}Personal / Freelance Projects{{end}}
+                </h3>
+            </summary>
+        {{range .CV.Projects}}
     <div class="project-item">
         {{if .ProjectLogo}}
         <div class="project-icon">
@@ -55,12 +57,47 @@
     </div>
     {{end}}
 
-    <!-- Link to full portfolio -->
-    <div class="projects-footer">
-        <p>{{if eq .Lang "es"}}Ver todos los proyectos en mi{{else}}See all projects on my{{end}}
-        <a href="{{.CV.Personal.Domestika}}" target="_blank" rel="noopener noreferrer"><strong>{{if eq .Lang "es"}}portfolio de Domestika{{else}}Domestika portfolio{{end}}</strong></a></p>
+        <!-- Link to full portfolio -->
+        <div class="projects-footer">
+            <p>{{if eq .Lang "es"}}Ver todos los proyectos en mi{{else}}See all projects on my{{end}}
+            <a href="{{.CV.Personal.Domestika}}" target="_blank" rel="noopener noreferrer"><strong>{{if eq .Lang "es"}}portfolio de Domestika{{else}}Domestika portfolio{{end}}</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>
-    </details>
 </section>
 {{end}}
 {{end}}