Fix broken links in projects page

data/pages/about.html

@@ -8,10 +8,6 @@
       a living world
     </li>
     <li>building Pantalaimon, an AI agent system (coming soon)</li>
-    <li>
-      finishing up a little
-      <a href="https://gomoku.sepiatones.xyz">gomoku!</a> webapp
-    </li>
   </ul>
   <h3>Dormant Interests/Projects</h3>
   <ul>

data/pages/projects.html

@@ -0,0 +1,21 @@
+<article>
+  <h2>Projects</h2>
+  <ul>
+    <li>
+      <a href="https://gomoku.sepiatones.xyz">Gomoku!</a> - a simple multiplayer
+      implementation of the game Gomoku
+    </li>
+    <li>
+      <a href="https://civ.plus">Civ+</a> - a sandbox MMORPG where players build
+      nations
+    </li>
+    <li>
+      <a href="https://sepiatones.xyz">sepiatones.xyz</a>
+      - the website you're on
+    </li>
+    <li>
+      <a href="https://git.sepiatones.xyz/sepia/pantalaimon">Pantalaimon</a> -
+      an AI coding agent
+    </li>
+  </ul>
+</article>

data/style/style.css

@@ -27,6 +27,8 @@ a:visited {
 
 aside {
   background-color: var(--background-overlay);
+  max-width: 30%;
+  padding: var(--line-height) 1ch;
 }
 
 aside:empty {

src/index.tsx

@@ -35,6 +35,20 @@ const app = new Elysia()
       return "Internal server error";
     }
   })
+  .get("/projects", async ({ set }) => {
+    try {
+      const content = await fs.readFile(
+        path.join(process.cwd(), "data/pages/projects.html"),
+        "utf8",
+      );
+      return renderTemplate("index.html", { content });
+    } catch (error) {
+      console.error("Error serving main page: ", error);
+      set.status = 500;
+      set.headers["Content-Type"] = "text/plain";
+      return "Internal server error";
+    }
+  })
   .get("/posts/:post_name", async ({ params, set }) => {
     try {
       const filePath = path.join(

templates/index.html.hbs

@@ -13,6 +13,7 @@
       <h1>sepiatones.xyz</h1>
       <nav>
         <a href="/">about</a>
+        <a href="/projects">projects</a>
         <a href="https://git.sepiatones.xyz/sepia">code</a>
         <a
           hx-get="/recent_posts"
@@ -23,10 +24,7 @@
     </header>
     <main id="primary" style="display: flex; justify-content: space-between;">
       {{{content}}}
-      <aside
-        id="sidebar"
-        style="width: 60ch; padding: var(--line-height) 1ch;"
-      ></aside>
+      <aside id="sidebar"></aside>
     </main>
   </body>
 </html>