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
Vendored
+268
-5
@@ -196,6 +196,30 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* NEW: Structural skeleton lines for experience */
|
||||
.skeleton-position-line {
|
||||
height: 20px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.skeleton-date-line {
|
||||
height: 14px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.skeleton-description-line {
|
||||
height: 16px;
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.skeleton-responsibility-line {
|
||||
height: 14px;
|
||||
width: 100%;
|
||||
margin-left: 16px; /* Indent like list items */
|
||||
}
|
||||
|
||||
/* Legacy styles (keeping for backward compatibility) */
|
||||
.skeleton-position {
|
||||
height: 20px;
|
||||
width: 80%;
|
||||
@@ -216,22 +240,261 @@
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
/* Section Skeleton Base */
|
||||
.skeleton-section {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.skeleton-section-title {
|
||||
height: 28px;
|
||||
width: 35%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Education Item Skeleton */
|
||||
.skeleton-education-item {
|
||||
margin-bottom: 16px;
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.skeleton-degree {
|
||||
.skeleton-education-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Skills Summary Skeleton */
|
||||
.skeleton-summary-paragraph {
|
||||
height: 18px;
|
||||
width: 75%;
|
||||
margin-bottom: 6px;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.skeleton-institution {
|
||||
.skeleton-summary-paragraph:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Award Item Skeleton */
|
||||
.skeleton-award-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.skeleton-award-logo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skeleton-award-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* NEW: Structural skeleton lines for awards */
|
||||
.skeleton-award-title-line {
|
||||
height: 20px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.skeleton-award-info-line {
|
||||
height: 14px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/* Legacy styles (keeping for backward compatibility) */
|
||||
.skeleton-award-title {
|
||||
height: 20px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.skeleton-award-info {
|
||||
height: 16px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.skeleton-award-description {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Project Item Skeleton */
|
||||
.skeleton-project-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.skeleton-project-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skeleton-project-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* NEW: Structural skeleton lines for projects */
|
||||
.skeleton-project-title-line {
|
||||
height: 20px;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.skeleton-tech-line {
|
||||
height: 14px;
|
||||
width: 85%;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.skeleton-footer-line {
|
||||
height: 16px;
|
||||
width: 70%;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* Legacy styles (keeping for backward compatibility) */
|
||||
.skeleton-project-title {
|
||||
height: 20px;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.skeleton-project-info {
|
||||
height: 16px;
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.skeleton-project-description {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.skeleton-project-description.short {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/* Course Item Skeleton */
|
||||
.skeleton-course-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.skeleton-course-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skeleton-course-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* NEW: Structural skeleton lines for courses */
|
||||
.skeleton-course-title-line {
|
||||
height: 18px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.skeleton-course-info-line {
|
||||
height: 14px;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
/* Legacy styles (keeping for backward compatibility) */
|
||||
.skeleton-course-title {
|
||||
height: 18px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.skeleton-course-info {
|
||||
height: 16px;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
/* Language Item Skeleton */
|
||||
.skeleton-language-item {
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.skeleton-language-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Reference Item Skeleton */
|
||||
.skeleton-reference-item {
|
||||
height: 22px;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.skeleton-reference-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Other Section Skeleton */
|
||||
.skeleton-other-item {
|
||||
height: 20px;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
/* Sidebar Skeleton */
|
||||
.skeleton-sidebar {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.skeleton-sidebar-header {
|
||||
height: 28px;
|
||||
width: 80%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Skill Item Skeleton (Sidebar) - Already defined above but keeping for reference */
|
||||
|
||||
/* Footer Skeleton */
|
||||
.skeleton-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.skeleton-footer-item {
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.skeleton-footer-item:nth-child(2) {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.skeleton-footer-item:nth-child(3) {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.skeleton-footer-item:nth-child(4) {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.skeleton-footer-item:nth-child(5) {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
/* Text Block Skeletons (Generic) */
|
||||
.skeleton-text {
|
||||
height: 16px;
|
||||
|
||||
Reference in New Issue
Block a user