Add project posts to the website

astro/src/components/projects/ProjectPost.astro

@@ -0,0 +1,39 @@
+---
+import CalendarIcon from '@/icons/CalendarIcon.astro';
+import { getImageUrl } from '@/lib/images';
+import { markdownToHtml } from '@/lib/markdown';
+import { Image } from 'astro:assets';
+
+interface Props {
+    project: ProjectPost;
+}
+
+const { project } = Astro.props;
+---
+
+<div
+    id={`project-${project.id}`}
+    class="flex flex-row justify-center items-center"
+>
+    <div class="flex lg:flex-col flex-col py-12 px-12 gap-y-8 gap-x-18 lg:max-w-[67%] w-full">
+        <div class="flex flex-col gap-3">
+            <h1 class="font-semibold text-5xl">{project.title}</h1>
+            <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>
+
+        <div>
+            <Image
+                src={getImageUrl(project.searchEngine.thumbnail.url)}
+                width="1200"
+                height="630"
+                alt={project.title}
+                class="rounded-2xl shadow-md object-cover"
+            />
+        </div>
+
+        <div set:html={markdownToHtml(project.content)}></div>
+    </div>
+</div>