feat: add About page layout

src/layouts/AboutLayout.astro

@@ -0,0 +1,28 @@
+---
+import GridLayout from './GridLayout.astro';
+
+import PageTitle from '../components/PageTitle.astro';
+
+import { Image } from '../components';
+
+export interface Props {
+	class?: string;
+	grid?: 'wide' | 'narrow';
+}
+
+const { frontmatter, class: className, grid = 'narrow' } = Astro.props;
+const gridVariant = frontmatter.grid || grid;
+---
+
+<GridLayout grid={gridVariant} class={className} {frontmatter}>
+	<PageTitle slot="title" grid={gridVariant} {frontmatter}>
+		{frontmatter.title}
+	</PageTitle>
+	<div
+		slot="before-content"
+		class="col-start-1 col-end-12 md:col-start-3 md:col-end-10 xl:col-start-15 xl:col-end-18 xl:row-start-2 3xl:col-start-14 3xl:col-end-17"
+	>
+		<Image src="/assets/images/portrait-stefan-imhoff.svg" alt="Stefan Imhoff" />
+	</div>
+	<slot />
+</GridLayout>

src/pages/about.mdx

@@ -1,6 +1,7 @@
 ---
-layout: ../layouts/PageLayout.astro
+layout: ../layouts/AboutLayout.astro
 title: About
+description: I’m Stefan Imhoff, a Front-End Web Developer, and Designer from Hamburg, Germany.
 ---
 
 import { mapping } from "../mdx-components.ts";