feat: enable prerender pending resoltuion of server island fix

Dockerfile

@@ -23,8 +23,8 @@ COPY --from=prod-deps /app/node_modules /app/node_modules
 COPY --from=build /app/dist /app/dist
 
 ARG APP_VERSION=latest
-ARG APP_VERSION
 
+ENV NODE_ENV=production
 ENV HOST=0.0.0.0
 ENV PORT=4321
 

astro.config.mjs

@@ -24,8 +24,6 @@ export default defineConfig({
     }
   },
 
-  prefetch: true,
-
   integrations: [
     react(),
     sitemap(),

package.json

@@ -19,8 +19,10 @@
   },
   "scripts": {
     "dev": "astro dev",
+    "full-dev": "rm -rf dist node_modules .astro && bun install && astro build && astro dev",
     "build": "astro build",
     "preview": "astro preview",
+    "full-preview": "rm -rf dist node_modules .astro && bun install && astro build && astro preview",
     "astro": "astro",
     "format": "prettier --write  \"**/*.{js,jsx,ts,tsx,md,mdx,astro}\"",
     "lint": "eslint \"src/**/*.{js,ts,jsx,tsx,astro}\"",

src/components/Header.astro

@@ -95,5 +95,3 @@ const currentPath = pathname.slice(1);
     </div>
   </nav>
 </header>
-
-<script is:inline src="/vendor/preline/collapse2.1.0.min.js"></script>

src/components/buttons/ThemeToggleButton.astro

@@ -49,100 +49,88 @@
       (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
     document.documentElement.classList.toggle('dark', isDark);
   };
-
   applyTheme();
-
-  document.addEventListener('astro:after-swap', applyTheme);
 </script>
 
 <script>
-  function setupThemeToggle() {
-    const themeToggles = document.querySelectorAll('[data-theme-toggle]');
-
-    // Create theme switch overlay element
-    if (!document.querySelector('.theme-switch-overlay')) {
-      const overlay = document.createElement('div');
-      overlay.className = 'theme-switch-overlay fixed inset-0 pointer-events-none z-50';
-      overlay.style.opacity = '0';
-      overlay.style.transition = 'opacity 0.15s ease-out';
-      document.body.appendChild(overlay);
-    }
-
-    themeToggles.forEach((toggle) => {
-      ['click', 'touchend'].forEach((eventType) => {
-        toggle.addEventListener(
-          eventType,
-          (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-
-            // Get click/touch position for radial animation
-            let x, y;
-            if (e.type === 'touchend' && e.changedTouches && e.changedTouches[0]) {
-              const rect = toggle.getBoundingClientRect();
-              x = e.changedTouches[0].clientX - rect.left;
-              y = e.changedTouches[0].clientY - rect.top;
-            } else {
-              const rect = toggle.getBoundingClientRect();
-              x = e.clientX - rect.left;
-              y = e.clientY - rect.top;
-            }
-
-            document.documentElement.style.setProperty('--x', `${x}px`);
-            document.documentElement.style.setProperty('--y', `${y}px`);
-
-            const overlay = document.querySelector('.theme-switch-overlay');
-            const isDark = document.documentElement.classList.contains('dark');
-            const newTheme = isDark ? 'light' : 'dark';
-
-            // Show overlay during transition
-            if (overlay) {
-              overlay.style.backgroundColor =
-                newTheme === 'dark' ? 'rgba(24, 24, 27, 0.3)' : 'rgba(255, 255, 255, 0.3)';
-              overlay.style.opacity = '1';
-            }
-
-            document.documentElement.classList.add('theme-switching');
-
-            // Force a reflow to ensure all elements update
-            document.body.offsetHeight;
-
-            // Toggle dark mode with a slight delay to allow overlay to appear
-            setTimeout(() => {
-              if (isDark) {
-                document.documentElement.classList.remove('dark');
-              } else {
-                document.documentElement.classList.add('dark');
-              }
-
-              localStorage.setItem('theme', newTheme);
-              document.dispatchEvent(
-                new CustomEvent('themeChanged', {
-                  detail: { isDark: newTheme === 'dark' },
-                })
-              );
-
-              // Force another reflow to ensure all elements update
-              document.body.offsetHeight;
-
-              setTimeout(() => {
-                if (overlay) {
-                  overlay.style.opacity = '0';
-                }
-                document.documentElement.classList.remove('theme-switching');
-              }, 150);
-            }, 50);
-          },
-          { passive: false }
-        );
-      });
-    });
+  if (!document.querySelector('.theme-switch-overlay')) {
+    const overlay = document.createElement('div');
+    overlay.className = 'theme-switch-overlay fixed inset-0 pointer-events-none z-50';
+    overlay.style.opacity = '0';
+    overlay.style.transition = 'opacity 0.15s ease-out';
+    document.body.appendChild(overlay);
   }
+  ['click', 'touchend'].forEach((eventType) => {
+    document.addEventListener(
+      eventType,
+      (e) => {
+        const target = e.target as HTMLElement;
+        const toggle = target.closest('[data-theme-toggle]');
+        
+        if (!toggle) return;
 
-  // Run setup on load
-  document.addEventListener('astro:page-load', setupThemeToggle);
+        e.preventDefault();
+
+        let x, y;
+        const rect = toggle.getBoundingClientRect();
+        
+        if (eventType === 'touchend') {
+          const touchEvent = e as TouchEvent;
+          if (touchEvent.changedTouches && touchEvent.changedTouches[0]) {
+            x = touchEvent.changedTouches[0].clientX - rect.left;
+            y = touchEvent.changedTouches[0].clientY - rect.top;
+          }
+        } else {
+          const mouseEvent = e as MouseEvent;
+          x = mouseEvent.clientX - rect.left;
+          y = mouseEvent.clientY - rect.top;
+        }
+
+        document.documentElement.style.setProperty('--x', `${x}px`);
+        document.documentElement.style.setProperty('--y', `${y}px`);
+
+        const overlay = document.querySelector('.theme-switch-overlay') as HTMLElement;
+        const isDark = document.documentElement.classList.contains('dark');
+        const newTheme = isDark ? 'light' : 'dark';
+
+        if (overlay) {
+          overlay.style.backgroundColor =
+            newTheme === 'dark' ? 'rgba(24, 24, 27, 0.3)' : 'rgba(255, 255, 255, 0.3)';
+          overlay.style.opacity = '1';
+        }
+
+        document.documentElement.classList.add('theme-switching');
+
+        document.body.offsetHeight;
+
+        setTimeout(() => {
+          if (isDark) {
+            document.documentElement.classList.remove('dark');
+          } else {
+            document.documentElement.classList.add('dark');
+          }
+
+          localStorage.setItem('theme', newTheme);
+          document.dispatchEvent(
+            new CustomEvent('themeChanged', {
+              detail: { isDark: newTheme === 'dark' },
+            })
+          );
+
+          document.body.offsetHeight;
+
+          setTimeout(() => {
+            if (overlay) {
+              overlay.style.opacity = '0';
+            }
+            document.documentElement.classList.remove('theme-switching');
+          }, 150);
+        }, 50);
+      },
+      { passive: false }
+    );
+  });
 
-  // Also run on page visibility change to ensure theme is consistent
   document.addEventListener('visibilitychange', () => {
     if (document.visibilityState === 'visible') {
       const currentTheme = localStorage.getItem('theme');
@@ -154,7 +142,6 @@
     }
   });
 
-  // Listen for system preference changes
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
     if (!localStorage.getItem('theme')) {
       if (matches) {

src/components/cards/CategoryCard.astro

@@ -22,8 +22,8 @@ const { slug, title, description, logoLight, logoDark, count, publishDate } = As
     data-astro-prefetch
   >
     <div class="relative grow overflow-hidden">
-      <div class="absolute inset-1 flex flex-col p-3 md:p-4 lg:p-5">
-        <div class="flex flex-row items-center mb-4">
+      <div class="mask-fade-edges absolute inset-1 flex flex-col p-3 md:p-4 lg:p-5">
+        <div class="flex flex-row items-center mb-4 shrink-0">
           <div class="card-hover-icon-scale shrink-0 mr-3">
             <Logo
               srcLight={getDirectusImageURL(logoLight)}
@@ -35,12 +35,12 @@ const { slug, title, description, logoLight, logoDark, count, publishDate } = As
             {title}
           </h3>
         </div>
-        <div>
-          <p class="card-text-description mb-4">
+        <div class="overflow-hidden">
+          <p class="card-text-description line-clamp-3">
             {description}
           </p>
         </div>
-        <div class="card-text-description flex items-center justify-between text-xs mt-auto pt-1 md:pt-2">
+        <div class="card-text-description flex shrink-0 items-center justify-between text-xs mt-auto pt-1 md:pt-2">
           <span class="inline-flex items-center">
             <svg
               xmlns="http://www.w3.org/2000/svg"

src/components/sections/RecentPostsSection.astro

@@ -18,7 +18,7 @@ const global = await directus.request(readSingleton('site_global'));
 const { posts, title, subTitle } = Astro.props;
 ---
 
-<section class="max-w-340 2xl:max-w-full px-4 sm:px-6 lg:px-8 py-10 lg:py-14 mx-auto mb-2 md:mb-8">
+<section class="max-w-340 2xl:max-w-full px-4 sm:px-6 lg:px-8 py-10 lg:py-14 mx-auto mb-2 md:mb-4">
   <div class="text-center max-w-2xl mx-auto mb-10 lg:mb-14">
     <h1 class="smooth-reveal card-text-header block">
       {title}

src/components/sections/SelectedPostsSection.astro

@@ -11,7 +11,7 @@ interface Props {
 const { posts } = Astro.props;
 ---
 
-<section class="smooth-reveal flex flex-col gap-4 md:mb-20">
+<section class="smooth-reveal-cards flex flex-col gap-4 md:mb-20">
   {posts.map((post, index) => index % 2 === 0 ? (
   <LargeBlogLeftCard post={post}/>
   ) : (

src/components/sections/WeatherSection.astro

@@ -20,7 +20,7 @@ const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, ti
   </div>
   {error ? (
   <div class="card-base p-10 text-accent text-center">
-    Sorry, {error.toLowerCase}
+    Sorry, {error.toLowerCase()}
   </div>
   ) : (
   <div class="flex flex-wrap justify-center gap-4 lg:gap-6">

src/layouts/BaseLayout.astro

@@ -1,5 +1,4 @@
 ---
-import { ClientRouter } from 'astro:transitions';
 import { readSingleton } from '@directus/sdk';
 
 import BaseHead from '@components/BaseHead.astro';
@@ -39,8 +38,7 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
       structuredData={structuredData}
     />
 
-    <ClientRouter fallback="swap" />
-
+    <!-- Set Theme -->
     <script is:inline>
       const theme = (() => {
         if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
@@ -60,6 +58,12 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
       window.localStorage.setItem('theme', theme);
     </script>
 
+    <!-- Preline -->
+    <script
+      src="/vendor/preline/collapse2.1.0.min.js"
+      is:inline
+    />
+
     <!-- Rybbit Tracking Snippet -->
     <script
       src="https://rybbit.alexlebens.dev/api/script.js"
@@ -104,7 +108,52 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
     }
   };
   resetScroll();
-  document.addEventListener('astro:after-swap', resetScroll);
+
+  document.addEventListener('swup:page:view', () => {
+    resetScroll();
+    if (typeof (window as any).HSStaticMethods !== 'undefined') {
+      (window as any).HSStaticMethods.autoInit();
+    }
+    if (typeof (window as any).rybbit === 'function') {
+      (window as any).rybbit('trackPageview'); 
+    }
+  });
+</script>
+
+<script>
+  const animateContent = () => {
+    const smoothReveal = document.querySelectorAll('.smooth-reveal');
+    smoothReveal.forEach((el, index) => {
+      setTimeout(() => {
+        el.classList.add('animate-reveal');
+      }, 50 + index * 100);
+    });
+
+    const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
+    smoothReveal2.forEach((el, index) => {
+      setTimeout(() => {
+        el.classList.add('animate-reveal');
+      }, 200 + index * 250);
+    });
+
+    const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
+    smoothRevealCards.forEach((el, index) => {
+      setTimeout(() => {
+        el.classList.add('animate-reveal');
+      }, 400 + index * 250);
+    });
+
+    const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
+    smoothRevealFade.forEach((el, index) => {
+      setTimeout(() => {
+        el.classList.add('animate-reveal-fade');
+      }, 100 + index * 250);
+    });
+  };
+
+  animateContent();
+
+  document.addEventListener('swup:page:view', animateContent);
 </script>
 
 <style>

src/pages/404.astro

@@ -86,24 +86,6 @@ const global = await directus.request(readSingleton('site_global'));
     const randomFact = funFacts[Math.floor(Math.random() * funFacts.length)];
     funFactElement.textContent = randomFact;
   }
-
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      // Animate group 1
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          100 + index * 150
-        );
-      });
-    };
-
-    animateContent();
-  });
 </script>
 
 <style>

src/pages/about.astro

@@ -47,33 +47,3 @@ const global = await directus.request(readSingleton('site_global'));
   </section>
 
 </BaseLayout>
-
-<script>
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          50 + index * 100
-        );
-      });
-
-      // Animate with just fade in with staggered delay
-      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
-      smoothRevealFade.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal-fade');
-          },
-          100 + index * 250
-        );
-      });
-    };
-
-    animateContent();
-  });
-</script>

src/pages/all.astro

@@ -52,56 +52,3 @@ const posts = await directus.request(
   </section>
 
 </BaseLayout>
-
-<script>
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      // Animate group 1
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          50 + index * 100
-        );
-      });
-
-      // Animate group 2
-      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
-      smoothReveal2.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          200 + index * 150
-        );
-      });
-
-      // Animate topic cards with staggered delay
-      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
-      smoothRevealCards.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          500 + index * 100
-        );
-      });
-
-      // Animate with just fade in with staggered delay
-      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
-      smoothRevealFade.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal-fade');
-          },
-          100 + index * 250
-        );
-      });
-    };
-
-    animateContent();
-  });
-</script>

src/pages/apps.astro

@@ -37,23 +37,3 @@ const global = await directus.request(readSingleton('site_global'));
   <ApplicationSection className="smooth-reveal-2" />
 
 </BaseLayout>
-
-<script>
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      // Animate group 1
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          50 + index * 100
-        );
-      });
-    };
-
-    animateContent();
-  });
-</script>

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

@@ -174,21 +174,4 @@ const content = marked.parse(post.content || '');
 
     lightbox.init();
   }
-
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          100 + index * 100
-        );
-      });
-    };
-
-    animateContent();
-  });
 </script>

src/pages/blog/index.astro

@@ -57,56 +57,3 @@ const recentPosts: Post[] = posts.filter(
   />
 
 </BaseLayout>
-
-<script>
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      // Animate group 1
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          200 + index * 300
-        );
-      });
-
-      // Animate group 2
-      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
-      smoothReveal2.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          500 + index * 100
-        );
-      });
-
-      // Animate topic cards with staggered delay
-      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
-      smoothRevealCards.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          1000 + index * 250
-        );
-      });
-
-      // Animate with just fade in with staggered delay
-      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
-      smoothRevealFade.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal-fade');
-          },
-          100 + index * 250
-        );
-      });
-    };
-
-    animateContent();
-  });
-</script>

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

@@ -75,56 +75,3 @@ const categoriesPosts = posts
   </section>
 
 </BaseLayout>
-
-<script>
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      // Animate group 1
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          50 + index * 100
-        );
-      });
-
-      // Animate group 2
-      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
-      smoothReveal2.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          200 + index * 150
-        );
-      });
-
-      // Animate topic cards with staggered delay
-      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
-      smoothRevealCards.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          500 + index * 100
-        );
-      });
-
-      // Animate with just fade in with staggered delay
-      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
-      smoothRevealFade.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal-fade');
-          },
-          100 + index * 250
-        );
-      });
-    };
-
-    animateContent();
-  });
-</script>

src/pages/categories/index.astro

@@ -37,56 +37,3 @@ const global = await directus.request(readSingleton('site_global'));
   <CategorySection />
 
 </BaseLayout>
-
-<script>
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      // Animate group 1
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          50 + index * 100
-        );
-      });
-
-      // Animate group 2
-      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
-      smoothReveal2.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          200 + index * 150
-        );
-      });
-
-      // Animate topic cards with staggered delay
-      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
-      smoothRevealCards.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          500 + index * 100
-        );
-      });
-
-      // Animate with just fade in with staggered delay
-      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
-      smoothRevealFade.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal-fade');
-          },
-          100 + index * 250
-        );
-      });
-    };
-
-    animateContent();
-  });
-</script>

src/pages/index.astro

@@ -55,6 +55,12 @@ const recentPosts = posts
 
   <FeatureSection />
 
+  <RecentPostsSection
+    posts={recentPosts}
+    title="Latest Posts"
+    subTitle="Checkout my most recent thoughts here"
+  />
+
   <WeatherSection
     server:defer
     latitude={weather.latitude}
@@ -63,12 +69,6 @@ const recentPosts = posts
     timezone={weather.timezone}
   />
 
-  <RecentPostsSection
-    posts={recentPosts}
-    title="Latest Posts"
-    subTitle="Checkout my most recent thoughts here"
-  />
-
   <GiteaSection
     title="Follow me on Gitea"
     subTitle="I love open source and have my code availabile on my Gitea server."
@@ -76,62 +76,3 @@ const recentPosts = posts
   />
 
 </BaseLayout>
-
-<script>
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      // Animate group 1
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          50 + index * 100
-        );
-      });
-
-      // Animate group 2
-      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
-      smoothReveal2.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          200 + index * 250
-        );
-      });
-
-      // Animate topic cards with staggered delay
-      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
-      smoothRevealCards.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          400 + index * 250
-        );
-      });
-
-      // Animate with just fade in with staggered delay
-      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
-      smoothRevealFade.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal-fade');
-          },
-          100 + index * 250
-        );
-      });
-    };
-
-    animateContent();
-
-    const observer = new MutationObserver(() => {
-      animateContent();
-    });
-
-    observer.observe(document.body, { childList: true, subtree: true });
-  });
-</script>

src/styles/utilities.css

@@ -138,3 +138,15 @@
          bg-neutral-100 dark:bg-neutral-800
          shadow-xs dark:shadow-md
 }
+
+@utility mask-fade-edges {
+  -webkit-mask-image: 
+    linear-gradient(to right, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent),
+    linear-gradient(to bottom, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent);
+  mask-image: 
+    linear-gradient(to right, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent),
+    linear-gradient(to bottom, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent);
+
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+}

src/support/animation.ts

@@ -1,50 +0,0 @@
-// Add smooth reveal animations for content after loading
-document.addEventListener('astro:page-load', () => {
-  const animateContent = () => {
-    // Animate group 1
-    const smoothReveal = document.querySelectorAll('.smooth-reveal');
-    smoothReveal.forEach((el, index) => {
-      setTimeout(
-        () => {
-          el.classList.add('animate-reveal');
-        },
-        50 + index * 100
-      );
-    });
-
-    // Animate group 2
-    const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
-    smoothReveal2.forEach((el, index) => {
-      setTimeout(
-        () => {
-          el.classList.add('animate-reveal');
-        },
-        200 + index * 250
-      );
-    });
-
-    // Animate topic cards with staggered delay
-    const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
-    smoothRevealCards.forEach((el, index) => {
-      setTimeout(
-        () => {
-          el.classList.add('animate-reveal');
-        },
-        400 + index * 250
-      );
-    });
-
-    // Animate with just fade in with staggered delay
-    const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
-    smoothRevealFade.forEach((el, index) => {
-      setTimeout(
-        () => {
-          el.classList.add('animate-reveal-fade');
-        },
-        100 + index * 250
-      );
-    });
-  };
-
-  animateContent();
-});