timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 02:53:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

mobile optimizations

Browse Source
This commit is contained in:
Timothy Pidashev
2026-04-06 14:37:07 -07:00
parent 16f271c1c9
commit 3f103c3e15
6 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/about/intro.tsx
View File

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

3
src/components/about/stats-alltime.tsx
View File

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

3
src/components/about/stats-detailed.tsx
View File

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

4
src/components/about/timeline.tsx
View File

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

9
src/components/animate-in.tsx
View File

@@ -1,6 +1,11 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { prefersReducedMotion } from "@/lib/reduced-motion"; import { prefersReducedMotion } from "@/lib/reduced-motion";
function isMobile(): boolean {
if (typeof window === "undefined") return false;
return window.innerWidth < 1024;
}
interface AnimateInProps { interface AnimateInProps {
children: React.ReactNode; children: React.ReactNode;
delay?: number; 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 isReload = (performance.getEntriesByType?.("navigation")?.[0] as PerformanceNavigationTiming)?.type === "reload";
const isSpaNav = !!(window as any).__astroNavigation; 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); setSkip(true);
setVisible(true); setVisible(true);
return; return;

3
src/layouts/index.astro
View File

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