Refactor BlogPost layout by removing animations for improved performance

- 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

View File

@ -78,7 +78,7 @@ const readTime = '5 min read';
<header class="mb-16 lg:mb-20">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
<!-- Text Content -->
<div class="order-2 lg:order-1 animate-on-scroll slide-up">
<div class="order-2 lg:order-1">
<!-- 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 items-center gap-2">
@ -121,13 +121,14 @@ const readTime = '5 min read';
<!-- Hero Image -->
{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]">
<Image
src={heroImage}
alt=""
width={600}
height={450}
loading="eager"
class="w-full h-full object-cover"
/>
<!-- Subtle overlay -->
@ -140,12 +141,12 @@ const readTime = '5 min read';
</header>
<!-- Main Content -->
<div class="prose-custom animate-on-scroll slide-up stagger-1">
<div class="prose-custom">
<slot />
</div>
<!-- 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>
<p class="text-[10px] font-mono text-slate-500 uppercase tracking-widest mb-2">