Problem: Hover sync not working after migration to hyperscript
Root cause: Hyperscript 'call' command requires functions in global JavaScript scope
- Hyperscript def functions are NOT automatically exposed to window
- Templates use _="on mouseenter call syncPdfHover(true)"
- This syntax expects a JavaScript function
Solution: Thin JavaScript wrappers that delegate to hyperscript implementations
- Wrappers use _hyperscript.evaluate() API to call hyperscript defs
- Functions exposed to window.* for global access
- Implementation stays in hyperscript, wrappers just bridge the gap
Affected functions:
- toggleCVLength, toggleIcons, toggleTheme (toggles._hs)
- syncPdfHover, syncPrintHover, highlightZoomControl (hover-sync._hs)
Why test didn't catch this:
- Test 8 dispatches events programmatically in JavaScript
- This triggers hyperscript handlers directly
- Real browser hover calls JavaScript functions which were missing
CRITICAL BUG FIX: Hover states now sync between action bar and hamburger menu
Changes:
1. Added mouseenter/mouseleave handlers to menu PDF button
- templates/partials/navigation/hamburger-menu.html:178-181
- Added .menu-pdf-btn class for targeting
- Added hyperscript hover sync events
2. Updated syncPdfHover() function
- static/js/cv-functions.js:71-82
- Now selects both .pdf-btn and .menu-pdf-btn
- Both buttons get .pdf-hover-sync class on hover
3. Updated syncPrintHover() function
- static/js/cv-functions.js:88-99
- Now selects both .print-btn and .menu-print-btn
- Both buttons get .print-hover-sync class on hover
4. Added CSS for menu PDF button hover sync
- static/css/main.css:2690-2700
- .menu-pdf-btn.pdf-hover-sync styling (white bg, red icon)
- Matches action bar PDF button hover state
5. Created comprehensive hover sync test
- tests/mjs/8-hover-sync.test.mjs
- Tests all 4 hover scenarios (bar→menu, menu→bar for both buttons)
- Validates event handlers and CSS class application
- Manual verification instructions included
Behavior now correct:
✅ Hovering action bar PDF button highlights menu PDF button
✅ Hovering action bar Print button highlights menu Print button
✅ Hovering menu PDF button highlights action bar PDF button
✅ Hovering menu Print button highlights action bar Print button
Fixes documented bug from PROJECT-MEMORY.md Section 3.
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.
- Removed .zoom-active CSS class and JavaScript logic
- Zoom button stays same gray color whether zoom is on or off
- Fixed Show Zoom menu button visibility (changed inline style to zoom-hidden class)
- Menu item now correctly appears when zoom is hidden
- Moved menu hover logic from JavaScript to CSS selectors, reducing JS to minimal bridge code
- Replaced JavaScript-based toast timing with pure CSS animation lifecycle (slide in → stay → fade out)
- Removed unnecessary event handlers and legacy compatibility code for cleaner implementation
- Replace CSS zoom with transform: scale() for proper viewport extension
- Add dynamic margin-bottom to position footer correctly
- Remove zoom: 1 reset from fixed buttons (no longer needed)
- Enables true zoom from 10% to 500% that extends beyond viewport
- Add green background (#27ae60) to info and back-to-top buttons when at page bottom
- Implement bottom detection (within 50px threshold) in scroll handler
- Add conditional green hover to zoom reset button (only when zoom ≠ 100%)
- Enhance UX with visual feedback for scroll position and zoom state
Switched from transform: scale() to CSS zoom property on zoom-wrapper.
CSS zoom changes actual layout space, not just visual rendering:
- At 50% zoom, wrapper takes 50% space (no reserved empty space)
- Footer naturally follows right after zoomed content
- At 200% zoom, content extends beyond viewport with scrolling
- Fixes the large gray gap between content and footer
- Created zoom-wrapper div around cv-container
- Zoom now applies to wrapper only, footer adjusts naturally below
- Footer no longer scaled, stays at normal size
- Fixes gap between content and footer at low zoom levels
- Reduced back-to-top button size (35px default, grows to 50px on hover)
- Cleaner separation of concerns for zoom functionality
- Moved "Zoom" button from action bar to hamburger menu under "Acciones Rápidas"
- Close button (X) now grey/subtle by default (opacity: 0.7)
- Close button turns red only on hover for clear indication
- Updated JavaScript to reference show-zoom-menu-btn instead of show-zoom-btn
- Added preventDefault to showZoomControl to prevent link navigation
CSS zoom property had constraints preventing proper zoom beyond 100%.
Switched back to transform: scale() which provides true visual zoom
that can extend beyond viewport bounds at 100-200% range.
- Add close button (X) to zoom control widget
- Make zoom control draggable anywhere on screen
- Persist dragged position in localStorage (cv-zoom-position)
- Add "Zoom" button to action bar to show control when hidden
- Persist visibility state in localStorage (cv-zoom-visible)
- Cursor changes to "move" to indicate draggability
- Interactive elements (slider, buttons) don't trigger drag
- Position stays within viewport bounds
- All features work on desktop only (zoom hidden on mobile)
- Hide zoom control on mobile viewports (≤768px) via CSS
- Skip loading saved zoom on mobile, always use 100%
- Add resize handler to reset zoom when switching to mobile view
- Clean up unnecessary mobile-specific zoom styles
- Prevents confusion on touch devices where zoom is less useful
Changed from transform: scale() to CSS zoom property which affects actual
document layout space. At 50% zoom, content now takes 50% space instead of
reserving full 100% height. This eliminates the large gray empty space issue.
Removed proportional scroll adjustment that was causing page to jump down
when zooming. The transform-origin: top center property keeps content
anchored at top naturally without needing scroll compensation.
Changed zoom target from .cv-paper to .cv-container and .cv-footer to fix issue
where 50% zoom still reserved 100% document space creating empty areas. Both
elements now scale together, properly reducing space at low zoom levels while
keeping main action bar unaffected.
- Modified applyZoom() to target .cv-container and .cv-footer
- Added transform-origin, transition, and will-change to both CSS selectors
- Maintains proportional scroll compensation for smooth visual experience
The dynamic height adjustment was setting a fixed height on .cv-paper,
but the footer is a sibling element OUTSIDE .cv-paper in the DOM.
This caused the footer to be positioned incorrectly and hidden.
Removed:
- dataset.originalHeight storage
- height calculation and setting
- All dynamic height adjustment logic
The CSS transform: scale() will handle the visual zoom without
affecting the natural document flow, allowing the footer to
appear properly after the content.
Result: Footer should now be visible at all zoom levels
Fixed two issues with zoom and footer:
1. Dynamic height adjustment based on zoom level:
- Store original height on first zoom (dataset.originalHeight)
- Calculate scaled height: originalHeight × scale factor
- Set container height dynamically to match visual content
- Example: 50% zoom → height = originalHeight × 0.5
- Prevents empty space below content at low zoom
- Prevents overflow at high zoom
2. Footer spacing and positioning:
- Reduced .cv-main bottom padding: 3rem → 1rem
- Added .cv-footer margin-top: -60px to pull footer up
- Increased .zoom-control bottom: 70px → 100px
- Zoom control now clears footer GitHub link
Result:
- Footer appears immediately after content at any zoom level
- No wasted empty space below content
- Zoom control doesn't overlap GitHub link
- Page height dynamically adapts to zoom level
When zooming, the page was moving up/down because the scroll position
wasn't being adjusted to account for the scale change.
Solution: Proportional scroll compensation
- Track old scale before applying new scale
- Calculate scale ratio (newScale / oldScale)
- Adjust scroll position: newScrollTop = oldScrollTop * scaleRatio
Example:
- At 100% zoom, scrolled to pixel 1000
- Zoom to 50%: content at pixel 1000 is now at pixel 500
- Adjust scroll to 500 to keep same content visible
Result:
- Page stays visually in the same place when zooming
- Content you're viewing remains stable
- No jumping or movement during zoom transitions
- Works at all zoom levels (50%-200%)
The viewport-centered zoom approach was creating empty space above
the content when zooming to 50%, causing the CV to move down.
Solution: Simple top-anchored zoom
- Removed all complex scroll compensation logic
- Set transform-origin to "top center" (fixed position)
- Page now scales naturally from the top without movement
- No dynamic transform-origin calculations
- No scroll position adjustments
Result:
- Page stays anchored at top during zoom
- No empty space created above content
- Clean, predictable zoom behavior
- Works correctly at all zoom levels (50%-200%)
The page simply scales up/down from the top center point,
maintaining its position without any jumping or space issues.
Changed zoom behavior from "page-relative" to "viewport-relative":
Before:
- Zoomed from top of page causing perspective/depth effect
- Content appeared to move "through" the viewer
- Disorienting experience when scrolled down
After:
- Zooms from center of YOUR viewport (where you're looking)
- Content expands both above and below your position
- You stay at your original viewing point - no movement
- Like pinch-to-zoom: magnifies what you're currently viewing
Technical implementation:
1. Calculate viewport center relative to page (scrollTop + viewportHeight/2)
2. Convert to percentage of page height
3. Set transform-origin dynamically to that percentage
4. Apply scale transform from your viewing position
5. Adjust scroll to keep same content at viewport center
CSS changes:
- Default transform-origin: center center (was top center)
- Added transition for transform-origin: 0s (instant, no animation)
- Maintains smooth 0.08s linear transform transition
Result: Natural, stable zoom that feels like magnifying glass
When zooming, the page was scaling from a fixed point causing content
to appear to "move through" the viewport like a 3D perspective effect.
This made the zoom feel disorienting as the visible content would shift.
Solution: Proportional scroll compensation
- Track current scale before applying new scale
- Calculate scale ratio (newScale / currentScale)
- Adjust scroll position by multiplying by scale ratio
- Example: scrollTop 1000px at 100% → 1500px at 150%
Benefits:
- Content you're viewing stays in the same visual position
- Zoom feels more like "magnification" than "perspective"
- Smooth, stable zoom experience without content shifting
- Eliminates the "going through me and getting farther" effect
Technical changes:
- Extract current scale from transform property via regex
- Calculate proportional scroll adjustment
- Apply synchronized transform + scroll in requestAnimationFrame
- Enhanced CI/CD pipeline with coverage reporting, benchmarks, and artifact uploads
- Implemented rate limiter IP validation with proxy support and spoofing protection
- Added extensive Makefile test targets for coverage, benchmarks, and continuous testing
- Expanded middleware chain with request validation, size limits, and suspicious activity logging
juanatsap