juanatsap
481003fcf8
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
33 lines
1.3 KiB
HTML
33 lines
1.3 KiB
HTML
{{define "section-header"}}
|
|
<!-- Header with Name and Photo -->
|
|
<div class="cv-header component-wrapper">
|
|
<!-- Actual Content -->
|
|
<div class="actual-content">
|
|
<div class="cv-header-content">
|
|
<div class="cv-header-left">
|
|
<h1 class="cv-name">Moreno Rubio, Juan Andrés</h1>
|
|
<p class="years-experience">{{.YearsOfExperience}} {{if eq .Lang "es"}}años de experiencia{{else}}years of experience{{end}}</p>
|
|
|
|
<!-- Photo positioned for mobile (centered between name and intro) -->
|
|
<div class="cv-photo">
|
|
<img src="/static/images/profile/dni.jpeg" alt="{{.CV.Personal.Name}}" onerror="this.src='/static/images/profile/placeholder.svg'">
|
|
</div>
|
|
|
|
<!-- Intro/Excerpt Text - No section heading, just the text -->
|
|
<div class="intro-text">{{.CV.Summary}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Skeleton Content -->
|
|
<div class="skeleton-content">
|
|
<div class="skeleton-header">
|
|
<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>
|
|
{{end}}
|