Commit Graph

5 Commits

Author SHA1 Message Date
juanatsap 405b88bac0 fix: maintain visual position during zoom - eliminate perspective effect
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
2025-11-12 11:59:00 +00:00
juanatsap c1506a4d1e feat: smooth analog zoom with solid blue hover
UX improvements for more responsive, fluid zoom experience:

1. Smooth analog response:
   - Removed 50ms debounce - applies zoom immediately
   - Changed step from 5 to 1 for ultra-smooth increments
   - Updated transition: 0.08s linear (was 0.3s cubic-bezier)
   - Real-time transform updates for analog feel vs digital jumps

2. Solid blue hover (no gradient):
   - Changed from multi-color gradient to solid #3b82f6 blue
   - Maintains gray when not hovering
   - Clean, simple visual feedback matching reference design

3. Visual enhancement:
   - Keyboard shortcuts now use step 10 for faster adjustments
   - Instant response eliminates "digital" feeling
   - Smooth, continuous zoom matching analog controls

Technical changes:
- HTML: step="1" instead of step="5"
- CSS: solid color hover, 0.08s linear transition
- JS: removed debounce timeout, immediate applyZoom()
2025-11-12 11:46:19 +00:00
juanatsap 1c20a22522 refactor: simplify zoom control - transparent, monochrome, minimal
UI Changes:
- Made control transparent by default (opacity: 0.3), fully visible on hover
- Removed all colors - pure monochrome gray design
- Removed search icon (magnify) - no search functionality
- Changed reset icon to simple "100" text button
- Simplified layout: just 50 - slider - 100 - 200 - reset
- Moved higher: bottom 70px (desktop), 50px (tablet), 40px (mobile)

Visual Design:
- Transparent gray background with subtle blur
- Gray slider track (no rainbow gradient)
- Smaller, minimal sizing
- Numbers without % symbol for cleaner look
- Reset button shows "100" instead of circular arrows

Code Cleanup:
- Removed .zoom-label and icon markup
- Removed .zoom-slider-container wrapper
- Updated updateZoomDisplay() to use correct ID
- Simplified CSS - removed unused label styles
- Updated mobile responsive breakpoints
2025-11-12 11:09:42 +00:00
juanatsap 93b471b7e3 feat: add zoom control with accessibility and persistence
UI Components:
- Fixed bottom-center zoom slider (50%-200% range, step 5%)
- Modern glass-morphism design with gradient slider track
- Reset button with smooth rotation animation
- Real-time zoom percentage display
- Fully responsive (desktop/tablet/mobile)

Functionality:
- CSS transform-based zoom (GPU accelerated)
- localStorage persistence across sessions
- Keyboard shortcuts: Ctrl/Cmd +/-/0
- Smooth transitions with debouncing (50ms)
- Scroll position preservation during zoom
- Print mode: Temporarily resets to 100%

Accessibility (WCAG AA):
- Complete ARIA labels and live regions
- Keyboard navigation support
- Focus indicators on all interactive elements
- Screen reader compatible (announces zoom level)
- Touch-friendly (44px+ targets)

Integration:
- Follows existing toggle patterns (length, logos, theme)
- Initializes in initPreferences()
- Works with print-friendly mode
- Hidden in print (.no-print class)
- Bilingual support (English/Spanish)

Performance:
- will-change: transform for compositor layer
- Debounced slider input for smooth dragging
- requestAnimationFrame for scroll preservation
- No layout thrashing (transform-only changes)

Technical Details:
- Range: 50-200 (prevents unusability, allows 2x mag)
- Transform origin: top center (maintains alignment)
- Transition: 300ms cubic-bezier (material design)
- Storage key: 'cv-zoom'
- Default: 100% (normal view)
2025-11-12 11:00:29 +00:00
juanatsap 92dffe8c60 feat: add comprehensive testing infrastructure and security hardening
- 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
2025-11-11 21:43:12 +00:00