mobile optimizations

src/components/about/intro.tsx

@@ -13,13 +13,13 @@ export default function Intro() {
     const inView = rect.top < window.innerHeight && rect.bottom > 0;
     const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
     const isSpaNav = !!(window as any).__astroNavigation;
+    const mobile = window.innerWidth < 1024;
 
-    if (inView && (isReload || isSpaNav)) {
+    if (inView && (mobile || isReload || isSpaNav)) {
       setVisible(true);
       return;
     }
     if (inView) {
-      // Fresh navigation — animate in
       requestAnimationFrame(() => setVisible(true));
       return;
     }

src/components/about/stats-alltime.tsx

@@ -29,8 +29,9 @@ const Stats = () => {
     const inView = rect.top < window.innerHeight && rect.bottom > 0;
     const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
     const isSpaNav = !!(window as any).__astroNavigation;
+    const mobile = window.innerWidth < 1024;
 
-    if (inView && (isReload || isSpaNav)) {
+    if (inView && (mobile || isReload || isSpaNav)) {
       setSkipAnim(true);
       setIsVisible(true);
       return;

src/components/about/stats-detailed.tsx

@@ -36,8 +36,9 @@ const DetailedStats = () => {
     const inView = rect.top < window.innerHeight && rect.bottom > 0;
     const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
     const isSpaNav = !!(window as any).__astroNavigation;
+    const mobile = window.innerWidth < 1024;
 
-    if (inView && (isReload || isSpaNav)) {
+    if (inView && (mobile || isReload || isSpaNav)) {
       setSkipAnim(true);
       setVisible(true);
       return;

src/components/about/timeline.tsx

@@ -53,7 +53,9 @@ function TimelineCard({ item, index }: { item: (typeof timelineItems)[number]; i
     const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
     const isSpaNav = !!(window as any).__astroNavigation;
 
-    if (inView && (isReload || isSpaNav)) {
+    const mobile = window.innerWidth < 1024;
+
+    if (inView && (mobile || isReload || isSpaNav)) {
       setSkip(true);
       setVisible(true);
       return;

src/components/animate-in.tsx

@@ -1,6 +1,11 @@
 import { useEffect, useRef, useState } from "react";
 import { prefersReducedMotion } from "@/lib/reduced-motion";
 
+function isMobile(): boolean {
+  if (typeof window === "undefined") return false;
+  return window.innerWidth < 1024;
+}
+
 interface AnimateInProps {
   children: React.ReactNode;
   delay?: number;
@@ -27,7 +32,9 @@ export function AnimateIn({ children, delay = 0, threshold = 0.15 }: AnimateInPr
     const isReload = (performance.getEntriesByType?.("navigation")?.[0] as PerformanceNavigationTiming)?.type === "reload";
     const isSpaNav = !!(window as any).__astroNavigation;
 
-    if (inView && (isReload || isSpaNav)) {
+    // On mobile: skip animation for anything already in view (prevents flicker on navigation)
+    // On desktop: only skip on reload or SPA nav
+    if (inView && (isMobile() || isReload || isSpaNav)) {
       setSkip(true);
       setVisible(true);
       return;

src/layouts/index.astro

@@ -74,8 +74,7 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
         });
         document.addEventListener('astro:after-swap', function() {
           var m = getMask();
-          // Wait longer for canvas + overlays to hydrate on index page
-          setTimeout(function() { m.classList.remove('active'); }, 150);
+          setTimeout(function() { m.classList.remove('active'); }, 50);
         });
         // Mark SPA navigations so AnimateIn can detect them
         document.addEventListener('astro:after-swap', function() {