From d30c488c3f98ed38aae1f5045bda0818cfd665df Mon Sep 17 00:00:00 2001
From: Tobias Leinss <7684178+leinss@users.noreply.github.com>
Date: Wed, 26 Aug 2026 16:21:34 +0200
Subject: [PATCH 1/2] design: give work and education entries a hierarchy
 instead of one flat rhythm

The work section read as a wall of text, and the cause was a single rule:
`.entry-body > * + *` gave every block an identical 8px gap. Four paragraphs of
prose with four bold words between them, all the same weight and spacing, so
nothing separated anything and the eye had no place to rest.

- Section labels inside an entry are written as `**label**` alone on a line,
  which markdown renders as a paragraph containing only a bold run. Those are
  now styled as signposts: small, uppercase, letter-spaced, muted, with a lot
  of space above and almost none below, so each binds to the paragraph it
  introduces rather than floating between two.
- The label no longer inherits the general `strong` rule, which had made it the
  highest-contrast thing in the entry and pulled the eye to the signpost rather
  than the content.
- Body copy gets `leading-relaxed` and a 68ch measure. At the 840px container
  these paragraphs ran to roughly 95 characters, well past what the eye tracks
  comfortably, which was the other half of the problem.
- Date, company and role are set tight as one header unit with a deliberate gap
  before the body. Previously all four shared one rhythm, so an entry had no
  header.
- Entries are separated by a rule, not just space. With space alone the
  boundary between two jobs looked identical to the boundary between two
  paragraphs of one job, so eight years read as a single column.
- Education gets the same treatment, since it shares `entry-body`.

Also drops the emoji used as icons: next to the page headings on /work,
/projects and /education, in the "See all X" links, and at the start of the
four homepage section headings. An emoji there renders at a different size,
weight and baseline than the text beside it, and it was inconsistent with the
headings that had none. The "See all X" links get a trailing arrow instead,
which inherits colour and weight. The hero's wave stays: it sits inline in a
sentence and reads as voice, not as an icon.

Test plan:
- [x] `pnpm run lint` and `pnpm run build` pass, 82 pages
- [x] internal link check passes, none broken
- [x] /work and the homepage rendered in a browser in dark mode and read at
      three scroll positions, not judged from the markup
---
 src/pages/education/index.astro | 15 +++++++------
 src/pages/index.astro           | 32 +++++++++++++--------------
 src/pages/projects/index.astro  |  2 +-
 src/pages/work/index.astro      | 19 +++++++++++------
 src/styles/global.css           | 38 ++++++++++++++++++++++++++++++++-
 5 files changed, 76 insertions(+), 30 deletions(-)

diff --git a/src/pages/education/index.astro b/src/pages/education/index.astro
index 611e4c556..5cb7a2200 100644
--- a/src/pages/education/index.astro
+++ b/src/pages/education/index.astro
@@ -22,21 +22,24 @@ const education = await Promise.all(
   <Container>
     <div class="space-y-10">
       <h1 class="animate font-semibold text-black dark:text-white">
-        🎓 Education
+        Education
       </h1>
-      <ul class="flex flex-col space-y-8">
+      {/* Same treatment as /work: education entries share `entry-body`, so
+          leaving them on the old rhythm would have made the two pages diverge
+          for no reason. */}
+      <ul class="flex flex-col divide-y divide-black/10 dark:divide-white/10">
         {
           education.map((entry) => (
-            <li class="animate">
-              <div class="text-sm opacity-75">
+            <li class="animate py-9 first:pt-0 last:pb-0">
+              <div class="text-xs uppercase tracking-wider opacity-60">
                 {dateRange(entry.data.dateStart, entry.data.dateEnd)}
               </div>
-              <div class="font-semibold text-black dark:text-white">
+              <div class="mt-1.5 font-semibold text-black dark:text-white">
                 {entry.data.place}
               </div>
               <div class="text-sm opacity-75">{entry.data.role}</div>
               {entry.body?.trim() && (
-                <div class="entry-body mt-2">
+                <div class="entry-body mt-5">
                   <entry.Content />
                 </div>
               )}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2e8389c2a..a79922b30 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -73,9 +73,9 @@ const education = await Promise.all(
       <section class="animate space-y-6">
         <div class="flex flex-wrap gap-y-2 items-center justify-between">
           <h2 class="font-semibold text-xl text-black dark:text-white">
-            📱 Apps I've built
+            Apps I've built
           </h2>
-          <Link href="/projects">⭐ See all projects</Link>
+          <Link href="/projects">See all projects →</Link>
         </div>
         <ul class="animate-stagger grid grid-cols-1 sm:grid-cols-2 gap-4">
           {
@@ -105,7 +105,7 @@ const education = await Promise.all(
 
       <section class="animate space-y-4">
         <h2 class="font-semibold text-xl text-black dark:text-white">
-          👋 A little about me
+          A little about me
         </h2>
         <Image
           class="animate rounded-md"
@@ -132,7 +132,7 @@ const education = await Promise.all(
 
       <section class="animate space-y-4">
         <h2 class="font-semibold text-xl text-black dark:text-white">
-          🤖 AI consulting
+          AI consulting
         </h2>
         <p>
           The apps above are proof I can take an idea and ship it end to end. If
@@ -158,7 +158,7 @@ const education = await Promise.all(
           <h2 class="font-semibold text-xl text-black dark:text-white">
             Recent projects
           </h2>
-          <Link href="/projects">⭐ See all projects</Link>
+          <Link href="/projects">See all projects →</Link>
         </div>
         <ul class="animate-stagger flex flex-col gap-4">
           {
@@ -176,20 +176,20 @@ const education = await Promise.all(
           <h2 class="font-semibold text-xl text-black dark:text-white">
             Work Experience
           </h2>
-          <Link href="/work">🏢 See all work</Link>
+          <Link href="/work">See all work →</Link>
         </div>
-        <ul class="animate-stagger flex flex-col space-y-8">
+        <ul class="animate-stagger flex flex-col divide-y divide-black/10 dark:divide-white/10">
           {
             work.map((entry) => (
-              <li>
-                <div class="text-sm opacity-75">
+              <li class="py-9 first:pt-0 last:pb-0">
+                <div class="text-xs uppercase tracking-wider opacity-60">
                   {dateRange(entry.data.dateStart, entry.data.dateEnd)}
                 </div>
-                <div class="font-semibold text-black dark:text-white">
+                <div class="mt-1.5 font-semibold text-black dark:text-white">
                   {entry.data.company}
                 </div>
                 <div class="text-sm opacity-75">{entry.data.role}</div>
-                <div class="entry-body mt-2">
+                <div class="entry-body mt-5">
                   <entry.Content />
                 </div>
               </li>
@@ -203,16 +203,16 @@ const education = await Promise.all(
           <h2 class="font-semibold text-xl text-black dark:text-white">
             Education
           </h2>
-          <Link href="/education">🎓 See all education</Link>
+          <Link href="/education">See all education →</Link>
         </div>
-        <ul class="animate-stagger flex flex-col space-y-4">
+        <ul class="animate-stagger flex flex-col space-y-5">
           {
             education.map((entry) => (
               <li>
-                <div class="text-sm opacity-75">
+                <div class="text-xs uppercase tracking-wider opacity-60">
                   {dateRange(entry.data.dateStart, entry.data.dateEnd)}
                 </div>
-                <div class="font-semibold text-black dark:text-white">
+                <div class="mt-1.5 font-semibold text-black dark:text-white">
                   {entry.data.place}
                 </div>
                 <div class="text-sm opacity-75">{entry.data.role}</div>
@@ -224,7 +224,7 @@ const education = await Promise.all(
 
       <section class="animate space-y-4">
         <h2 class="font-semibold text-xl text-black dark:text-white">
-          🤝 Let's connect
+          Let's connect
         </h2>
         <p>
           Questions about an app, an invite to a beta, or a consulting project?
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
index 7d2351b69..ce1b0cb6e 100644
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@@ -18,7 +18,7 @@ const hackathons = all.filter((project) => HACKATHON_SLUGS.includes(project.id))
     <div class="space-y-10">
       <section class="space-y-4">
         <h1 class="animate font-semibold text-black dark:text-white">
-          ⭐️ Projects
+          Projects
         </h1>
         <ul class="animate flex flex-col gap-4">
           {
diff --git a/src/pages/work/index.astro b/src/pages/work/index.astro
index ea9b91b6e..868835a49 100644
--- a/src/pages/work/index.astro
+++ b/src/pages/work/index.astro
@@ -22,20 +22,27 @@ const work = await Promise.all(
   <Container>
     <div class="space-y-10">
       <h1 class="animate font-semibold text-black dark:text-white">
-        🏢 Work
+        Work
       </h1>
-      <ul class="flex flex-col space-y-8">
+      {/* A rule between entries, not just a gap. With space alone and every
+          block inside an entry sharing one rhythm, the boundary between two
+          jobs looked the same as the boundary between two paragraphs of one
+          job, so eight years read as a single column of text. */}
+      <ul class="flex flex-col divide-y divide-black/10 dark:divide-white/10">
         {
           work.map((entry) => (
-            <li class="animate">
-              <div class="text-sm opacity-75">
+            <li class="animate py-9 first:pt-0 last:pb-0">
+              {/* Date, company and role are one unit and are set tight, then a
+                  deliberate gap before the body. Previously all three and the
+                  body shared the same spacing, so the entry had no header. */}
+              <div class="text-xs uppercase tracking-wider opacity-60">
                 {dateRange(entry.data.dateStart, entry.data.dateEnd)}
               </div>
-              <h2 class="font-semibold text-black dark:text-white">
+              <h2 class="mt-1.5 font-semibold text-black dark:text-white">
                 {entry.data.company}
               </h2>
               <div class="text-sm opacity-75">{entry.data.role}</div>
-              <div class="entry-body mt-2">
+              <div class="entry-body mt-5">
                 <entry.Content />
               </div>
             </li>
diff --git a/src/styles/global.css b/src/styles/global.css
index 36b68af7d..c3139a879 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -115,16 +115,52 @@ html.dark article.longform {
      company and role around it rather than the long-form serif style. */
   .entry-body {
     @apply text-sm;
+    /* A measure, not the full container. At the 840px container width these
+       paragraphs ran to roughly 95 characters, well past the 60-75 the eye
+       tracks comfortably, which is half of why the section read as a wall. */
+    @apply max-w-[68ch];
   }
 
   .entry-body > * + * {
-    @apply mt-2;
+    @apply mt-3;
+  }
+
+  .entry-body p {
+    @apply leading-relaxed;
   }
 
   .entry-body strong {
     @apply font-semibold text-black dark:text-white;
   }
 
+  /* The section labels. In these entries a subheading is written as `**label**`
+     alone on a line, because a real heading here would collide with the page's
+     h1/h2 order. Markdown renders that as a paragraph containing nothing but a
+     bold run, which is exactly what this matches.
+
+     Before this, every block in the entry carried the same 8px gap and the same
+     weight, so the labels did not separate anything: four paragraphs of prose
+     with four bold words between them read as one undifferentiated wall. The
+     fix is asymmetric spacing, a lot above and very little below, so each label
+     binds to the paragraph it introduces instead of floating between two. */
+  .entry-body p:has(> strong:only-child) {
+    @apply mt-7 mb-1 text-xs uppercase tracking-[0.14em];
+    @apply text-black/55 dark:text-white/45;
+  }
+
+  /* Overrides the general `strong` rule above, which would otherwise make the
+     label the highest-contrast thing in the entry and pull the eye to the
+     signpost rather than the content. */
+  .entry-body p:has(> strong:only-child) strong {
+    @apply font-medium text-black/55 dark:text-white/45;
+  }
+
+  /* The first label in an entry follows the intro paragraph and link, so it
+     does not need the full separation that the ones between prose blocks do. */
+  .entry-body > p:has(> strong:only-child):first-child {
+    @apply mt-0;
+  }
+
   .entry-body ul {
     @apply list-disc pl-5;
   }

From b3153cd7aa4c4f30d9ed6b5bbd39c9d1f91a8ac6 Mon Sep 17 00:00:00 2001
From: Tobias Leinss <7684178+leinss@users.noreply.github.com>
Date: Wed, 26 Aug 2026 16:22:23 +0200
Subject: [PATCH 2/2] content: say on /uses that several AI harnesses are in
 rotation, on purpose

The page named one harness, which reads as having settled on a tool. The
practice is the opposite: Claude Code day to day alongside OpenCode, Codex and
others, because they have different strengths and the field moves fast enough
that committing to one is a bad bet.

Adds a line to the intro making the same point about the list as a whole. The
breadth is the position, not an accident of not having specialised yet.

Test plan:
- [x] lint and build pass, 82 pages
- [x] internal link check passes
---
 src/content/staticPages/uses.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/content/staticPages/uses.md b/src/content/staticPages/uses.md
index c970abf9f..5d4a6827d 100644
--- a/src/content/staticPages/uses.md
+++ b/src/content/staticPages/uses.md
@@ -7,6 +7,8 @@ date: "2026-08-26"
 
 A snapshot of what I build with. Inspired by [uses.tech](https://uses.tech). The bias throughout is toward things that work offline, keep data local, and can be rebuilt from a file in a repository rather than a click in a dashboard.
 
+The list is deliberately broad. I would rather know four languages and the infrastructure under them than one language very well, and the same goes for tools: I keep several in rotation instead of settling on one, because a stack you cannot leave is a stack that eventually picks your problems for you.
+
 ## Hardware
 
 - **Apple Silicon Mac**: main development machine, and where I run local LLMs.
@@ -22,7 +24,7 @@ I live in the terminal, and most of the tooling is a replacement for something o
 - **direnv** for per-project environment, with secrets resolved from the macOS Keychain rather than sitting in a `.envrc`.
 - **chezmoi** for dotfiles, with **age** encrypting the parts that need it.
 - **fnm** for Node versions, a single `.node-version` keeping local and CI in sync.
-- **Claude Code** for day-to-day development.
+- **AI coding harnesses**, more than one on purpose: **Claude Code** day to day, alongside **OpenCode**, **Codex** and whatever else is worth a look. They have genuinely different strengths, the field moves fast enough that committing to one is a bad bet, and running several is the only way to tell which is actually better at a given job rather than which one you are used to.
 
 ## Web stack