fix: dynamic page height on zoom and footer spacing improvements

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
This commit is contained in:
juanatsap
2025-11-12 12:38:21 +00:00
parent 6372f293f3
commit 9f95ad3399
2 changed files with 16 additions and 2 deletions
+13
View File
@@ -334,9 +334,22 @@
// Store current scroll position
const oldScrollTop = window.pageYOffset || document.documentElement.scrollTop;
// Get the natural height before any transform
if (!cvPaper.dataset.originalHeight) {
// Store original height on first zoom
cvPaper.style.transform = 'scale(1)';
cvPaper.dataset.originalHeight = cvPaper.scrollHeight;
}
const originalHeight = parseInt(cvPaper.dataset.originalHeight);
// Apply the new scale
cvPaper.style.transform = `scale(${newScale})`;
// Adjust the container height to match the scaled content
// This prevents empty space when zooming out and content overflow when zooming in
cvPaper.style.height = `${originalHeight * newScale}px`;
// Calculate proportional scroll position to maintain visual position
// If zooming from 100% to 50%, content at pixel 1000 moves to pixel 500
// So we need to scroll to pixel 500 to see the same content