From be294156c59fee0d5df6500644baae0517ee5100 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 26 Nov 2025 17:34:33 +0000
Subject: [PATCH] Redesign homepage with cleaner, text-focused layout

Inspired by Brian Lovin's design philosophy, this update creates a more modern, app-like experience:

- Remove hero image for a cleaner, text-first approach
- Restructure homepage content with clear sections (Work, Background, Connect)
- Improve typography with better font sizes, weights, and line heights
- Update color scheme to use slate grays for better readability
- Refine navigation with cleaner styling and better spacing
- Modernize footer with subtle border and improved icon styling
- Add smooth transitions and hover states throughout
- Reduce visual noise with minimal border treatment (thin top border instead of thick full border)
- Improve spacing and padding for better content flow
---
 src/components/Footer.astro  | 18 +++++++--------
 src/components/Navbar.astro  | 30 ++++++++++++++++++------
 src/layouts/BaseLayout.astro | 45 ++++++++++++++++++++++++++++++------
 src/pages/index.mdx          | 25 +++++++++++---------
 4 files changed, 84 insertions(+), 34 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index e7af282..fc2d6dd 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -5,25 +5,25 @@ import LinkedIn from "./icons/LinkedIn.astro";
 import GitHub from "./icons/GitHub.astro";
 import RSS from "./icons/RSS.astro";
 
-const iconClass = "h-8 w-8 hover:text-slate-50 hover:fill-current";
+const iconClass = "h-6 w-6 text-slate-400 transition-colors hover:text-blue-500";
 ---
 
-<div
-  class="footer flex h-20 w-full flex-row items-center justify-center gap-8 bg-blue-300"
+<footer
+  class="mt-16 flex w-full flex-row items-center justify-center gap-6 border-t border-slate-200 py-8"
 >
-  <a href="https://www.twitter.com/rambleraptor">
+  <a href="https://www.twitter.com/rambleraptor" aria-label="Twitter">
     <Twitter className={iconClass} />
   </a>
-  <a href="https://www.github.com/rambleraptor">
+  <a href="https://www.github.com/rambleraptor" aria-label="GitHub">
     <GitHub className={iconClass} />
   </a>
-  <a href="https://www.letterboxd.com/rambleraptor">
+  <a href="https://www.letterboxd.com/rambleraptor" aria-label="Letterboxd">
     <Letterboxd className={iconClass} />
   </a>
-  <a href="https://www.linkedin.com/in/rambleraptor">
+  <a href="https://www.linkedin.com/in/rambleraptor" aria-label="LinkedIn">
     <LinkedIn className={iconClass} />
   </a>
-  <a href="/feed.xml">
+  <a href="/feed.xml" aria-label="RSS Feed">
     <RSS className={iconClass} />
   </a>
-</div>
+</footer>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index e98a912..3de34e9 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -3,23 +3,39 @@
 ---
 
 <nav
-  class="container relative mx-auto flex flex-wrap justify-between justify-between gap-4 p-3 pt-6 md:p-6"
+  class="container relative mx-auto flex max-w-3xl flex-wrap items-center justify-between gap-4 px-6 py-8 md:px-8"
 >
-  <a class="text-2xl font-extrabold capitalize" href="/">Alex Stephen</a>
+  <a class="text-xl font-bold text-slate-900 hover:text-blue-500" href="/"
+    >Alex Stephen</a
+  >
 
-  <ul class="relative flex w-auto flex-row items-center gap-6 p-0">
+  <ul class="relative flex w-auto flex-row items-center gap-8 p-0">
     <li>
-      <a class="mr-2" href="/writing">Writing</a>
+      <a
+        class="text-slate-600 transition-colors hover:text-slate-900"
+        href="/writing">Writing</a
+      >
     </li>
     <li>
-      <a class="mr-2" href="/talks">Talks</a>
+      <a
+        class="text-slate-600 transition-colors hover:text-slate-900"
+        href="/talks">Talks</a
+      >
     </li>
   </ul>
 </nav>
 
 <style>
-  nav a:link {
+  nav a {
     text-decoration: none;
-    font-weight: 300;
+    font-weight: 500;
+  }
+
+  nav ul {
+    list-style: none;
+  }
+
+  nav li {
+    margin: 0;
   }
 </style>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 7fe0fb2..0cd57ae 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -30,17 +30,48 @@ if (frontmatter != null) {
 <!doctype html>
 <html lang="en">
   <Head title={realTitle} description={realDescription} />
-  <body>
-    <div class="border-8 border-solid border-blue-500"></div>
+  <body class="bg-white">
+    <div class="border-t-4 border-solid border-blue-500"></div>
     <Navbar />
-    <div class="container prose prose-lg mx-auto pb-10 pl-3 pr-3">
-      <div><slot /></div>
+    <div class="container mx-auto max-w-3xl px-6 py-12 md:px-8 md:py-16">
+      <div class="prose prose-lg prose-slate max-w-none">
+        <slot />
+      </div>
     </div>
     <Footer />
     <style>
-      /* Tailwind is really hard to use, so I have to do this. */
-      .hero-image {
-        margin-top: 0 !important;
+      .prose h1 {
+        font-size: 2.5rem;
+        font-weight: 700;
+        line-height: 1.2;
+        margin-bottom: 1rem;
+        color: #0f172a;
+      }
+
+      .prose h2 {
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin-top: 2.5rem;
+        margin-bottom: 1rem;
+        color: #1e293b;
+      }
+
+      .prose p {
+        font-size: 1.125rem;
+        line-height: 1.75;
+        margin-bottom: 1.5rem;
+        color: #475569;
+      }
+
+      .prose a {
+        color: #3b82f6;
+        text-decoration: none;
+        font-weight: 500;
+      }
+
+      .prose a:hover {
+        color: #2563eb;
+        text-decoration: underline;
       }
 
       .list {
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index dde5457..5445244 100644
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -4,21 +4,24 @@ title: Alex Stephen
 description: About Alex Stephen
 ---
 
-import { Image } from "astro:assets";
-import meImage from "../images/me.jpg";
+# Alex Stephen
 
-<Image src={meImage} class="img-fluid hero-image" alt="Image of me" />
+I'm a software engineer building data systems and tools.
 
-# Hi! I'm Alex!
+Currently working on [BigQuery](https://cloud.google.com/bigquery) at Google in Seattle.
 
-I'm a software engineer and all-around millennial from the Mitten, currently in Seattle.
+## Work
 
-Right now, I'm working at [Google](https://www.google.com) working on BigQuery!
+I'm currently at **Google** working on BigQuery, helping build one of the world's largest data warehouses.
 
-Before that, I was building declarative tools and code generators over at
-[Google](https://www.google.com), data pipelines at
-[Palantir](https://www.palantir.com) and Insurance software at [Rippling](https://www.rippling.com).
+Previously, I built declarative tools and code generators at Google, designed data pipelines at Palantir, and worked on insurance software at Rippling.
 
-Before Palantir, I was at the [University of Michigan](https://www.umich.edu) (Go Blue!).
+## Background
 
-You can find me spewing nonsense over on the bird app [@rambleraptor](https://www.twitter.com/rambleraptor) and over on [GitHub](https://www.github.com/rambleraptor). Or you can always [email me](mailto:astephen2@gmail.com).
+I studied at the University of Michigan (Go Blue!) before moving to the Bay Area and eventually Seattle.
+
+I write about pop culture, technology, and business through the lens of data and storytelling.
+
+## Connect
+
+Find me on [Twitter](https://www.twitter.com/rambleraptor), [GitHub](https://www.github.com/rambleraptor), or [email me](mailto:astephen2@gmail.com).