feat: add an all page with cards to link to it

src/pages/all.astro

@@ -0,0 +1,109 @@
+---
+import { readItems, readSingleton } from '@directus/sdk';
+
+import HeaderSection from '@components/sections/HeaderSection.astro';
+import BlogCard from '@components/cards/BlogCard.astro';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import directus from '@lib/directus';
+
+const global = await directus.request(readSingleton('site_global'));
+const posts = await directus.request(
+  readItems('posts', {
+    filter: { published: { _eq: true } },
+    fields: ['*'],
+    sort: ['-published_date'],
+  })
+);
+---
+
+<BaseLayout
+  title="All Posts"
+  description="Browse all articles from every category."
+  structuredData={{
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    inLanguage: 'en-US',
+    '@id': Astro.url.href,
+    url: Astro.url.href,
+    name: `All Posts | ${global.name}`,
+    description: "Browse all articles from every category.",
+    isPartOf: {
+      url: `${global.site_url}`,
+      name: global.name,
+      description: global.about,
+    },
+  }}
+>
+
+  <HeaderSection
+    title="All Posts"
+    subTitle="Browse all articles from every category."
+    btnExists
+    btnTitle="To Categories"
+    btnURL="/categories"
+  />
+
+  <section class="max-w-340 2xl:max-w-full mb-10 px-4 sm:px-6 lg:px-8 py-8 mx-auto mt-10">
+    <div class="columns-1 sm:columns-2 lg:columns-3 gap-6">
+      {posts.map((b) => 
+      <div class="break-inside-avoid mb-6">
+        <BlogCard post={b} />
+      </div>
+      )}
+    </div>
+  </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/blog/index.astro

@@ -6,6 +6,7 @@ import type { Post } from '@lib/directusTypes';
 import HeroSection from '@components/sections/HeroSection.astro';
 import SelectedPostsSection from '@components/sections/SelectedPostsSection.astro';
 import RecentPostsSection from '@components/sections/RecentPostsSection.astro';
+import AllPostsSection from '@components/sections/AllPostsSection.astro';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import directus from '@lib/directus';
 
@@ -60,6 +61,8 @@ const recentPosts: Post[] = posts.filter(
     title="Recent Posts"
   />
 
+  <AllPostsSection />
+  
 </BaseLayout>
 
 <script>

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

@@ -65,11 +65,66 @@ const categoriesPosts = posts
   />
 
   <section class="max-w-340 2xl:max-w-full mb-10 px-4 sm:px-6 lg:px-8 py-8 mx-auto mt-10">
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div class="columns-1 sm:columns-2 lg:columns-3 gap-6">
       {categoriesPosts.map((b) => 
-      <BlogCard post={b} />
+      <div class="break-inside-avoid mb-6">
+        <BlogCard post={b} />
+      </div>
       )}
     </div>
   </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

@@ -3,6 +3,7 @@ import { readSingleton } from '@directus/sdk';
 
 import HeroSection from '@components/sections/HeroSection.astro';
 import CategorySection from '@components/sections/CategorySection.astro';
+import AllCategoriesSection from '@components/sections/AllCategoriesSection.astro';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import directus from '@lib/directus';
 
@@ -40,6 +41,8 @@ const global = await directus.request(readSingleton('site_global'));
 
   <CategorySection />
 
+  <AllCategoriesSection />
+
 </BaseLayout>
 
 <script>

src/pages/index.astro

@@ -7,6 +7,7 @@ import HeroSection from '@components/sections/HeroSection.astro';
 import FeatureSection from '@components/sections/FeatureSection.astro';
 import WeatherSection from '@components/sections/WeatherSection.astro';
 import RecentPostsSection from '@components/sections/RecentPostsSection.astro';
+import AllPostsSection from '@components/sections/AllPostsSection.astro';
 import GiteaSection from '@components/sections/GiteaSection.astro';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import directus from '@lib/directus';
@@ -73,6 +74,8 @@ const recentPosts = posts
     subTitle="Checkout my most recent thoughts here"
   />
 
+  <AllPostsSection />
+  
   <GiteaSection
     title="Follow me on Gitea"
     subTitle="I love open source and have my code availabile on my Gitea server."