From b5d0d8389b8d2b8edf0a70ee52413dcb24f40146 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Wed, 12 Nov 2025 12:03:01 +0000
Subject: [PATCH] fix: simplify zoom to prevent empty space issues

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.
---
 static/css/main.css |  4 ++--
 static/js/main.js   | 34 ++++------------------------------
 2 files changed, 6 insertions(+), 32 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 7230dc3..5651d99 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -551,8 +551,8 @@ iconify-icon {
     min-height: auto; /* Changed from 100vh */
 
     /* Zoom transform properties */
-    transform-origin: center center; /* Default origin, dynamically updated by JS to viewport center */
-    transition: transform 0.08s linear, transform-origin 0s; /* Smooth zoom, instant origin change */
+    transform-origin: top center; /* Scale from top center - page stays anchored at top */
+    transition: transform 0.08s linear; /* Smooth, immediate zoom response */
     will-change: transform; /* Hint browser to optimize for transforms */
 }
 
diff --git a/static/js/main.js b/static/js/main.js
index 4a33cbc..d3886ab 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -322,39 +322,13 @@
         const cvPaper = document.querySelector('.cv-paper');
         if (!cvPaper) return;
 
-        // Get current scale from the element (if any)
-        const currentTransform = cvPaper.style.transform;
-        const currentScaleMatch = currentTransform.match(/scale\(([\d.]+)\)/);
-        const currentScale = currentScaleMatch ? parseFloat(currentScaleMatch[1]) : 1.0;
-
         // Convert percentage to scale factor (100 = 1.0, 150 = 1.5, etc.)
-        const newScale = zoomValue / 100;
+        const scaleFactor = zoomValue / 100;
 
-        // Zoom from the center of the viewport (user's current viewing position)
+        // Simple transform without scroll manipulation
+        // CSS transform-origin is set to "top center" so page scales from top
         requestAnimationFrame(() => {
-            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-            const viewportHeight = window.innerHeight;
-
-            // Calculate the point in the page that's at the center of the viewport
-            const viewportCenter = scrollTop + (viewportHeight / 2);
-
-            // Calculate the percentage of the page height where the viewport center is
-            const pageHeight = cvPaper.scrollHeight;
-            const centerPercent = (viewportCenter / pageHeight) * 100;
-
-            // Set transform-origin to the viewport center so zoom happens from where you're looking
-            cvPaper.style.transformOrigin = `center ${centerPercent}%`;
-
-            // Apply transform
-            cvPaper.style.transform = `scale(${newScale})`;
-
-            // Adjust scroll to keep the same content at viewport center
-            // The content position scales with the zoom, so adjust accordingly
-            const scaleRatio = newScale / currentScale;
-            const newViewportCenter = viewportCenter * scaleRatio;
-            const newScrollTop = newViewportCenter - (viewportHeight / 2);
-
-            window.scrollTo(0, newScrollTop);
+            cvPaper.style.transform = `scale(${scaleFactor})`;
 
             // Update display
             updateZoomDisplay(zoomValue);