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

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

@@ -0,0 +1,51 @@
+---
+import ImageCarousel from "@components/ImageCarousel.astro";
+import SectionTitle from "@components/SectionTitle.astro";
+import MainLayout from "@layouts/MainLayout.astro";
+
+import { getCollection, render } from "astro:content";
+
+import { getAllProjectImages } from "@/lib/utils";
+
+export async function getStaticPaths() {
+  const projects = await getCollection("projects");
+  return projects.map((project) => ({
+    params: { slug: project.id },
+    props: { project }
+  }));
+}
+
+const { project } = Astro.props;
+const { Content } = await render(project);
+
+const images = getAllProjectImages(project);
+---
+
+<MainLayout title="Projects">
+  <div class="w-full">
+    <section id="cta" class="text-white">
+      <div class="flex h-64 w-full items-center justify-center">
+        <ImageCarousel
+          images={images}
+          className="absolute -z-40 h-full w-full"
+          foreground={true}
+          interval={2000}
+          transitionDuration="duration-1000"
+          quality={50}
+          height={256}
+          shuffle={true}
+        />
+        <h1 class="font-header text-4xl uppercase text-shadow-lg/75">
+          {project.data.title}
+        </h1>
+      </div>
+    </section>
+    <section id="projects" class="bg-white dark:bg-gray-950">
+      <div <div class="mx-auto max-w-4xl px-8 py-16 text-center">
+        <SectionTitle>{project.data.title}</SectionTitle>
+
+        <Content />
+      </div>
+    </section>
+  </div>
+</MainLayout>