Begin styling projects page

src/pages/projects/[slug].astro

@@ -1,6 +1,5 @@
 ---
 import ImageCarousel from "@components/ImageCarousel.astro";
-import SectionTitle from "@components/SectionTitle.astro";
 import MainLayout from "@layouts/MainLayout.astro";
 
 import { getCollection, render } from "astro:content";
@@ -35,6 +34,17 @@ const seoImage: SiteImage = {
   width: hero.width,
   height: hero.height
 };
+
+import A from "@components/MDX/A.astro";
+import Blockquote from "@components/MDX/Blockquote.astro";
+import CodeSnippet from "@components/MDX/CodeSnippet.astro";
+import H1 from "@components/MDX/H1.astro";
+import H2 from "@components/MDX/H2.astro";
+import H3 from "@components/MDX/H3.astro";
+import H4 from "@components/MDX/H4.astro";
+import H5 from "@components/MDX/H5.astro";
+import H6 from "@components/MDX/H6.astro";
+import P from "@components/MDX/P.astro";
 ---
 
 <MainLayout
@@ -61,10 +71,21 @@ const seoImage: SiteImage = {
       </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 <div class="mx-auto max-w-4xl px-8 py-16 text-justify md:text-left">
+        <Content
+          components={{
+            p: P,
+            a: A,
+            h1: H1,
+            h2: H2,
+            h3: H3,
+            h4: H4,
+            h5: H5,
+            h6: H6,
+            blockquote: Blockquote,
+            pre: CodeSnippet
+          }}
+        />
       </div>
     </section>
   </div>