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
36 lines
2.8 KiB
HTML
36 lines
2.8 KiB
HTML
{{define "section-skills-summary"}}
|
|
<!-- Skills Summary -->
|
|
<section id="skills" class="cv-section component-wrapper">
|
|
<!-- Actual Content -->
|
|
<div class="actual-content">
|
|
<details open>
|
|
<summary>
|
|
<h3 class="section-title">
|
|
<iconify-icon icon="mdi:brain" width="24" height="24" class="section-icon"></iconify-icon>
|
|
{{if eq .Lang "es"}}Competencias{{else}}Skills{{end}}
|
|
</h3>
|
|
</summary>
|
|
<p class="summary-text">
|
|
{{if eq .Lang "es"}}
|
|
Desarrollador <strong>full-stack</strong> con experiencia en <strong>Go</strong>, <strong>Node.js</strong>, <strong>React</strong> y <strong>HTMX</strong> para <strong>aplicaciones modernas</strong>, además de conocimientos en Java y PHP para proyectos legacy. He trabajado en <strong>unos 20 sitios web</strong> y realizado <strong>consultoría para 35-40 clientes internacionales</strong>, desde e-commerce y plataformas empresariales hasta <strong>sistemas de autenticación</strong> que gestionan <strong>millones de usuarios</strong>. Familiarizado con flujos de trabajo asistidos por <strong>IA</strong> y gestión de infraestructura (<strong>Linux</strong>, <strong>Docker</strong>, <strong>CI/CD</strong>). Me adapto bien tanto al trabajo independiente como colaborativo en equipos internacionales.
|
|
{{else}}
|
|
<strong>Full-stack</strong> developer with experience in <strong>Go</strong>, <strong>Node.js</strong>, <strong>React</strong>, and <strong>HTMX</strong> for <strong>modern applications</strong>, plus Java and PHP knowledge for legacy projects. I've worked on <strong>around 20 websites</strong> and provided <strong>consulting for 35-40 international clients</strong>, from e-commerce and enterprise platforms to <strong>authentication systems</strong> managing <strong>millions of users</strong>. Familiar with <strong>AI-assisted development</strong> workflows and infrastructure management (<strong>Linux</strong>, <strong>Docker</strong>, <strong>CI/CD</strong>). I adapt well to both independent work and collaborative teams across different countries.
|
|
{{end}}
|
|
</p>
|
|
</details>
|
|
</div>
|
|
|
|
<!-- Skeleton Content -->
|
|
<div class="skeleton-content">
|
|
<div class="skeleton-section">
|
|
<div class="skeleton skeleton-section-title"></div>
|
|
<div class="skeleton skeleton-summary-paragraph"></div>
|
|
<div class="skeleton skeleton-summary-paragraph" style="width: 95%;"></div>
|
|
<div class="skeleton skeleton-summary-paragraph" style="width: 90%;"></div>
|
|
<div class="skeleton skeleton-summary-paragraph" style="width: 85%;"></div>
|
|
<div class="skeleton skeleton-summary-paragraph" style="width: 92%;"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{end}}
|