From 481003fcf8ee52b1bc00179fe51ce1b0acf7e398 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Tue, 18 Nov 2025 13:03:15 +0000
Subject: [PATCH] refactor: update skeleton header to pixel-perfect match
 actual layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updates skeleton header to exactly match the actual CV header layout with
photo absolutely positioned on the right side.

**Layout Changes:**
- Photo: 150x200px positioned absolutely (top: 15px, right: 15px)
- Name: 40px height (h1 size)
- Subtitle: 24px height (larger)
- Intro text: 90px height (3-4 lines)
- Header has padding-right: 185px to accommodate photo
- Removed flex layout, using absolute positioning like actual

**Visual Improvements:**
- Photo border: 3px solid #e8e8e8 (matches actual white border)
- No border-radius on photo (matches actual)
- Larger text blocks for better visual match
- Proper spacing between elements

**Tests:**
- test-skeleton-verify.mjs: ✅ All 4 language switches pass
- Skeleton displays correctly on every transition
---
 static/css/skeleton.css                 | 36 +++++++++++++++----------
 templates/partials/sections/header.html |  8 +++---
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/static/css/skeleton.css b/static/css/skeleton.css
index c3d653c..fe7f354 100644
--- a/static/css/skeleton.css
+++ b/static/css/skeleton.css
@@ -78,37 +78,45 @@
    ======================================================================== */
 
 /* Header Section Skeleton */
+/* Matches actual header layout with photo absolutely positioned on right */
 .skeleton-header {
-  display: flex;
-  gap: 20px;
-  margin-bottom: 20px;
+  position: relative;
+  padding-right: 185px; /* Match .cv-header-left padding */
+  min-height: 200px; /* Ensure space for photo */
 }
 
 .skeleton-header-text {
-  flex: 1;
+  position: relative;
+  z-index: 1;
 }
 
 .skeleton-name {
-  height: 32px;
-  width: 70%;
-  margin-bottom: 8px;
+  height: 40px; /* Larger to match h1 */
+  width: 75%;
+  margin-bottom: 12px;
 }
 
 .skeleton-experience-years {
-  height: 20px;
-  width: 50%;
-  margin-bottom: 16px;
+  height: 24px; /* Larger subtitle */
+  width: 55%;
+  margin-bottom: 24px;
 }
 
 .skeleton-photo {
-  width: 120px;
-  height: 120px;
-  border-radius: 8px;
+  width: 150px;  /* Match actual photo */
+  height: 200px; /* Match actual photo */
+  border-radius: 0; /* No border-radius on actual photo */
+  border: 3px solid #e8e8e8; /* Match photo border style */
+
+  /* Absolute positioning to match actual layout */
+  position: absolute;
+  top: 15px;
+  right: 15px;
   flex-shrink: 0;
 }
 
 .skeleton-intro {
-  height: 60px;
+  height: 90px; /* Taller for 3-4 lines of text */
   width: 100%;
   margin-top: 12px;
 }
diff --git a/templates/partials/sections/header.html b/templates/partials/sections/header.html
index 766a0fc..c158b05 100644
--- a/templates/partials/sections/header.html
+++ b/templates/partials/sections/header.html
@@ -22,12 +22,10 @@
     <!-- Skeleton Content -->
     <div class="skeleton-content">
         <div class="skeleton-header">
-            <div class="skeleton-header-text">
-                <div class="skeleton skeleton-name"></div>
-                <div class="skeleton skeleton-experience-years"></div>
-                <div class="skeleton skeleton-intro"></div>
-            </div>
+            <div class="skeleton skeleton-name"></div>
+            <div class="skeleton skeleton-experience-years"></div>
             <div class="skeleton skeleton-photo"></div>
+            <div class="skeleton skeleton-intro"></div>
         </div>
     </div>
 </div>