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
This commit is contained in:
juanatsap
+90
-40
@@ -11,28 +11,53 @@
|
||||
<!-- Page 1 Content Grid: Left Sidebar + Main Content -->
|
||||
<div class="page-content">
|
||||
<!-- Left Sidebar - Skills (first half) -->
|
||||
<aside class="cv-sidebar cv-sidebar-left">
|
||||
<details class="sidebar-accordion" open>
|
||||
<summary class="sidebar-accordion-header">
|
||||
<iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
|
||||
<span>{{if eq .Lang "es"}}Competencias Técnicas{{else}}Technical Skills{{end}}</span>
|
||||
<iconify-icon icon="mdi:chevron-down" width="20" height="20" class="chevron"></iconify-icon>
|
||||
</summary>
|
||||
<div class="sidebar-accordion-content">
|
||||
{{range .SkillsLeft}}
|
||||
<section class="sidebar-section">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="sidebar-title">{{.Category}}</h3>
|
||||
</summary>
|
||||
<div class="sidebar-content">
|
||||
{{range .Items}}<div class="skill-item">{{.}}</div>{{end}}
|
||||
<aside class="cv-sidebar cv-sidebar-left component-wrapper">
|
||||
<!-- Actual Content -->
|
||||
<div class="actual-content">
|
||||
<details class="sidebar-accordion" open>
|
||||
<summary class="sidebar-accordion-header">
|
||||
<iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
|
||||
<span>{{if eq .Lang "es"}}Competencias Técnicas{{else}}Technical Skills{{end}}</span>
|
||||
<iconify-icon icon="mdi:chevron-down" width="20" height="20" class="chevron"></iconify-icon>
|
||||
</summary>
|
||||
<div class="sidebar-accordion-content">
|
||||
{{range .SkillsLeft}}
|
||||
<section class="sidebar-section">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="sidebar-title">{{.Category}}</h3>
|
||||
</summary>
|
||||
<div class="sidebar-content">
|
||||
{{range .Items}}<div class="skill-item">{{.}}</div>{{end}}
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Skeleton Content -->
|
||||
<div class="skeleton-content">
|
||||
<div class="skeleton-sidebar">
|
||||
<div class="skeleton skeleton-sidebar-header"></div>
|
||||
<div class="skeleton-skill-category">
|
||||
<div class="skeleton skeleton-skill-title"></div>
|
||||
<div class="skeleton-skill-items">
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="skeleton-skill-category">
|
||||
<div class="skeleton skeleton-skill-title"></div>
|
||||
<div class="skeleton-skill-items">
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area - Page 1 -->
|
||||
@@ -65,28 +90,53 @@
|
||||
</main>
|
||||
|
||||
<!-- Right Sidebar - Skills (second half) -->
|
||||
<aside class="cv-sidebar cv-sidebar-right">
|
||||
<details class="sidebar-accordion" open>
|
||||
<summary class="sidebar-accordion-header">
|
||||
<iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
|
||||
<span>{{if eq .Lang "es"}}Más Competencias{{else}}More Skills{{end}}</span>
|
||||
<iconify-icon icon="mdi:chevron-down" width="20" height="20" class="chevron"></iconify-icon>
|
||||
</summary>
|
||||
<div class="sidebar-accordion-content">
|
||||
{{range .SkillsRight}}
|
||||
<section class="sidebar-section">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="sidebar-title">{{.Category}}</h3>
|
||||
</summary>
|
||||
<div class="sidebar-content">
|
||||
{{range .Items}}<div class="skill-item">{{.}}</div>{{end}}
|
||||
<aside class="cv-sidebar cv-sidebar-right component-wrapper">
|
||||
<!-- Actual Content -->
|
||||
<div class="actual-content">
|
||||
<details class="sidebar-accordion" open>
|
||||
<summary class="sidebar-accordion-header">
|
||||
<iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
|
||||
<span>{{if eq .Lang "es"}}Más Competencias{{else}}More Skills{{end}}</span>
|
||||
<iconify-icon icon="mdi:chevron-down" width="20" height="20" class="chevron"></iconify-icon>
|
||||
</summary>
|
||||
<div class="sidebar-accordion-content">
|
||||
{{range .SkillsRight}}
|
||||
<section class="sidebar-section">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="sidebar-title">{{.Category}}</h3>
|
||||
</summary>
|
||||
<div class="sidebar-content">
|
||||
{{range .Items}}<div class="skill-item">{{.}}</div>{{end}}
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Skeleton Content -->
|
||||
<div class="skeleton-content">
|
||||
<div class="skeleton-sidebar">
|
||||
<div class="skeleton skeleton-sidebar-header"></div>
|
||||
<div class="skeleton-skill-category">
|
||||
<div class="skeleton skeleton-skill-title"></div>
|
||||
<div class="skeleton-skill-items">
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="skeleton-skill-category">
|
||||
<div class="skeleton skeleton-skill-title"></div>
|
||||
<div class="skeleton-skill-items">
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
<div class="skeleton skeleton-skill-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,42 +1,56 @@
|
||||
{{define "cv-footer"}}
|
||||
<!-- Footer - Only on Page 2 -->
|
||||
<footer class="cv-footer">
|
||||
<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>
|
||||
<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}}
|
||||
|
||||
@@ -1,40 +1,72 @@
|
||||
{{define "section-awards"}}
|
||||
<!-- Awards Section -->
|
||||
{{if .CV.Awards}}
|
||||
<section id="awards" class="cv-section">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:trophy" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Premios y Reconocimientos{{else}}Awards{{end}}
|
||||
</h3>
|
||||
</summary>
|
||||
{{range .CV.Awards}}
|
||||
<div class="award-item">
|
||||
{{if .AwardLogo}}
|
||||
<div class="award-logo">
|
||||
<img src="/static/images/companies/{{.AwardLogo}}" alt="{{.Title}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:trophy\' width=\'60\' height=\'60\' class=\'default-award-icon\'></iconify-icon>'">
|
||||
<section id="awards" class="cv-section component-wrapper">
|
||||
<!-- Actual Content -->
|
||||
<div class="actual-content">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:trophy" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Premios y Reconocimientos{{else}}Awards{{end}}
|
||||
</h3>
|
||||
</summary>
|
||||
{{range .CV.Awards}}
|
||||
<div class="award-item">
|
||||
{{if .AwardLogo}}
|
||||
<div class="award-logo">
|
||||
<img src="/static/images/companies/{{.AwardLogo}}" alt="{{.Title}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:trophy\' width=\'60\' height=\'60\' class=\'default-award-icon\'></iconify-icon>'">
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="award-content">
|
||||
<strong>{{.Title}}</strong><br>
|
||||
<small>{{.Issuer}} - {{.Date}}</small>
|
||||
|
||||
{{if .ShortDescription}}
|
||||
<p class="award-desc short-desc">{{.ShortDescription | safeHTML}}</p>
|
||||
{{end}}
|
||||
|
||||
{{if .Responsibilities}}
|
||||
<ul class="responsibilities long-only">
|
||||
{{range .Responsibilities}}
|
||||
<li>{{. | safeHTML}}</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="award-content">
|
||||
<strong>{{.Title}}</strong><br>
|
||||
<small>{{.Issuer}} - {{.Date}}</small>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
{{if .ShortDescription}}
|
||||
<p class="award-desc short-desc">{{.ShortDescription | safeHTML}}</p>
|
||||
{{end}}
|
||||
<!-- Skeleton Content -->
|
||||
<div class="skeleton-content">
|
||||
<div class="skeleton-section">
|
||||
<div class="skeleton skeleton-section-title"></div>
|
||||
|
||||
{{if .Responsibilities}}
|
||||
<ul class="responsibilities long-only">
|
||||
{{range .Responsibilities}}
|
||||
<li>{{. | safeHTML}}</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
{{end}}
|
||||
<!-- Award Item 1 - With description and responsibilities -->
|
||||
<div class="skeleton-award-item">
|
||||
<div class="skeleton skeleton-award-logo"></div>
|
||||
<div class="skeleton-award-content">
|
||||
<div class="skeleton skeleton-award-title-line"></div>
|
||||
<div class="skeleton skeleton-award-info-line"></div>
|
||||
<div class="skeleton skeleton-description-line"></div>
|
||||
<div class="skeleton skeleton-responsibility-line"></div>
|
||||
<div class="skeleton skeleton-responsibility-line" style="width: 91%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Award Item 2 - Shorter -->
|
||||
<div class="skeleton-award-item">
|
||||
<div class="skeleton skeleton-award-logo"></div>
|
||||
<div class="skeleton-award-content">
|
||||
<div class="skeleton skeleton-award-title-line"></div>
|
||||
<div class="skeleton skeleton-award-info-line"></div>
|
||||
<div class="skeleton skeleton-description-line" style="width: 87%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@@ -1,44 +1,85 @@
|
||||
{{define "section-courses"}}
|
||||
<!-- Courses Section -->
|
||||
{{if .CV.Courses}}
|
||||
<section id="courses" class="cv-section">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:school" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Cursos Realizados{{else}}Courses{{end}}
|
||||
</h3>
|
||||
</summary>
|
||||
{{range .CV.Courses}}
|
||||
<div class="course-item">
|
||||
{{if .CourseLogo}}
|
||||
<div class="course-icon">
|
||||
<img src="/static/images/courses/{{.CourseLogo}}" alt="{{.Title}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:school\' width=\'80\' height=\'80\' class=\'default-course-icon\'></iconify-icon>'">
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="course-icon">
|
||||
<iconify-icon icon="mdi:school" width="80" height="80" class="default-course-icon"></iconify-icon>
|
||||
<section id="courses" class="cv-section component-wrapper">
|
||||
<!-- Actual Content -->
|
||||
<div class="actual-content">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:school" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Cursos Realizados{{else}}Courses{{end}}
|
||||
</h3>
|
||||
</summary>
|
||||
{{range .CV.Courses}}
|
||||
<div class="course-item">
|
||||
{{if .CourseLogo}}
|
||||
<div class="course-icon">
|
||||
<img src="/static/images/courses/{{.CourseLogo}}" alt="{{.Title}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:school\' width=\'80\' height=\'80\' class=\'default-course-icon\'></iconify-icon>'">
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="course-icon">
|
||||
<iconify-icon icon="mdi:school" width="80" height="80" class="default-course-icon"></iconify-icon>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="course-content">
|
||||
<strong>{{.Title}}</strong><br>
|
||||
<small>{{.Institution}} - {{.Date}} - ({{.Location}})</small>
|
||||
|
||||
{{if .ShortDescription}}
|
||||
<p class="course-desc short-desc">{{.ShortDescription}}</p>
|
||||
{{end}}
|
||||
|
||||
{{if .Responsibilities}}
|
||||
<ul class="responsibilities long-only">
|
||||
{{range .Responsibilities}}
|
||||
<li>{{. | safeHTML}}</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="course-content">
|
||||
<strong>{{.Title}}</strong><br>
|
||||
<small>{{.Institution}} - {{.Date}} - ({{.Location}})</small>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
{{if .ShortDescription}}
|
||||
<p class="course-desc short-desc">{{.ShortDescription}}</p>
|
||||
{{end}}
|
||||
<!-- Skeleton Content -->
|
||||
<div class="skeleton-content">
|
||||
<div class="skeleton-section">
|
||||
<div class="skeleton skeleton-section-title"></div>
|
||||
|
||||
{{if .Responsibilities}}
|
||||
<ul class="responsibilities long-only">
|
||||
{{range .Responsibilities}}
|
||||
<li>{{. | safeHTML}}</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
{{end}}
|
||||
<!-- Course Item 1 - With description and responsibilities -->
|
||||
<div class="skeleton-course-item">
|
||||
<div class="skeleton skeleton-course-icon"></div>
|
||||
<div class="skeleton-course-content">
|
||||
<div class="skeleton skeleton-course-title-line"></div>
|
||||
<div class="skeleton skeleton-course-info-line"></div>
|
||||
<div class="skeleton skeleton-description-line"></div>
|
||||
<div class="skeleton skeleton-responsibility-line"></div>
|
||||
<div class="skeleton skeleton-responsibility-line" style="width: 94%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Course Item 2 - Shorter -->
|
||||
<div class="skeleton-course-item">
|
||||
<div class="skeleton skeleton-course-icon"></div>
|
||||
<div class="skeleton-course-content">
|
||||
<div class="skeleton skeleton-course-title-line"></div>
|
||||
<div class="skeleton skeleton-course-info-line"></div>
|
||||
<div class="skeleton skeleton-description-line" style="width: 85%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Course Item 3 -->
|
||||
<div class="skeleton-course-item">
|
||||
<div class="skeleton skeleton-course-icon"></div>
|
||||
<div class="skeleton-course-content">
|
||||
<div class="skeleton skeleton-course-title-line"></div>
|
||||
<div class="skeleton skeleton-course-info-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@@ -1,18 +1,30 @@
|
||||
{{define "section-education"}}
|
||||
<!-- Education -->
|
||||
<section id="education" class="cv-section">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:school" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Formación{{else}}Training{{end}}
|
||||
</h3>
|
||||
</summary>
|
||||
{{range .CV.Education}}
|
||||
<div class="education-item">
|
||||
<strong>{{.Degree}}</strong> ({{.StartDate}}-{{.EndDate}}) {{if eq $.Lang "es"}}obtenido de{{else}}obtained from the{{end}} <strong>{{.Institution}}</strong> ({{.Location}})
|
||||
<section id="education" class="cv-section component-wrapper">
|
||||
<!-- Actual Content -->
|
||||
<div class="actual-content">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:school" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Formación{{else}}Training{{end}}
|
||||
</h3>
|
||||
</summary>
|
||||
{{range .CV.Education}}
|
||||
<div class="education-item">
|
||||
<strong>{{.Degree}}</strong> ({{.StartDate}}-{{.EndDate}}) {{if eq $.Lang "es"}}obtenido de{{else}}obtained from the{{end}} <strong>{{.Institution}}</strong> ({{.Location}})
|
||||
</div>
|
||||
{{end}}
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Skeleton Content -->
|
||||
<div class="skeleton-content">
|
||||
<div class="skeleton-section">
|
||||
<div class="skeleton skeleton-section-title"></div>
|
||||
<div class="skeleton skeleton-education-item"></div>
|
||||
<div class="skeleton skeleton-education-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
|
||||
@@ -1,44 +1,89 @@
|
||||
{{define "section-experience"}}
|
||||
<!-- Experience -->
|
||||
<section id="experience" class="cv-section">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:office-building" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Experiencia{{else}}Experience{{end}}
|
||||
</h3>
|
||||
</summary>
|
||||
<section id="experience" class="cv-section component-wrapper">
|
||||
<!-- Actual Content -->
|
||||
<div class="actual-content">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:office-building" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Experiencia{{else}}Experience{{end}}
|
||||
</h3>
|
||||
</summary>
|
||||
|
||||
{{range .CV.Experience}}
|
||||
<div class="experience-item">
|
||||
<div class="company-logo">
|
||||
{{if .CompanyLogo}}
|
||||
<img src="/static/images/companies/{{.CompanyLogo}}" alt="{{.Company}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:office-building\' width=\'60\' height=\'60\' class=\'default-company-icon\'></iconify-icon>'">
|
||||
{{else}}
|
||||
<iconify-icon icon="mdi:office-building" width="60" height="60" class="default-company-icon"></iconify-icon>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="experience-content">
|
||||
<strong>{{.Position}}{{if .Company}} - {{if .CompanyURL}}<a href="{{.CompanyURL}}" target="_blank" rel="noopener noreferrer">{{.Company}}</a>{{else}}{{.Company}}{{end}}{{if .Duration}} - <span class="duration-text">{{.Duration}}</span>{{end}}{{end}}</strong>
|
||||
{{if .Current}}<span class="current-badge">{{if eq $.Lang "es"}}ACTUAL{{else}}CURRENT{{end}}</span>{{end}}
|
||||
{{if .Expired}}<span class="expired-badge">{{if eq $.Lang "es"}}EXPIRADO{{else}}EXPIRED{{end}}</span>{{end}}
|
||||
<br>
|
||||
<small>{{.StartDate}} / {{if .Current}}{{if eq $.Lang "es"}}presente{{else}}now{{end}}{{else}}{{.EndDate}}{{end}} - ({{.Location}})</small>
|
||||
|
||||
{{if .ShortDescription}}
|
||||
<p class="experience-desc short-desc">{{.ShortDescription | safeHTML}}</p>
|
||||
{{end}}
|
||||
|
||||
{{if .Responsibilities}}
|
||||
<ul class="responsibilities long-only">
|
||||
{{range .Responsibilities}}
|
||||
<li>{{. | safeHTML}}</li>
|
||||
{{range .CV.Experience}}
|
||||
<div class="experience-item">
|
||||
<div class="company-logo">
|
||||
{{if .CompanyLogo}}
|
||||
<img src="/static/images/companies/{{.CompanyLogo}}" alt="{{.Company}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:office-building\' width=\'60\' height=\'60\' class=\'default-company-icon\'></iconify-icon>'">
|
||||
{{else}}
|
||||
<iconify-icon icon="mdi:office-building" width="60" height="60" class="default-company-icon"></iconify-icon>
|
||||
{{end}}
|
||||
</ul>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="experience-content">
|
||||
<strong>{{.Position}}{{if .Company}} - {{if .CompanyURL}}<a href="{{.CompanyURL}}" target="_blank" rel="noopener noreferrer">{{.Company}}</a>{{else}}{{.Company}}{{end}}{{if .Duration}} - <span class="duration-text">{{.Duration}}</span>{{end}}{{end}}</strong>
|
||||
{{if .Current}}<span class="current-badge">{{if eq $.Lang "es"}}ACTUAL{{else}}CURRENT{{end}}</span>{{end}}
|
||||
{{if .Expired}}<span class="expired-badge">{{if eq $.Lang "es"}}EXPIRADO{{else}}EXPIRED{{end}}</span>{{end}}
|
||||
<br>
|
||||
<small>{{.StartDate}} / {{if .Current}}{{if eq $.Lang "es"}}presente{{else}}now{{end}}{{else}}{{.EndDate}}{{end}} - ({{.Location}})</small>
|
||||
|
||||
{{if .ShortDescription}}
|
||||
<p class="experience-desc short-desc">{{.ShortDescription | safeHTML}}</p>
|
||||
{{end}}
|
||||
|
||||
{{if .Responsibilities}}
|
||||
<ul class="responsibilities long-only">
|
||||
{{range .Responsibilities}}
|
||||
<li>{{. | safeHTML}}</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Skeleton Content -->
|
||||
<div class="skeleton-content">
|
||||
<div class="skeleton-section">
|
||||
<div class="skeleton skeleton-section-title"></div>
|
||||
|
||||
<!-- Experience Item 1 - Full structure -->
|
||||
<div class="skeleton-experience-item">
|
||||
<div class="skeleton skeleton-company-logo"></div>
|
||||
<div class="skeleton-experience-content">
|
||||
<div class="skeleton skeleton-position-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: 95%;"></div>
|
||||
<div class="skeleton skeleton-responsibility-line" style="width: 90%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Experience Item 2 - Full structure -->
|
||||
<div class="skeleton-experience-item">
|
||||
<div class="skeleton skeleton-company-logo"></div>
|
||||
<div class="skeleton-experience-content">
|
||||
<div class="skeleton skeleton-position-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: 92%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Experience Item 3 - Shorter -->
|
||||
<div class="skeleton-experience-item">
|
||||
<div class="skeleton skeleton-company-logo"></div>
|
||||
<div class="skeleton-experience-content">
|
||||
<div class="skeleton skeleton-position-line"></div>
|
||||
<div class="skeleton skeleton-date-line"></div>
|
||||
<div class="skeleton skeleton-description-line" style="width: 85%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
|
||||
@@ -1,18 +1,31 @@
|
||||
{{define "section-languages"}}
|
||||
<!-- Languages Section -->
|
||||
<section id="languages" class="cv-section">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:translate" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Idiomas{{else}}Languages{{end}}
|
||||
</h3>
|
||||
</summary>
|
||||
{{range .CV.Languages}}
|
||||
<div class="language-item">
|
||||
<strong>{{.Language}}:</strong> {{.Proficiency}}{{if .Detail}} {{.Detail}}{{end}}
|
||||
<section id="languages" class="cv-section component-wrapper">
|
||||
<!-- Actual Content -->
|
||||
<div class="actual-content">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:translate" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Idiomas{{else}}Languages{{end}}
|
||||
</h3>
|
||||
</summary>
|
||||
{{range .CV.Languages}}
|
||||
<div class="language-item">
|
||||
<strong>{{.Language}}:</strong> {{.Proficiency}}{{if .Detail}} {{.Detail}}{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Skeleton Content -->
|
||||
<div class="skeleton-content">
|
||||
<div class="skeleton-section">
|
||||
<div class="skeleton skeleton-section-title"></div>
|
||||
<div class="skeleton skeleton-language-item"></div>
|
||||
<div class="skeleton skeleton-language-item" style="width: 85%;"></div>
|
||||
<div class="skeleton skeleton-language-item" style="width: 90%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
|
||||
@@ -1,18 +1,29 @@
|
||||
{{define "section-other"}}
|
||||
<!-- Other Section (Driver's License) -->
|
||||
{{if .CV.Other.DriverLicense}}
|
||||
<section id="other" class="cv-section">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:information" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Otros{{else}}Other{{end}}
|
||||
</h3>
|
||||
</summary>
|
||||
<div class="other-content">
|
||||
{{if eq .Lang "es"}}Carnet de conducir tipo <strong>{{.CV.Other.DriverLicense}}</strong>{{else}}Driving License type <strong>{{.CV.Other.DriverLicense}}</strong>{{end}}
|
||||
<section id="other" class="cv-section component-wrapper">
|
||||
<!-- Actual Content -->
|
||||
<div class="actual-content">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:information" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Otros{{else}}Other{{end}}
|
||||
</h3>
|
||||
</summary>
|
||||
<div class="other-content">
|
||||
{{if eq .Lang "es"}}Carnet de conducir tipo <strong>{{.CV.Other.DriverLicense}}</strong>{{else}}Driving License type <strong>{{.CV.Other.DriverLicense}}</strong>{{end}}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Skeleton Content -->
|
||||
<div class="skeleton-content">
|
||||
<div class="skeleton-section">
|
||||
<div class="skeleton skeleton-section-title"></div>
|
||||
<div class="skeleton skeleton-other-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@@ -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}}
|
||||
|
||||
@@ -1,20 +1,33 @@
|
||||
{{define "section-references"}}
|
||||
<!-- References Section -->
|
||||
{{if .CV.References}}
|
||||
<section id="references" class="cv-section">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:link-variant" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Referencias{{else}}References{{end}}
|
||||
</h3>
|
||||
</summary>
|
||||
{{range .CV.References}}
|
||||
<div class="reference-item">
|
||||
{{if .TextBefore}}{{.TextBefore}} {{end}}{{if eq .Action "downloadPDF"}}<a href="{{.URL}}" onclick="event.preventDefault(); openPdfModal(); return false;"><strong>{{if .LinkText}}{{.LinkText}}{{else}}{{.Title}}{{end}}</strong></a>{{else}}<a href="{{.URL}}" {{if and (eq .Type "cv") (ne .URL "/?lang=en") (ne .URL "/?lang=es")}}download{{else}}target="_blank" rel="noopener noreferrer"{{end}}><strong>{{if .LinkText}}{{.LinkText}}{{else}}{{.Title}}{{end}}</strong></a>{{end}}{{if .TextAfter}} {{.TextAfter}}{{end}}
|
||||
<section id="references" class="cv-section component-wrapper">
|
||||
<!-- Actual Content -->
|
||||
<div class="actual-content">
|
||||
<details open>
|
||||
<summary>
|
||||
<h3 class="section-title">
|
||||
<iconify-icon icon="mdi:link-variant" width="24" height="24" class="section-icon"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Referencias{{else}}References{{end}}
|
||||
</h3>
|
||||
</summary>
|
||||
{{range .CV.References}}
|
||||
<div class="reference-item">
|
||||
{{if .TextBefore}}{{.TextBefore}} {{end}}{{if eq .Action "downloadPDF"}}<a href="{{.URL}}" onclick="event.preventDefault(); openPdfModal(); return false;"><strong>{{if .LinkText}}{{.LinkText}}{{else}}{{.Title}}{{end}}</strong></a>{{else}}<a href="{{.URL}}" {{if and (eq .Type "cv") (ne .URL "/?lang=en") (ne .URL "/?lang=es")}}download{{else}}target="_blank" rel="noopener noreferrer"{{end}}><strong>{{if .LinkText}}{{.LinkText}}{{else}}{{.Title}}{{end}}</strong></a>{{end}}{{if .TextAfter}} {{.TextAfter}}{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Skeleton Content -->
|
||||
<div class="skeleton-content">
|
||||
<div class="skeleton-section">
|
||||
<div class="skeleton skeleton-section-title"></div>
|
||||
<div class="skeleton skeleton-reference-item"></div>
|
||||
<div class="skeleton skeleton-reference-item" style="width: 80%;"></div>
|
||||
<div class="skeleton skeleton-reference-item" style="width: 90%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</details>
|
||||
</section>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@@ -1,20 +1,35 @@
|
||||
{{define "section-skills-summary"}}
|
||||
<!-- Skills Summary -->
|
||||
<section id="skills" class="cv-section">
|
||||
<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>
|
||||
<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}}
|
||||
|
||||
Reference in New Issue
Block a user