add about page and update blog layout

src/components/Header.astro

@@ -37,6 +37,8 @@ const fixedPath = currentPath.replace(/^\/|\/$/g, "");
       <b class="no-underline">Andrew Moses</b>
     </a>
     <a class={`nav ${fixedPath === "blog" ? "bold" : ""}`} href="/blog">Blog</a>
+    <a class={`nav ${fixedPath === "about" ? "bold" : ""}`} href="/about">About</a>
+
   </div>
   <div class="icons">
     <a

src/pages/about.astro

@@ -0,0 +1,45 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+---
+
+<BaseLayout
+  imgLink=""
+  title="About - Andrew Moses"
+  subtitle="Who am I? What do I do? Why do I do it?"
+>
+  <div
+    style="margin-top: 20px; display: flex; justify-content: center; gap: 10px; max-width: 100%; flex-wrap: wrap; margin-bottom"
+  >
+    <img
+      src="/andrew-full-lean.jpg"
+      alt="A channel in the UPL Discord reads '8 people in UPL'."
+      style="max-width: 450px; width: auto;"
+    />
+  </div>
+
+  <i
+    style="display: flex; justify-content: center; margin-top: 10px; font-size: 0.95em;"
+  >
+    A picture of me at <a
+      href="https://madhacks.io"
+      style="padding-left: 4px;"
+      target="_blank">MadHacks</a
+    >!
+  </i>
+
+  <p>Hi! I'm Andrew. (TODO)</p>
+</BaseLayout>
+
+<style>
+  img,
+  video {
+    border: 1px solid #cfbe9b;
+    padding: 5px;
+    transition: border 0.2s;
+  }
+
+  img:hover,
+  video:hover {
+    border: 1px solid #f1e9d8;
+  }
+</style>

src/pages/blog.astro

@@ -6,11 +6,9 @@ function groupPostsByYearAndMonth(posts) {
   const grouped = {};
 
   posts.forEach((post) => {
-    const date = new Date(post.frontmatter.pubDate);
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const [year, month] = post.frontmatter.pubDate.split("-").map(Number);
 
-    const key = `${year}-${month}`;
+    const key = `${year}-${String(month).padStart(2, "0")}`;
     if (!grouped[key]) {
       grouped[key] = [];
     }
@@ -22,18 +20,30 @@ function groupPostsByYearAndMonth(posts) {
 
 const groupedPosts = groupPostsByYearAndMonth(allPosts);
 
-const sortedKeys = Object.keys(groupedPosts).sort(
-  (a, b) => new Date(b + "-01") - new Date(a + "-01")
-);
+const sortedKeys = Object.keys(groupedPosts).sort((a, b) => b.localeCompare(a));
+
+const monthNames = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
 ---
 
-<BaseLayout title="Blog Posts">
+<BaseLayout title="Blog Posts - Andrew Moses">
   <ul class="post-list">
     {
       sortedKeys.map((key) => {
-        const date = new Date(key + "-01");
-        const monthName = date.toLocaleString("default", { month: "long" });
-        const year = date.getFullYear();
+        const [year, month] = key.split("-");
+        const monthName = monthNames[parseInt(month, 10) - 1];
 
         return (
           <li key={key}>