Add the photo category index

astro/src/components/photos/CategoryIndex.astro

@@ -0,0 +1,43 @@
+---
+import { getAllCategories } from "@/content/photos/categories";
+import { getSettings } from "@/content/settings/settings"
+import { getImageUrl } from "@/lib/images";
+import { getCategoryRoute } from "@/lib/routing";
+import { Image } from "astro:assets";
+
+const settings = await getSettings();
+const categories = await getAllCategories(settings);
+---
+
+<div
+    id={`categoryindex`}
+    class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-10 gap-x-18 w-full"
+>
+    <div class="flex flex-col justify-center items-center gap-2.5">
+        <h1 class="text-5xl font-bold">Categories</h1>
+    </div>
+
+    <div class="flex flex-col gap-5">
+        { categories.map((category) => (
+            <div class="flex flex-row justify-center items-center">
+                <a href={getCategoryRoute(settings.photo, category)} class="group relative block w-[70%] overflow-hidden rounded-2xl shadow-md">
+                    <div>
+                        <Image
+                            src={getImageUrl(category.thumbnail.url)}
+                            alt={category.title}
+                            width="1200"
+                            height="630"
+                            class="rounded-2xl transition-transform duration-300 group-hover:scale-102"
+                        />
+
+                        <div class="absolute inset-0 bg-black/70 flex items-center justify-center p-6 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                            <h3 class="text-white text-5xl font-bold text-center tracking-tight">
+                                {category.title}
+                            </h3>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        )) }
+    </div>
+</div>

astro/src/pages/[...route].astro

@@ -10,6 +10,7 @@ import ProjectIndex from "@/components/projects/ProjectIndex.astro";
 import Webpage from "@/components/webpage/Webpage.astro";
 import BlogPost from "@/components/blogs/BlogPost.astro";
 import ProjectPost from "@/components/projects/ProjectPost.astro";
+import CategoryIndex from "@/components/photos/CategoryIndex.astro";
 
 export async function getStaticPaths() {
     const settings = await getSettings();
@@ -157,7 +158,7 @@ if (page === null || page.page === null || !page.page.exists) {
             }
     }}}>
         <Fragment slot="content">
-            <div>PhotoCategoryIndex</div>
+            <CategoryIndex />
         </Fragment>
     </WebpageLayout>
 ) }