2ca13a218e
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
2025-11-18 20:18:28 +00:00
1f6f8e417e
docs: Update skeleton loader implementation from hyperscript to JavaScript
...
MIGRATION SUMMARY:
- Moved skeleton loader logic from hyperscript to JavaScript (main.js)
- Changed from htmx:oobAfterSwap to htmx:afterSettle event
- Changed OOB swap from innerHTML to outerHTML for proper element replacement
- Added languageSwitching flag for state tracking
- Added 100ms delay after afterSettle for final render completion
DOCUMENTATION UPDATES:
- 2-MODERN-WEB-TECHNIQUES.md: Updated skeleton loader section with
2025-11-18 19:32:28 +00:00
f3cce51fb3
feat: implement color theme switcher with dynamic button colors
...
Complete color theme system (light/dark/auto) with dynamic UI:
Features:
- Color theme switcher with auto/light/dark modes
- Dynamic button colors on hover (purple/yellow/blue per theme)
- localStorage persistence across sessions
- Proper button positioning (desktop and mobile)
- Mobile: 5-button layout with theme before info button
Fixes:
- CSP updated to allow jsDelivr CDN for iconify icons
- Button repositioning: Download PDF and Print Friendly at top
- Hover-only colors (not persistent)
- Mobile button order corrected
Files:
- static/css/color-theme.css - Theme system with CSS variables
- static/js/color-theme.js - Theme switching logic
- templates/partials/color-theme-switcher.html - Button component
- internal/middleware/security.go - CSP fix for jsDelivr
- tests/mjs/13-color-theme-switcher.test.mjs - Comprehensive test
- tests/TEST-SUMMARY.md - Updated test documentation
2025-11-18 15:49:30 +00:00
4b01134584
chore: delete redundant test archive - enforce zero redundancy policy
...
Deleted entire tests/archive/ directory (17+ test files, 188KB)
- All archive tests were 100% redundant with active tests
- Archive contained: toggles, zoom, hyperscript, keyboard, integration, misc tests
- Active tests (0-11) provide superior coverage
Updated TEST-SUMMARY.md:
- Removed archive references
- Added "Test Philosophy" section
- Updated test count to reflect deletion
- Emphasized zero redundancy policy
Coverage mapping (archive → active):
- toggles/* → 1-toggles.test.mjs ✅
- zoom/* → 0-zoom.test.mjs + 10-zoom-persistence + 11-zoom-ui-exclusion ✅
- hyperscript/* → 3-hyperscript.test.mjs + 9-hyperscript-def-limit ✅
- keyboard/* → 2-keyboard-shortcuts.test.mjs ✅
- integration/* → All active tests combined ✅
- misc/* → Various active tests ✅
Philosophy: If a test doesn't provide unique value, it doesn't exist.
2025-11-17 18:04:07 +00:00
cb9a8eb044
cleanup: establish test suite as single source of truth
...
CRITICAL CHANGES:
✅ Deleted ALL redundant test files (40+ files removed)
✅ Added mobile responsive test (7-mobile-responsive.test.mjs)
✅ Created comprehensive tests/README.md
✅ Updated TEST-SUMMARY.md with accountability
SINGLE SOURCE OF TRUTH ESTABLISHED:
tests/
├── mjs/ # 8 ACTIVE TESTS - THE SPECIFICATION
│ ├── 0-zoom.test.mjs
│ ├── 1-toggles.test.mjs
│ ├── 2-keyboard-shortcuts.test.mjs
│ ├── 3-hyperscript.test.mjs
│ ├── 4-htmx.test.mjs
│ ├── 5-language.test.mjs
│ ├── 6-modals.test.mjs
│ └── 7-mobile-responsive.test.mjs
├── archive/ # Historical reference only
├── screenshots/ # Visual verification
├── run-all.mjs # Master test runner
└── TEST-SUMMARY.md # Complete documentation
DELETED FILES (40+):
- check-styling.html
- compare-rendered.js
- comprehensive-features.spec.js
- handlers.test, middleware.test
- All test-*.js, test-*.mjs, test-*.html files
- SHORTCUTS-BUTTON-FIX-REPORT.md
- test-screenshots/, testdata/ directories
- verify-years-styling.sh
- visual-comparison.spec.js
NEW: 7-mobile-responsive.test.mjs
Tests mobile viewport rendering:
- Mobile viewport (375px) - no horizontal scroll
- Tablet viewport (768px) - proper layout
- Touch interactions (hamburger menu)
- Responsive breakpoints (320px - 1920px)
- Viewport meta tag presence
- Touch-friendly button sizes (≥44px)
- Text readability (≥14px font)
NEW: tests/README.md
Establishes accountability:
- Tests ARE the specification
- Tests ARE the requirements
- If test passes but feature fails → TEST IS WRONG
- If feature works but test fails → FEATURE IS WRONG
- Every bug MUST have test coverage
- No deployment if tests fail
Updated TEST-SUMMARY.md:
- Added "SINGLE SOURCE OF TRUTH" header
- Documented mobile responsive test
- Clarified accountability model
- Updated test count: 8 active, 60+ archived
- Status: Production specification
Master runner auto-discovers all numbered tests
Run: bun tests/run-all.mjs
2025-11-17 13:41:46 +00:00
cd450837a2
feat: complete systematic test suite (tests 3-6)
...
Added comprehensive tests for remaining core functionality:
✅ 3-hyperscript.test.mjs
- Parse error detection
- Function definition verification
- Keyboard event handler validation
- Def statement count (≤3 limit)
- Operator precedence checks
✅ 4-htmx.test.mjs
- HTMX library loaded
- Element presence (hx-get, hx-post, hx-swap, hx-target)
- Request/response cycle validation
- Loading indicators
✅ 5-language.test.mjs
- Language toggle controls
- Default language (English)
- Spanish via URL parameter (?lang=es)
- Toggle button functionality
- localStorage/cookie persistence
✅ 6-modals.test.mjs
- Modal elements (info, shortcuts, PDF)
- ? key opens shortcuts modal
- ESC key closes modals
- Accessibility attributes (role, aria-label, aria-modal)
Updated TEST-SUMMARY.md:
- Now 7 active tests (0-6)
- Complete core feature coverage
- Updated coverage gaps (removed completed items)
All tests follow established patterns:
- Playwright browser automation
- Real-time validation
- Clear pass/fail indicators
- Browser stays open for manual verification
- Auto-discovered by master runner
Master runner: bun tests/run-all.mjs
2025-11-17 13:28:04 +00:00
5c60d108d8
refactor: organize test suite - systematic numbered tests + archive
...
ORGANIZATION:
- Created systematic numbered test suite in tests/mjs/
- Archived 60+ legacy tests organized by category
- Established master test runner (run-all.mjs)
- Updated comprehensive documentation
NEW ACTIVE TESTS:
- 0-zoom.test.mjs - Zoom control functionality
- 1-toggles.test.mjs - Toggle testing with real-time verification
- 2-keyboard-shortcuts.test.mjs - L, I, V, ? keyboard shortcuts
ARCHIVE STRUCTURE:
tests/archive/
├── toggles/ - 5 toggle tests
├── zoom/ - 1 zoom test
├── hyperscript/ - 4 hyperscript validation tests
├── keyboard/ - 2 keyboard tests
├── integration/ - 3 comprehensive integration tests
└── misc/ - 5 miscellaneous tests and docs
TEST INFRASTRUCTURE:
- tests/run-all.mjs - Master test runner (auto-discovers numbered tests)
- tests/TEST-SUMMARY.md - Complete documentation
- tests/archive/README.md - Archive guide
- tests/mjs/README.md - Active test suite guide
BENEFITS:
- 85% test redundancy eliminated
- Clear execution order (0-9 numbered)
- Easy to run: bun tests/run-all.mjs
- All legacy tests preserved (nothing deleted)
- Systematic coverage tracking
COVERAGE:
✅ Zoom control
✅ All toggles (length, icons, theme)
✅ Toggle synchronization
✅ Keyboard shortcuts (L, I, V, ?)
✅ Input field safety
✅ localStorage persistence
✅ Real-time rendering verification
TODO (Planned):
- [ ] 3-hyperscript.test.mjs
- [ ] 4-htmx.test.mjs
- [ ] 5-language.test.mjs
- [ ] 6-modals.test.mjs
2025-11-17 13:18:39 +00:00
3f77fedeaf
fix: icon toggle real-time rendering + hyperscript architecture cleanup
...
CRITICAL FIX: Icon toggle now works without page refresh
- Changed class name from 'show-logos' to 'show-icons' (CSS mismatch bug)
- Updated localStorage key from 'cv-logos' to 'cv-icons'
- Fixed toggleIcons() function in cv-functions.js
HYPERSCRIPT ARCHITECTURE:
- Moved 6 toggle functions from hyperscript to JavaScript (cv-functions.js)
- Solves hyperscript 0.9.14 parser limitation (max 3 def statements total)
- Upgraded hyperscript from 0.9.12 to 0.9.14
- Fixed operator precedence in keyboard shortcuts
- Cleaned view-controls.html templates (inline → function calls)
NEW FILES:
- static/js/cv-functions.js - Global toggle functions (6 functions)
- HYPERSCRIPT-RULES.md - Permanent architecture documentation
- tests/mjs/0-zoom.test.mjs - Zoom functionality test
- tests/mjs/1-toggles.test.mjs - Comprehensive toggle test with real-time verification
- tests/TEST-SUMMARY.md - Test suite documentation
TESTS:
- Real-time DOM update verification (no refresh required)
- Screenshot capture for visual regression
- localStorage persistence validation
- Toggle synchronization between action bar and menu
BREAKING CHANGE: localStorage key changed from 'cv-logos' to 'cv-icons'
Users may need to re-toggle icons preference on first load after update.
2025-11-17 13:00:03 +00:00
juanatsap