juanatsap
2ca13a218e
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
57 lines
2.4 KiB
HTML
57 lines
2.4 KiB
HTML
{{define "cv-footer"}}
|
|
<!-- Footer - Only on Page 2 -->
|
|
<footer class="cv-footer component-wrapper">
|
|
<!-- Actual Content -->
|
|
<div class="actual-content">
|
|
<ul class="footer-content">
|
|
<li>
|
|
<div class="footer-label">linkedin_</div>
|
|
<div class="footer-separator"><i class="fa fa-circle"></i></div>
|
|
<div class="footer-value">
|
|
<a href="{{.CV.Personal.LinkedIn}}" target="_blank" rel="noopener noreferrer">{{.CV.Personal.LinkedIn}}</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="footer-label">github_</div>
|
|
<div class="footer-separator"><i class="fa fa-circle"></i></div>
|
|
<div class="footer-value">
|
|
<a href="{{.CV.Personal.GitHub}}" target="_blank" rel="noopener noreferrer">{{.CV.Personal.GitHub}}</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="footer-label">domestika_</div>
|
|
<div class="footer-separator"><i class="fa fa-circle"></i></div>
|
|
<div class="footer-value">
|
|
<a href="{{.CV.Personal.Domestika}}" target="_blank" rel="noopener noreferrer">{{.CV.Personal.Domestika}}</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="footer-label">email@</div>
|
|
<div class="footer-separator"><i class="fa fa-circle"></i></div>
|
|
<div class="footer-value">
|
|
<a href="mailto:{{.CV.Personal.Email}}" target="_blank" rel="noopener noreferrer">{{.CV.Personal.Email}}</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="footer-label">phone#</div>
|
|
<div class="footer-separator"><i class="fa fa-circle"></i></div>
|
|
<div class="footer-value">
|
|
<a href="tel:+34676875420" target="_blank" rel="noopener noreferrer">+34 676 875 420</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Skeleton Content -->
|
|
<div class="skeleton-content">
|
|
<div class="skeleton-footer">
|
|
<div class="skeleton skeleton-footer-item"></div>
|
|
<div class="skeleton skeleton-footer-item"></div>
|
|
<div class="skeleton skeleton-footer-item"></div>
|
|
<div class="skeleton skeleton-footer-item"></div>
|
|
<div class="skeleton skeleton-footer-item"></div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
{{end}}
|