From c7762f099cd55d6ce1044d5695277d7269f5c093 Mon Sep 17 00:00:00 2001 From: Timothy Pidashev Date: Mon, 6 Apr 2026 13:19:38 -0700 Subject: [PATCH] mobile optimizations --- src/components/background/index.tsx | 6 +++++- src/components/stream-content.tsx | 17 +++++++++++++---- src/layouts/content.astro | 6 +----- src/layouts/index.astro | 2 +- src/layouts/resource.astro | 6 +----- 5 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/components/background/index.tsx b/src/components/background/index.tsx index b250ff1..bbd9010 100644 --- a/src/components/background/index.tsx +++ b/src/components/background/index.tsx @@ -77,11 +77,13 @@ function readBgFromCSS(): string { interface BackgroundProps { layout?: "index" | "sidebar" | "content"; position?: "left" | "right"; + mobileOnly?: boolean; } const Background: React.FC = ({ layout = "index", position = "left", + mobileOnly = false, }) => { const canvasRef = useRef(null); const engineRef = useRef(null); @@ -330,7 +332,9 @@ const Background: React.FC = ({ const getContainerClasses = () => { if (isIndex) { - return "fixed inset-0 -z-10"; + return mobileOnly + ? "fixed inset-0 -z-10 lg:hidden" + : "fixed inset-0 -z-10"; } const baseClasses = "fixed top-0 bottom-0 hidden lg:block -z-10"; diff --git a/src/components/stream-content.tsx b/src/components/stream-content.tsx index a34b1e8..12b001b 100644 --- a/src/components/stream-content.tsx +++ b/src/components/stream-content.tsx @@ -56,13 +56,22 @@ export function StreamContent({ children }: { children: React.ReactNode }) { return; } - container.classList.remove("stream-hidden"); - + // Set inline opacity:0 on every block BEFORE removing the CSS class + // This prevents the flash of visible content between class removal and style application blocks.forEach((el) => { el.style.opacity = "0"; el.style.transform = "translate3d(0,16px,0)"; - el.style.transition = "opacity 0.6s ease-out, transform 0.6s ease-out"; - el.style.willChange = "transform, opacity"; + }); + + // Now safe to remove the CSS class — inline styles keep everything hidden + container.classList.remove("stream-hidden"); + + // Add transition properties in the next frame so the initial state is set first + requestAnimationFrame(() => { + blocks.forEach((el) => { + el.style.transition = "opacity 0.6s ease-out, transform 0.6s ease-out"; + el.style.willChange = "transform, opacity"; + }); }); const observer = new IntersectionObserver( diff --git a/src/layouts/content.astro b/src/layouts/content.astro index cff340e..7c9e985 100644 --- a/src/layouts/content.astro +++ b/src/layouts/content.astro @@ -56,13 +56,9 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
- -
- -
+
-
diff --git a/src/layouts/index.astro b/src/layouts/index.astro index cc0995a..d4294c2 100644 --- a/src/layouts/index.astro +++ b/src/layouts/index.astro @@ -41,7 +41,7 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";