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

src/pages/about.astro

@@ -0,0 +1,37 @@
+---
+import { Image } from "astro:assets";
+import {
+  Content as AboutContent,
+  components as aboutComponents
+} from "../assets/bios/about.mdx";
+import aboutImage from "../assets/img/about.jpg";
+import Link from "../components/Link.astro";
+import Paragraph from "../components/Paragraph.astro";
+import SectionTitle from "../components/SectionTitle.astro";
+import MainLayout from "../layouts/MainLayout.astro";
+---
+
+<MainLayout title="About">
+  <div class="w-full">
+    <section id="about" class="bg-white dark:bg-gray-950">
+      <div class="mx-auto max-w-4xl px-8 py-16 text-justify sm:text-center">
+        <SectionTitle>About</SectionTitle>
+        <AboutContent
+          components={{ ...aboutComponents, p: Paragraph, a: Link }}
+        />
+        <Image
+          src={aboutImage}
+          alt="A photo of Nathan conducting the Woodville Concert Band"
+          class="mx-auto mt-8 size-96 rounded-full object-cover drop-shadow-lg/75 transition ease-in-out hover:scale-150 hover:shadow-xl/50"
+          transition:name="aboutImage"
+        />
+        <a
+          href="/contact/"
+          class="bg-primary text-md font-header hover:text-primary repeat hover:ring-primary mx-auto mt-8 inline-block rounded object-center px-6 py-3 font-light text-white uppercase drop-shadow-lg/75 transition hover:bg-white hover:ring-2"
+        >
+          Get in touch!
+        </a>
+      </div>
+    </section>
+  </div>
+</MainLayout>