add astro native SPA transition

src/pages/404.astro

@@ -5,6 +5,7 @@ import Layout from '../layouts/Layout.astro';
 <Layout title="404 - Page Not Found">
   <div
     class="relative flex min-h-[80vh] flex-col items-center justify-center overflow-hidden px-4 py-20 text-center"
+    transition:animate="slide"
   >
     <!-- Animated background elements -->
     <div class="absolute inset-0 overflow-hidden">

src/pages/about.astro

@@ -16,7 +16,10 @@ const skills = await directus.request(
 ---
 
 <BaseLayout title="About Me" description={global.description}>
-  <div class="theme-transition-all mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-12 md:py-16">
+  <div
+    class="theme-transition-all mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-12 md:py-16"
+    transition:animate="slide"
+  >
     <!-- Hero Section -->
     <div class="relative mb-12 sm:mb-16 md:mb-20">
       <!-- Decorative elements -->
@@ -366,7 +369,7 @@ const skills = await directus.request(
 </style>
 
 <script>
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     const sliderTrack = document.querySelector('.slider-track');
 
     // Create seamless infinite scrolling effect

src/pages/blog/[...slug].astro

@@ -196,9 +196,6 @@ const { post, nextPost, prevPost } = Astro.props;
     }
   }
 
-  // Initialize on first load
-  document.addEventListener('DOMContentLoaded', initializeBlogPost);
-
   // Re-initialize when content changes via Astro's view transitions
   document.addEventListener('astro:page-load', initializeBlogPost);
 </script>

src/pages/blog/index.astro

@@ -25,7 +25,7 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
 ---
 
 <BaseLayout title="Blog">
-  <div class="mx-auto w-full max-w-6xl px-4 py-10 sm:px-6 sm:py-16">
+  <div class="mx-auto w-full max-w-6xl px-4 py-10 sm:px-6 sm:py-16" transition:animate="slide">
     <div class="relative mb-12 sm:mb-20">
       <div
         class="animate-blob absolute -top-10 -left-10 h-48 w-48 rounded-full bg-zinc-100 opacity-30 blur-3xl sm:-top-20 sm:-left-20 sm:h-72 sm:w-72 dark:bg-zinc-800/30"
@@ -307,7 +307,7 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
 </style>
 
 <script>
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     const backToTopButton = document.getElementById('back-to-top');
 
     if (backToTopButton) {

src/pages/index.astro

@@ -23,7 +23,10 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
 
 <Layout title=`Home | ${global.name}`>
   <!-- Hero Section with mobile responsiveness -->
-  <section class="theme-transition-all px-4 py-10 sm:px-6 sm:py-16 md:py-20">
+  <section
+    class="theme-transition-all px-4 py-10 sm:px-6 sm:py-16 md:py-20"
+    transition:animate="slide"
+  >
     <div class="relative mx-auto max-w-2xl">
       <!-- Adjusted blob positions and sizes for mobile appearance -->
       <div
@@ -278,7 +281,7 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
 
 <script>
   // Add hover effect for cards on touch devices
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 
     if (isTouchDevice) {

src/pages/topics/index.astro

@@ -30,7 +30,10 @@ const sortedTags = [...tagObjects].sort((a, b) => b.count - a.count);
 ---
 
 <BaseLayout title="Explore Tags">
-  <div class="theme-transition-all mx-auto w-full px-3 py-6 sm:px-6 sm:py-12 md:py-16">
+  <div
+    class="theme-transition-all mx-auto w-full px-3 py-6 sm:px-6 sm:py-12 md:py-16"
+    transition:animate="slide"
+  >
     <div class="theme-transition-element relative mb-8 text-center sm:mb-12 md:mb-16">
       <div
         class="animate-blob theme-transition-bg absolute -top-16 -left-16 h-36 w-36 rounded-full bg-zinc-100 opacity-50 blur-3xl sm:h-48 sm:w-48 md:h-72 md:w-72 dark:bg-zinc-800/50"
@@ -145,7 +148,7 @@ const sortedTags = [...tagObjects].sort((a, b) => b.count - a.count);
 </BaseLayout>
 
 <script>
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     const fixViewportWidth = () => {
       // Force the viewport to be exactly the width of the device
       const viewport = document.querySelector('meta[name="viewport"]');