Commit Graph

12 Commits

Author SHA1 Message Date
juanatsap 949c9a0351 docs: Consolidate documentation into single doc/ folder
- Move docs/ contents to doc/ with proper numbering:
  - CONTACT-FORM-QUICKSTART.md → 17-CONTACT-FORM.md
  - SECURITY-AUDIT-REPORT.md → 18-SECURITY-AUDIT.md
  - SECURITY.md → 19-SECURITY-IMPLEMENTATION.md
- Delete duplicate/redundant files from docs/:
  - CMD-K-COMMAND-BAR.md (duplicate of 16-CMD-K-API.md)
  - CONTACT_FORM_IMPLEMENTATION.md (overlaps with quickstart)
  - SECURITY-IMPLEMENTATION-SUMMARY.md (summary of audit)
- Update doc/README.md with new document references
- Update test counts to 39 test files across all READMEs
- Update all "Last Updated" dates to 2025-12-01
- Add new API endpoints documentation (text, cmd-k, contact, toggles)
- Update PROJECT-MEMORY.md with new features and correct paths
2025-12-01 13:30:48 +00:00
juanatsap 9c5f0b20d8 docs: Add comprehensive toast notification test and documentation
Test Addition:
- Created tests/mjs/29-pdf-toast-notifications.test.mjs (22 assertions)
- Validates toast elements, JavaScript API, animations
- Tests both PDF download scenarios (modal stays open vs. closes early)
- Verifies toast lifecycle: prepare → progress → success → dismiss
- Tests icon/title/message updates and progress bar animation

Test Coverage:
 Toast DOM elements exist
 JavaScript functions available (showPDFToast, hidePDFToast)
 Manual toast trigger and auto-hide
 PDF modal integration - Scenario A (stay in modal)
 PDF modal integration - Scenario B (close modal, toast appears)
 Toast content updates (📥)
 Progress bar animation
 CSS animations defined (toastSlideIn, toastLifecycle, progressShrink)

Documentation Addition:
- Created doc/13-TOAST-NOTIFICATIONS.md (comprehensive guide)
- Architecture and component structure
- User experience flows (2 scenarios documented)
- JavaScript API reference (showPDFToast, hidePDFToast, showError)
- CSS structure and animations
- Template structure with ARIA accessibility
- PDF download integration details
- Accessibility features and testing guide
- Customization guide and troubleshooting

Documentation Updates:
- Updated doc/README.md (added entry #13, total: 12 → 13 docs)
- Updated tests/README.md (test count: 27 → 28)
- Updated tests/TEST-SUMMARY.md (added toast notifications coverage)
- Updated tests/mjs/README.md (added test 29 description)

Test Count: 28 active tests
Doc Count: 13 core documents
Coverage: Complete UX feedback system with dual-mode operation
2025-11-20 13:05:46 +00:00
juanatsap 1258d61d05 refactor: Modularize CSS into ITCSS architecture + update documentation
CSS Refactoring:
- Split 2,287-line monolith into 6 focused modules
- New structure: Navigation, Scroll, Buttons, Modals, Zoom, Breakpoints
- Organized by ITCSS layers (Interactive + Responsive)
- 245 lines saved through better organization
- Site verified working at localhost:1999

New CSS Files:
- 04-interactive/_navigation.css (357 lines, 8.2KB)
- 04-interactive/_scroll-behavior.css (200 lines, 5.0KB)
- 04-interactive/_buttons.css (184 lines, 4.7KB)
- 04-interactive/_modals.css (487 lines, 16KB)
- 04-interactive/_zoom-control.css (253 lines, 6.3KB)
- 05-responsive/_breakpoints.css (561 lines, 14KB)

Documentation Updates:
- Added doc/12-CSS-ARCHITECTURE.md (comprehensive CSS guide)
- Updated doc/README.md (new entry + correct numbering)
- Updated tests/README.md (test count 8 → 27)
- Updated tests/TEST-SUMMARY.md (coverage expansion)
- Rewrote tests/mjs/README.md (complete test listing)

Removed:
- static/css/04-interactive/_remaining.css (replaced by modules)
2025-11-20 12:34:42 +00:00
juanatsap 45e5be1ea3 test: Add comprehensive button positioning test (test 14)
Validates button positioning and responsive behavior across all viewports:

Desktop (>900px):
- Left side buttons (download, print, shortcuts, info) vertically stacked
- Back-to-top button on right side (intentional design)
- Zoom button visible
- Different bottom values verify vertical stacking

Wide Mobile (483-900px):
- Horizontal layout at bottom center
- Back-to-top remains on right side
- Zoom button hidden

Narrow Mobile (<483px):
- Back-to-top moved UP (5.5rem) to avoid overlap
- Still positioned on right side
- Horizontal button layout maintained

Accessibility:
- All buttons present and clickable
- Proper visibility checks

This test caught and validates the recent fixes:
1. Back-to-top on RIGHT (not left) in all mobile viewports
2. Narrow mobile positioning to prevent button overlap
3. Consistent hover effects across all buttons

Test results: 4/4 passed
- Desktop layout verification
- Wide mobile responsive layout
- Narrow mobile overlap prevention
- Button accessibility validation
2025-11-18 22:05:17 +00:00
juanatsap 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
juanatsap 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
juanatsap 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
juanatsap 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
juanatsap 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
juanatsap 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
juanatsap 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
juanatsap 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