Website Update

Author: Modelized

docs/assets/css/style.css

@@ -149,13 +149,13 @@ a {
 }
 
 .container {
-  width: min(var(--container), calc(100% - 3rem));
+  width: min(var(--container), calc(100% - 3.25rem));
   margin: 0 auto;
 }
 
 .section:not(.hero) .container,
 .projects-shell {
-  width: min(var(--container), calc(100% - 4.25rem));
+  width: min(var(--container), calc(100% - 4.5rem));
 }
 
 .section {
@@ -1001,7 +1001,7 @@ a {
   letter-spacing: 0.005em;
   line-height: 0.92;
   text-transform: uppercase;
-  transform: translate3d(0, var(--parallax-y), 0);
+  transform: translateY(var(--parallax-y));
   filter: drop-shadow(0 0 34px rgba(255, 157, 77, 0.08)) drop-shadow(0 0 24px rgba(89, 109, 255, 0.08));
   will-change: transform, filter;
 }
@@ -1169,6 +1169,13 @@ a {
   line-height: 1.6;
 }
 
+.hero-subtitle[data-parallax] {
+  --parallax-y: 0px;
+  display: block;
+  transform: translateY(var(--parallax-y));
+  will-change: transform;
+}
+
 .button {
   position: relative;
   display: inline-flex;
@@ -1186,9 +1193,17 @@ a {
   text-transform: uppercase;
   overflow: hidden;
   isolation: isolate;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
   transition: transform 220ms ease, filter 220ms ease, border-color 220ms ease;
 }
 
+.hero-actions,
+.project-actions {
+  position: relative;
+  z-index: 2;
+}
+
 .button.primary {
   background: var(--button-bg);
   color: var(--button-text);
@@ -1294,7 +1309,7 @@ a {
   flex-direction: column;
   align-items: flex-start;
   width: max-content;
-  transform: translate3d(0, calc(-1 * var(--about-role-shift)), 0);
+  transform: translateY(calc(-1 * var(--about-role-shift)));
   transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
   will-change: transform;
   -webkit-user-select: none;
@@ -1512,21 +1527,33 @@ a {
   --reveal-delay: 0ms;
   --reveal-distance: 20px;
   opacity: 1;
-  transform: translate3d(0, var(--parallax-y), 0);
+  transform: none;
+}
+
+.reveal[data-parallax] {
+  transform: translateY(var(--parallax-y));
 }
 
 .js .reveal {
   opacity: 0;
-  transform: translate3d(0, calc(var(--reveal-distance) + var(--parallax-y)), 0);
+  transform: translateY(var(--reveal-distance));
   transition:
     opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
     transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
   transition-delay: var(--reveal-delay);
 }
 
+.js .reveal[data-parallax] {
+  transform: translateY(calc(var(--reveal-distance) + var(--parallax-y)));
+}
+
 .js .reveal.is-visible {
   opacity: 1;
-  transform: translate3d(0, var(--parallax-y), 0);
+  transform: none;
+}
+
+.js .reveal[data-parallax].is-visible {
+  transform: translateY(var(--parallax-y));
 }
 
 .js .reveal[data-parallax].is-visible.reveal-settled {
@@ -1581,11 +1608,6 @@ a {
 
 /* Mobile portrait nav */
 @media (max-width: 980px) and (orientation: portrait) {
-  .button {
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: transparent;
-  }
-
   .nav {
     top: calc(env(safe-area-inset-top, 0px) + 6px);
   }
@@ -1613,33 +1635,6 @@ a {
   .hero-bottom {
     margin-top: 0.32rem;
   }
-
-  .hero-title {
-    -webkit-transform: translateY(var(--parallax-y));
-    transform: translateY(var(--parallax-y));
-    will-change: auto;
-  }
-
-  .reveal {
-    -webkit-transform: translateY(var(--parallax-y));
-    transform: translateY(var(--parallax-y));
-  }
-
-  .js .reveal {
-    -webkit-transform: translateY(calc(var(--reveal-distance) + var(--parallax-y)));
-    transform: translateY(calc(var(--reveal-distance) + var(--parallax-y)));
-  }
-
-  .js .reveal.is-visible {
-    -webkit-transform: translateY(var(--parallax-y));
-    transform: translateY(var(--parallax-y));
-  }
-
-  .about-operator-track {
-    -webkit-transform: translateY(calc(-1 * var(--about-role-shift)));
-    transform: translateY(calc(-1 * var(--about-role-shift)));
-    will-change: auto;
-  }
 }
 
 @media (max-width: 980px) and (orientation: landscape) {
@@ -1655,13 +1650,12 @@ a {
 @media (max-width: 680px) {
   .section:not(.hero) .container,
   .projects-shell {
-    width: calc(100% - 2.2rem);
+    width: calc(100% - 2.35rem);
   }
 
   .hero .container {
-    width: calc(100% - 1.9rem);
+    width: calc(100% - 2.05rem);
   }
-
 }
 
 @media (prefers-reduced-motion: reduce) {

docs/assets/js/shell.js

@@ -1135,9 +1135,13 @@
     let metrics = { height: 0, widths: [] };
     let sequenceFrame = 0;
     let nextStepAt = 0;
+    let pendingRefresh = false;
     let lastLayoutWidth = 0;
     let lastViewportWidth = 0;
 
+    const measureLayoutWidth = () => Math.round(title.offsetWidth || title.clientWidth || title.getBoundingClientRect().width);
+    const measureViewportWidth = () => Math.round(document.documentElement.clientWidth || window.innerWidth || 0);
+
     const setImmediateTransitions = (enabled) => {
       const value = enabled ? "none" : "";
       viewport.style.transition = value;
@@ -1158,13 +1162,13 @@
     };
 
     const captureLayoutWidths = () => {
-      lastLayoutWidth = Math.round(title.getBoundingClientRect().width);
-      lastViewportWidth = Math.round(window.innerWidth || document.documentElement.clientWidth || 0);
+      lastLayoutWidth = measureLayoutWidth();
+      lastViewportWidth = measureViewportWidth();
     };
 
     const layoutWidthChanged = () => {
-      const currentTitleWidth = Math.round(title.getBoundingClientRect().width);
-      const currentViewportWidth = Math.round(window.innerWidth || document.documentElement.clientWidth || 0);
+      const currentTitleWidth = measureLayoutWidth();
+      const currentViewportWidth = measureViewportWidth();
       const titleDelta = Math.abs(currentTitleWidth - lastLayoutWidth);
       const viewportDelta = Math.abs(currentViewportWidth - lastViewportWidth);
 
@@ -1219,6 +1223,12 @@
         nextStepAt = now + transitionDuration + holdDuration;
 
         if (activeIndex >= finalIndex) {
+          if (pendingRefresh) {
+            pendingRefresh = false;
+            updateMetrics();
+            applyIndex(finalIndex, { immediate: true });
+            captureLayoutWidths();
+          }
           sequenceFrame = 0;
           return;
         }
@@ -1233,6 +1243,7 @@
       }
 
       started = true;
+      pendingRefresh = false;
 
       if (prefersReducedMotion) {
         updateMetrics();
@@ -1254,6 +1265,11 @@
         return;
       }
 
+      if (started && activeIndex < finalIndex) {
+        pendingRefresh = true;
+        return;
+      }
+
       updateMetrics();
       applyIndex(started ? activeIndex : 0, { immediate: true });
       captureLayoutWidths();
@@ -1316,17 +1332,30 @@
       return;
     }
 
+    const entries = layers.map((layer) => ({
+      layer,
+      speed: Number(layer.getAttribute("data-parallax")) || 0.02,
+      section: layer.closest(".section")
+    }));
+
     let raf = 0;
 
     const render = () => {
       raf = 0;
       const viewportCenter = window.innerHeight * 0.5;
+      const sectionDistances = new Map();
+
+      entries.forEach(({ section, layer, speed }) => {
+        const key = section || layer;
+
+        if (!sectionDistances.has(key)) {
+          const rect = key.getBoundingClientRect();
+          const distance = rect.top + rect.height * 0.5 - viewportCenter;
+          sectionDistances.set(key, distance);
+        }
 
-      layers.forEach((layer) => {
-        const speed = Number(layer.getAttribute("data-parallax")) || 0.02;
-        const rect = layer.getBoundingClientRect();
-        const distance = rect.top + rect.height * 0.5 - viewportCenter;
-        const shift = Math.max(-34, Math.min(34, -distance * speed));
+        const distance = sectionDistances.get(key) || 0;
+        const shift = Math.max(-28, Math.min(28, -distance * speed));
 
         layer.style.setProperty("--parallax-y", `${shift.toFixed(2)}px`);
       });

docs/index.html

@@ -8,7 +8,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@500;700;800&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="assets/css/style.css?v=20260409d">
+  <link rel="stylesheet" href="assets/css/style.css?v=20260409g">
 
   <link rel="icon" type="image/svg+xml" href="favicon.svg">
   <link rel="icon" sizes="192x192" href="android-chrome-192x192.png">
@@ -56,8 +56,8 @@ <h1 class="hero-title hero-title--pending" aria-label="SHAPE THE UNSEEN." data-h
           <span class="hero-title-text">SHAPE THE UNSEEN.</span>
         </h1>
 
-        <div class="hero-bottom reveal" data-reveal data-reveal-delay="260" data-parallax="0.03">
-          <p class="hero-subtitle">The endless journey of a creative technologist Jason Lee.</p>
+        <div class="hero-bottom reveal" data-reveal data-reveal-delay="260">
+          <p class="hero-subtitle" data-parallax="0.03">The endless journey of a creative technologist Jason Lee.</p>
           <div class="hero-actions">
             <a class="button primary" href="#projects">View Current Project</a>
           </div>
@@ -163,6 +163,6 @@ <h2>Open Repositories and Direct Channels</h2>
 
   <div id="footer-slot"></div>
 
-  <script src="assets/js/shell.js?v=20260409c" defer></script>
+  <script src="assets/js/shell.js?v=20260409g" defer></script>
 </body>
 </html>