Initial design based off original website, some things still to do

src/pages/projects.astro

@@ -0,0 +1,34 @@
+---
+import { getCollection } from "astro:content";
+
+import SectionTitle from "../components/SectionTitle.astro";
+import MainLayout from "../layouts/MainLayout.astro";
+
+import ProjectCard from "@components/ProjectCard.astro";
+
+const projects = (await getCollection("projects")).sort(
+  (a, b) => b.data.date.valueOf() - a.data.date.valueOf()
+);
+---
+
+<MainLayout title="Projects">
+  <div class="w-full">
+    <section id="projects" class="bg-white dark:bg-gray-950">
+      <div class="mx-auto max-w-4xl px-8 py-16 text-center">
+        <SectionTitle>Recent Projects</SectionTitle>
+        <div class="space-y-8">
+          {
+            projects.map((project, index) => {
+              return (
+                <ProjectCard
+                  project={project}
+                  textOn={index % 2 === 0 ? "left" : "right"}
+                />
+              );
+            })
+          }
+        </div>
+      </div>
+    </section>
+  </div>
+</MainLayout>