Nicholai/nicholai-work-2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor BlogPost layout by removing animations for improved performance

Browse Source 
- Removed animation classes from the BlogPost layout to enhance loading speed and user experience.
- Added eager loading for the hero image to prioritize its display.
- Streamlined the main content section by eliminating unnecessary animations.
This commit is contained in:
Nicholai 2025-12-08 04:17:39 -07:00
parent 6625112e2c
commit 2bb7c2ce2c
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/layouts/BlogPost.astro
View File

@ -78,7 +78,7 @@ const readTime = '5 min read';
<header class="mb-16 lg:mb-20"> <header class="mb-16 lg:mb-20">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
<!-- Text Content --> <!-- Text Content -->
<div class="order-2 lg:order-1 animate-on-scroll slide-up"> <div class="order-2 lg:order-1">
<!-- Metadata --> <!-- Metadata -->
<div class="flex flex-wrap items-center gap-3 text-[10px] font-mono text-slate-500 uppercase tracking-widest mb-5"> <div class="flex flex-wrap items-center gap-3 text-[10px] font-mono text-slate-500 uppercase tracking-widest mb-5">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@ -121,13 +121,14 @@ const readTime = '5 min read';
<!-- Hero Image --> <!-- Hero Image -->
{heroImage && ( {heroImage && (
<div class="order-1 lg:order-2 animate-on-scroll fade-in"> <div class="order-1 lg:order-2">
<div class="relative aspect-[4/3] overflow-hidden border border-white/10 bg-white/[0.02]"> <div class="relative aspect-[4/3] overflow-hidden border border-white/10 bg-white/[0.02]">
<Image <Image
src={heroImage} src={heroImage}
alt="" alt=""
width={600} width={600}
height={450} height={450}
loading="eager"
class="w-full h-full object-cover" class="w-full h-full object-cover"
/> />
<!-- Subtle overlay --> <!-- Subtle overlay -->
@ -140,12 +141,12 @@ const readTime = '5 min read';
</header> </header>
<!-- Main Content --> <!-- Main Content -->
<div class="prose-custom animate-on-scroll slide-up stagger-1"> <div class="prose-custom">
<slot /> <slot />
</div> </div>
<!-- Author Footer --> <!-- Author Footer -->
<footer class="mt-24 pt-10 border-t border-white/10 animate-on-scroll fade-in"> <footer class="mt-24 pt-10 border-t border-white/10">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6"> <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
<div> <div>
<p class="text-[10px] font-mono text-slate-500 uppercase tracking-widest mb-2"> <p class="text-[10px] font-mono text-slate-500 uppercase tracking-widest mb-2">