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 13:19:38 -07:00
parent c2407408fa
commit c7762f099c
5 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/background/index.tsx
View File

@@ -77,11 +77,13 @@ function readBgFromCSS(): string {
interface BackgroundProps { interface BackgroundProps {
layout?: "index" | "sidebar" | "content"; layout?: "index" | "sidebar" | "content";
position?: "left" | "right"; position?: "left" | "right";
mobileOnly?: boolean;
} }
const Background: React.FC<BackgroundProps> = ({ const Background: React.FC<BackgroundProps> = ({
layout = "index", layout = "index",
position = "left", position = "left",
mobileOnly = false,
}) => { }) => {
const canvasRef = useRef<HTMLCanvasElement>(null); const canvasRef = useRef<HTMLCanvasElement>(null);
const engineRef = useRef<AnimationEngine | null>(null); const engineRef = useRef<AnimationEngine | null>(null);
@@ -330,7 +332,9 @@ const Background: React.FC<BackgroundProps> = ({
const getContainerClasses = () => { const getContainerClasses = () => {
if (isIndex) { 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"; const baseClasses = "fixed top-0 bottom-0 hidden lg:block -z-10";

13
src/components/stream-content.tsx
View File

@@ -56,14 +56,23 @@ export function StreamContent({ children }: { children: React.ReactNode }) {
return; 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) => { blocks.forEach((el) => {
el.style.opacity = "0"; el.style.opacity = "0";
el.style.transform = "translate3d(0,16px,0)"; el.style.transform = "translate3d(0,16px,0)";
});
// 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.transition = "opacity 0.6s ease-out, transform 0.6s ease-out";
el.style.willChange = "transform, opacity"; el.style.willChange = "transform, opacity";
}); });
});
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
(entries) => { (entries) => {

6
src/layouts/content.astro
View File

@@ -56,13 +56,9 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
</head> </head>
<body class="bg-background text-foreground min-h-screen flex flex-col"> <body class="bg-background text-foreground min-h-screen flex flex-col">
<Header client:load /> <Header client:load />
<!-- Mobile: full-screen background --> <Background layout="index" mobileOnly client:only="react" transition:persist />
<div class="lg:hidden">
<Background layout="index" client:only="react" transition:persist />
</div>
<main class="flex-1 flex flex-col"> <main class="flex-1 flex flex-col">
<div class="max-w-5xl mx-auto pt-2 lg:pt-12 px-4 py-4 lg:py-8 pb-20 lg:pb-8 flex-1 relative z-10"> <div class="max-w-5xl mx-auto pt-2 lg:pt-12 px-4 py-4 lg:py-8 pb-20 lg:pb-8 flex-1 relative z-10">
<!-- Desktop: sidebar strips -->
<Background layout="content" position="right" client:only="react" transition:persist /> <Background layout="content" position="right" client:only="react" transition:persist />
<div> <div>
<slot /> <slot />

2
src/layouts/index.astro
View File

@@ -41,7 +41,7 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
<script is:inline set:html={THEME_LOADER_SCRIPT} /> <script is:inline set:html={THEME_LOADER_SCRIPT} />
<script is:inline set:html={ANIMATION_LOADER_SCRIPT} /> <script is:inline set:html={ANIMATION_LOADER_SCRIPT} />
</head> </head>
<body class="bg-background text-foreground"> <body class="bg-background text-foreground overflow-hidden h-screen">
<Header client:load transparent /> <Header client:load transparent />
<main transition:animate="fade"> <main transition:animate="fade">
<Background layout="index" client:only="react" transition:persist /> <Background layout="index" client:only="react" transition:persist />

6
src/layouts/resource.astro
View File

@@ -55,13 +55,9 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
<script is:inline set:html={ANIMATION_LOADER_SCRIPT} /> <script is:inline set:html={ANIMATION_LOADER_SCRIPT} />
</head> </head>
<body class="bg-background text-foreground min-h-screen flex flex-col"> <body class="bg-background text-foreground min-h-screen flex flex-col">
<!-- Mobile: full-screen background --> <Background layout="index" mobileOnly client:only="react" transition:persist />
<div class="lg:hidden">
<Background layout="index" client:only="react" transition:persist />
</div>
<main class="flex-1 flex flex-col"> <main class="flex-1 flex flex-col">
<div class="max-w-5xl mx-auto pt-2 lg:pt-12 px-4 py-4 lg:py-8 flex-1 relative z-10"> <div class="max-w-5xl mx-auto pt-2 lg:pt-12 px-4 py-4 lg:py-8 flex-1 relative z-10">
<!-- Desktop: sidebar strips -->
<Background layout="content" position="right" client:only="react" transition:persist /> <Background layout="content" position="right" client:only="react" transition:persist />
<div> <div>
<slot /> <slot />