add astro native SPA transition

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