From 84e6c24472a64b32b033771bad7f32fab7d217b8 Mon Sep 17 00:00:00 2001
From: Elias Almqvist <elalmqvist@gmail.com>
Date: Thu, 27 Feb 2025 23:05:04 -0800
Subject: [PATCH] cringe

---
 src/app/page.tsx                 | 142 ++++++++++++++++++-------------
 src/components/layout/header.tsx |  28 +++---
 2 files changed, 96 insertions(+), 74 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index c8d71a2..6d7c615 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,67 +1,87 @@
-import ThingCurve from "@/components/3d/curves/thing";
-import RenderedSection from "@/components/3d/renderedsection";
-import AgeHCyclesDisplay from "@/components/age";
 import ExternalNav from "@/components/externalnav";
-import fonts from "@/components/fonts";
 import ILink from "@/components/ilink";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { cn } from "@/lib/utils";
+import fs from 'fs/promises';
+import path from 'path';
+import matter from 'gray-matter';
+import Link from 'next/link';
+
+type PostMeta = {
+  title: string;
+  createdAt: string;
+  slug: string;
+};
+
+async function getRecentPosts(): Promise<PostMeta[]> {
+  const postsDirectory = path.join(process.cwd(), 'content/essays');
+  const files = await fs.readdir(postsDirectory);
+  
+  const posts = await Promise.all(
+    files
+      .filter(file => file.endsWith('.mdx'))
+      .map(async (file) => {
+        const fullPath = path.join(postsDirectory, file);
+        const fileContents = await fs.readFile(fullPath, 'utf8');
+        const { data } = matter(fileContents);
+        
+        return {
+          title: data.title,
+          createdAt: data.createdAt,
+          slug: file.replace(/\.mdx$/, ''),
+        };
+      })
+  );
+
+  return posts
+    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+    .slice(0, 2); // Get only the 2 most recent posts
+}
+
+export default async function Home() {
+  const recentPosts = await getRecentPosts();
 
-export default function Home() {
   return (
-    <div className="w-full h-full overflow-y-clip">
-      <RenderedSection
-        id="about"
-        curve={ThingCurve}
-        className="relative w-full h-full px-4 md:px-8 max-w-screen-2xl items-center flex"
-        curveClassname="w-[38rem] h-[52rem] xl:w-[58rem] xl:h-[82rem] absolute -top-16 xl:-top-48 -right-32 lg:-right-12 2xl:right-32 overflow-clip"
-      >
-        <Card className="max-w-screen-md">
-          <CardHeader>
-            <CardTitle>Elias Almqvist</CardTitle>
-            <CardDescription className="pl-0 space-y-4">
-              <span className="inline-block">
-                I am a{" "}
-                {
-                  <AgeHCyclesDisplay
-                    className={cn("font-bold", fonts.mono.className)}
-                    precision={12}
-                  />
-                }{" "}
-                <span className="font-bold">hydrogen-line-cycles</span>{" "}
-                <span className="text-xs text-foreground/40">(± 2 mHz)</span>{" "}
-                old <span className="font-bold">human-</span> founder, engineer,
-                and hacker with a passion for CS, physics, and mathematics.
-              </span>
-              <span className="inline-block">
-                CEO of{" "}
-                <ILink href="https://exalaboratories.com" target="_blank">
-                  Exa Laboratories (YC S24)
-                </ILink>
-                . Some of my projects are open-source (FOSS), and if you are
-                interested, you can find them on my{" "}
-                <ILink href="https://git.wych.dev/elal" target="_blank">
-                  self-hosted git-server
-                </ILink>{" "}
-                or{" "}
-                <ILink href="https://github.com/almqv" target="_blank">
-                  GitHub
-                </ILink>
-                .
-              </span>
-            </CardDescription>
-            <CardContent className="flex flex-col items-center justify-center pb-0 pt-4">
-              <ExternalNav className="w-full max-w-48 flex flex-row justify-between" />
-            </CardContent>
-          </CardHeader>
-        </Card>
-      </RenderedSection>
-    </div>
+    <main className="w-full flex justify-center px-4">
+      <div className="w-full max-w-prose py-8 space-y-8">
+        {/* Intro */}
+        <section>
+          <h1 className="text-2xl font-bold mb-4">Elias Almqvist</h1>
+          <p className="text-gray-600 dark:text-gray-300">
+            CEO of{" "}
+            <ILink href="https://exalaboratories.com" target="_blank">
+              Exa Laboratories (YC S24)
+            </ILink>
+            . Building energy-efficient chips for AI training & inference.
+          </p>
+        </section>
+
+        {/* Recent Essays */}
+        <section>
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-xl font-semibold">Recent Essays</h2>
+            <Link href="/essays" className="text-sm text-gray-500 hover:text-gray-700">
+              View all →
+            </Link>
+          </div>
+          <ul className="space-y-4">
+            {recentPosts.map((post) => (
+              <li key={post.slug}>
+                <Link 
+                  href={`/essays/${post.slug}`}
+                  className="block hover:bg-gray-50 dark:hover:bg-gray-800 p-4 rounded-lg transition"
+                >
+                  <h3 className="font-medium">{post.title}</h3>
+                  <time className="text-sm text-gray-500">
+                    {new Date(post.createdAt).toLocaleDateString()}
+                  </time>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        {/* External Links */}
+        <ExternalNav className="flex gap-4" />
+      </div>
+    </main>
   );
 }
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index dede854..2142a54 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -9,19 +9,21 @@ import ExternalNav from "../externalnav";
 
 const Header = () => (
   <header className="w-full h-14 flex flex-col justify-center items-center">
-    <div className="py-2 px-4 md:px-8 flex flex-row justify-between w-full max-w-screen-2xl">
-      <div className="flex flex-row items-center">
-        <Link
-          href="/"
-          className="flex flex-row items-center gap-x-2 hover:opacity-80 transition-opacity"
-        >
-          <h1 className="text-xl font-bold">collected sayings of an insane sane person</h1>
-        </Link>
-      </div>
-      <div className="flex flex-row items-center space-x-8">
-        {/* <ThemeButton className="w-4 h-4 hidden sm:block" /> */}
-        <ExternalNav className="hidden sm:flex flex-row space-x-1" />
-        <NavCommand />
+    <div className="py-2 px-4 w-full max-w-prose mx-auto">
+      <div className="flex flex-row justify-between items-center">
+        <div className="flex flex-row items-center">
+          <Link
+            href="/"
+            className="flex flex-row items-center gap-x-2 hover:opacity-80 transition-opacity"
+          >
+            <h1 className="text-xl font-bold">collected sayings of an insane sane person</h1>
+          </Link>
+        </div>
+        <div className="flex flex-row items-center space-x-8">
+          {/* <ThemeButton className="w-4 h-4 hidden sm:block" /> */}
+          <ExternalNav className="hidden sm:flex flex-row space-x-1" />
+          <NavCommand />
+        </div>
       </div>
     </div>
     {/* <Separator /> */}