From e29688fe4e07d4e5b13233c8cc1f2d87f56df7a1 Mon Sep 17 00:00:00 2001
From: plx <plxgithub@gmail.com>
Date: Sun, 15 Mar 2026 13:46:30 -0500
Subject: [PATCH] Add about page and navigation link

Add /about page with site description and social links.
Add "about" entry to the header navigation bar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/Header.astro | 11 ++++++++
 src/pages/about.astro       | 54 +++++++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 src/pages/about.astro

diff --git a/src/components/Header.astro b/src/components/Header.astro
index f59e6d0..8eaa7da 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -46,6 +46,17 @@ const currentPath = Astro.url?.pathname ?? "/";
               projects
             </Link>
           </li>
+          <li aria-hidden="true" class="text-black/40 dark:text-white/40">
+            /
+          </li>
+          <li>
+            <Link
+              href="/about"
+              aria-current={currentPath.startsWith("/about") ? "page" : undefined}
+            >
+              about
+            </Link>
+          </li>
         </ul>
       </nav>
     </div>
diff --git a/src/pages/about.astro b/src/pages/about.astro
new file mode 100644
index 0000000..ea755c6
--- /dev/null
+++ b/src/pages/about.astro
@@ -0,0 +1,54 @@
+---
+import PageLayout from "@layouts/PageLayout.astro";
+import Container from "@components/Container.astro";
+import Link from "@components/Link.astro";
+import { SITE, SOCIALS } from "@consts";
+import { getHomeOGData } from "@lib/opengraph";
+
+const ogData = getHomeOGData(
+  Astro.url.toString(),
+  Astro.site?.toString() || ""
+);
+---
+
+<PageLayout title="About" description="About Dispatches and its author" ogData={ogData}>
+  <Container>
+    <div class="space-y-10">
+      <h1 class="animate font-semibold text-black dark:text-white">
+        About
+      </h1>
+
+      <div class="space-y-4">
+        <section class="animate space-y-4">
+          <h2 class="font-semibold text-black dark:text-white">About Dispatches</h2>
+          <article class="prose dark:prose-invert">
+            <p>
+              <em>Dispatches</em> is where I publish technical writing on topics of personal interest.
+              During this initial phase, much of the content will be "refurbished-and-expanded": older
+              personal notes or explanations, updated and expanded where necessary.
+            </p>
+            <p>
+              Expect a focus on Swift, lower-level iOS work, and—as of late—agentic coding assistants.
+            </p>
+          </article>
+        </section>
+
+        <section class="animate space-y-4">
+          <h2 class="font-semibold text-black dark:text-white">Connect</h2>
+          <article>
+            <p class="mb-4">Feel free to reach out:</p>
+            <ul class="flex flex-wrap gap-2">
+              {SOCIALS.map(SOCIAL => (
+                <li class="flex gap-x-2 text-nowrap">
+                  <Link href={SOCIAL.HREF} external aria-label={`${SITE.NAME} on ${SOCIAL.NAME}`}>
+                    {SOCIAL.NAME}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </article>
+        </section>
+      </div>
+    </div>
+  </Container>
+</PageLayout>