- 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
Increased .cv-main bottom padding from 1rem to 8rem to ensure:
- Footer is fully visible and not hidden behind content
- Adequate clearance for zoom control (positioned at bottom: 100px)
- Proper breathing room between content and footer
Result: Footer now properly visible in normal view
The margin-top: -60px on .cv-footer was pulling the footer up too much,
hiding the GitHub link and other footer content.
Removed the negative margin - the reduced .cv-main bottom padding
(1rem instead of 3rem) already provides better spacing without hiding content.
Result:
- Footer content (GitHub, LinkedIn links) now visible
- Still has better spacing than before
- Zoom control at 100px bottom clears footer properly
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
Design improvements based on user feedback:
- Move current zoom value inside circular reset button
- Add colorful gradient (red→orange→blue→green) to slider on hover
- Make reset button perfectly circular (44px diameter)
- Dynamic value display updates in real-time inside button
- Maintains gray monochrome when not hovering
- Enhanced visual feedback with smooth color transitions
- Mobile responsive with smaller circular button (38px)
Technical changes:
- HTML: Moved #zoom-value-current span inside button
- CSS: border-radius 50%, min-width/min-height for perfect circle
- CSS: Gradient hover for both WebKit and Firefox sliders
- JavaScript: Already compatible (targets same element ID)
Visibility Improvements:
- Background: darker gray rgba(128, 128, 128, 0.7) instead of light transparent
- Base opacity: 0.7 (was 0.3) - much more visible by default
- Text: white/light gray instead of dark gray (better contrast on gray bg)
- Slider track: lighter gray rgba(200, 200, 200, 0.5) - more visible
- Slider thumb: bright white with light border - stands out clearly
- Reset button: lighter background with white text - easier to see
- Larger padding and sizing for better visibility
- Hover state: full opacity with darker background
Result: Control is clearly visible while maintaining elegant gray aesthetic
- 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
PROBLEM:
- Previous grid approach (50% 30%) didn't work correctly
- Language selector is INSIDE .site-title div, not a separate grid column
- Grid structure: .site-title | .view-controls-center | .action-buttons-right
SOLUTION @ 540px:
Grid Structure:
- Changed .action-bar-content to single column (1fr)
- Hide .view-controls-center and .action-buttons-right
- .site-title becomes the only visible element
Flexbox Inside .site-title:
- .site-title: display: flex, justify-content: space-between
- .site-title-left: flex: 1 1 55% (hamburger + title area)
* Contains hamburger button and CV JAMR title
* flex-grow allows expansion, flex-shrink allows contraction
- .language-selector: flex: 0 0 35% (language buttons)
* Fixed at ~35% width, doesn't grow or shrink
* justify-content: flex-end (align buttons to right)
Text Overflow Protection:
- .site-title-link: overflow: hidden
- .site-title-text: white-space: nowrap, text-overflow: ellipsis
- Prevents title from breaking layout
RESULT:
Mobile distribution:
✓ Hamburger + Title area: ~55% (flexible)
✓ Language selector (EN/ES): ~35% (fixed)
✓ Remaining ~10%: gaps and padding
✓ Visual result: approximately 50% / 30% with breathing room
BENEFITS:
- Proper space distribution matching internal HTML structure
- Language buttons have adequate touch targets
- Title can truncate gracefully if needed
- All controls still accessible via hamburger menu
PROBLEM:
- Mobile action bar using equal width distribution (1fr auto 1fr)
- Not optimal space utilization on small screens
- Action buttons and center controls taking unnecessary space
SOLUTION @ 540px breakpoint:
.action-bar-content:
- Changed grid: 1fr auto 1fr → 50% 30%
- Hamburger menu + title area: 50% width
- Language selector area: 30% width
- Reduced gap: 2rem → 0.5rem
- Reduced padding: auto → 0.5rem horizontal
Hidden elements on mobile:
- .view-controls-center: display: none (moved to hamburger menu)
- .action-buttons-right: display: none (PDF/Print in hamburger menu)
RESULT:
Mobile layout distribution:
✓ Hamburger + CV title: ~50% (more breathing room)
✓ Language selector (EN/ES): ~30% (adequate space)
✓ Remaining 20%: natural spacing/padding
✓ Center controls hidden (accessible via hamburger menu)
✓ Action buttons hidden (accessible via hamburger menu)
BENEFITS:
- Better space utilization on small screens
- Clearer visual hierarchy
- More touch-friendly target areas
- All functionality still accessible via hamburger menu
- Replace blue border with green curly brackets { } using CSS pseudo-elements
- Add proper spacing and vertical centering with inline-flex
- Add engaging subtext below GitHub button: "Want to know how it's built?"
- Bilingual support for subtext (EN/ES)
- Change sidebar titles from center to left alignment for better readability
- Update badge from "Senior Consultant" to "Technical Consultant"
- Applies to both English and Spanish versions
- Changed right sidebar title alignment from center to right for consistency
- Added center alignment to sidebar accordion headers
- Fixed mobile sidebar alignments to respect left/right positioning (left sidebar: left-aligned, right sidebar: right-aligned)
PROBLEM:
- Right sidebar title was right-aligned instead of centered
- Inconsistent title alignment between left and right sidebars
SOLUTION:
All Sidebars (Desktop):
- .sidebar-title: text-align: center (all section titles centered)
Left Sidebar Content:
- .cv-sidebar-left .sidebar-content: text-align: left
- .cv-sidebar-left .skill-item: text-align: left
Right Sidebar Content:
- .cv-sidebar-right .sidebar-content: text-align: right
- .cv-sidebar-right .skill-item: text-align: right
Mobile @ 768px:
- Both sidebars content: text-align: left !important (unchanged)
RESULT:
Desktop:
✓ Left sidebar: title centered, content left-aligned
✓ Right sidebar: title centered, content right-aligned
✓ Visual consistency with centered titles
✓ Content flows naturally from title position
Mobile:
✓ Both sidebars: content left-aligned for readability
✓ No changes to mobile behavior
VISUAL HIERARCHY:
- Titles centered = visual anchors
- Content aligned to sidebar position = natural reading flow
PROBLEM:
- Right sidebar content was left-aligned on desktop
- Created visual inconsistency with sidebar position
SOLUTION:
Desktop (default):
- Added .cv-sidebar-right .sidebar-content { text-align: right; }
- Added .cv-sidebar-right .skill-item { text-align: right; }
- Content now aligns to the right side matching sidebar position
Mobile @ 768px:
- Override with text-align: left !important for both sidebars
- Ensures consistent left-aligned reading experience on mobile
- Applies to .sidebar-content and .skill-item in both sidebars
RESULT:
Desktop:
- Left sidebar: content left-aligned ✓
- Right sidebar: content right-aligned ✓
- Visual symmetry and proper alignment
Mobile:
- Both sidebars: content left-aligned ✓
- Consistent reading experience
- Better usability on small screens
TECHNICAL:
- Desktop rules apply by default
- Mobile rules use !important to override for both sidebars
- Clean separation of desktop/mobile behavior
CHANGES @ 768px breakpoint:
- .footer-label: 0.85rem → 1.1rem (bigger, more prominent)
- .footer-value: 1.1rem → 0.85rem (smaller, supporting text)
- .footer-value b: 1.2rem → 0.95rem (adjusted for consistency)
RATIONALE:
- Labels (linkedin_, github_, email@, phone#) are visual anchors
- Values (URLs, email, phone) are supporting details
- Inverted hierarchy provides better visual structure on mobile
- Labels now stand out as section headers
- Values are readable but less visually dominant
RESULT:
- Clearer visual hierarchy in mobile footer
- Labels more prominent as category identifiers
- Values easier to scan without overwhelming the layout
PROBLEM:
- Email and phone were appearing on the same line in mobile footer
- User wants each property (linkedin, github, domestika, email, phone) on its own line
SOLUTION:
- Added `.footer-content li { display: block !important; }` for mobile @ 900px
- Added `margin-bottom: 1.5rem` for spacing between footer items
- Overrides desktop `display: inline-block` behavior
RESULT:
- Each footer property now displays on a separate line in mobile view
- Better vertical spacing and readability
- Cleaner mobile footer layout
juanatsap