Add the Project and Blog index pages (no pagination just yet)

astro/src/components/projects/ProjectIndex.astro

@@ -1,9 +1,52 @@
 ---
+import { getSettings } from '@/content/settings/settings';
+import { getAllPaginatedProjects } from '@/content/projects/projects';
+import { markdownToHtml } from '@/lib/markdown';
+import { Image } from 'astro:assets';
+import { getProjectRoute } from '@/lib/routing';
+import CalendarIcon from '@/icons/CalendarIcon.astro';
+import { getImageUrl } from '@/lib/images';
+
 interface Props {
     page: ProjectIndex;
 }
 
 const { page } = Astro.props;
+const { pageNumber } = page;
+
+const settings = await getSettings();
+const projects = await getAllPaginatedProjects(settings, pageNumber);
 ---
 
-<div>Project Index</div>
+<div
+    id={`projectindex-${pageNumber}`}
+    class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
+>
+    <div class="flex flex-col justify-center items-center gap-2.5">
+        <h1 class="text-5xl font-bold">{ settings.project.title }</h1>
+        { settings.project.subtext !== null && (
+            <div set:html={markdownToHtml(settings.project.subtext)}></div>
+        ) }
+    </div>
+
+    <div class="grid grid-cols-2 gap-6">
+        { projects.map((project) => (
+            <a href={getProjectRoute(settings.project, project)} class={`flex flex-col gap-2`}>
+                <Image
+                    src={getImageUrl(project.searchEngine.thumbnail.url)}
+                    alt={project.title}
+                    class="flex rounded-2xl shadow-md w-full"
+                    width={600}
+                    height={315}
+                />
+                <div class="flex flex-col gap-1">
+                    <h4 class="font-semibold text-[28px]">{project.title}</h4>
+                    <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
+                        <CalendarIcon width={20} height={20} />
+                        <div>{project.date}</div>
+                    </div>
+                </div>
+            </a>
+        )) }
+    </div>
+</div>