polish

src/pages/about.astro

@@ -1,7 +1,8 @@
 ---
-import ArticleList from '../components/ArticleList.astro';
+import EntryThumbnail from '../components/EntryThumbnail.astro';
 import Page from '../layouts/Page.astro';
 import {
+  articlePath,
   absoluteUrl,
   buildPersonJsonLd,
   getPublishedPosts,
@@ -29,9 +30,15 @@ const STARTING_POINT_NOTES: Record<string, string> = {
 
 const startingPointsAnnotated = startingPoints.map((post) => ({
   post,
+  href: articlePath(post),
   note: STARTING_POINT_NOTES[post.id.replace(/\.mdx?$/, '')],
 }));
 
+const startingPointThumbnail = {
+  widths: [120, 180, 240, 320],
+  sizes: '(max-width: 700px) 4rem, (max-width: 960px) 28vw, 10rem',
+};
+
 const personImage = await optimizeOgImage(defaultOg);
 
 // Canonical Person JSON-LD. Other pages reference this entity by @id.
@@ -63,7 +70,7 @@ const personJsonLd = buildPersonJsonLd({
       I'm Andras. I write software for a living, and have done so for about six years. MSc
       in CS. The first non-trivial thing I finished was a Raspberry Pi music visualiser
       driving LED strips through MOSFETs in 2016, and I've been chasing that same feeling
-      — pick something I can't yet do, finish it — ever since.
+      ever since: pick something I can't yet do, then finish it.
     </p>
     <p>
       Two patterns show up in almost everything here. First, the hard constraint usually
@@ -79,12 +86,12 @@ const personJsonLd = buildPersonJsonLd({
     <dl>
       <div>
         <dt>Lives in</dt>
-        <dd>Code. Also Europe.</dd>
+        <dd>Europe.</dd>
       </div>
       <div>
         <dt>Studied</dt>
         <dd>
-          MSc Computer Science. BSc thesis on SDF-2D, MSc thesis on GreatAI — both have
+          MSc Computer Science. BSc thesis on SDF-2D, MSc thesis on GreatAI; both have
           writeups below.
         </dd>
       </div>
@@ -113,24 +120,32 @@ const personJsonLd = buildPersonJsonLd({
 
   <section class="about-section">
     <div class="section-heading">
-      <h2 id="best-starting-points">Five posts that show the two moves</h2>
+      <h2 id="why-these-five">Why these five</h2>
       <a href="/articles/">All articles <span aria-hidden="true">→</span></a>
     </div>
-    <ArticleList posts={startingPoints} />
-    <div class="prose starting-point-notes">
-      <p><strong>Why these five:</strong></p>
-      <ul>
-        {
-          startingPointsAnnotated.map(({ post, note }) =>
-            note ? (
-              <li>
-                <strong>{post.data.title}</strong> — {note}
-              </li>
-            ) : null
-          )
-        }
-      </ul>
-    </div>
+    <ol class="starting-points" aria-label="Starting point articles">
+      {
+        startingPointsAnnotated.map(({ post, href, note }) => (
+          <li>
+            <EntryThumbnail
+              src={post.data.thumbnail.src}
+              alt={post.data.thumbnail.alt}
+              href={href}
+              class="starting-point__thumbnail"
+              widths={startingPointThumbnail.widths}
+              sizes={startingPointThumbnail.sizes}
+              ariaLabel={`Open article: ${post.data.title}`}
+            />
+            <div class="starting-point__body">
+              <h3>
+                <a href={href}>{post.data.title}</a>
+              </h3>
+              {note && <p>{note}</p>}
+            </div>
+          </li>
+        ))
+      }
+    </ol>
   </section>
 
   <section class="about-section facts">

src/pages/articles/index.astro

@@ -29,7 +29,7 @@ const personId = absoluteUrl('/about/#person');
 const blogJsonLd = {
   '@context': 'https://schema.org',
   '@type': 'Blog',
-  name: `${site.name} — Articles`,
+  name: `${site.name}: Articles`,
   url: absoluteUrl('/articles/'),
   description,
   publisher: { '@id': personId },
@@ -65,7 +65,8 @@ const jsonLd = [blogJsonLd, breadcrumbJsonLd];
           <ArticleList
             posts={postsForYear}
             showYear={false}
-            eagerFirstThumbnail={year === years[0]}
+            timeline
+            eagerThumbnailCount={year === years[0] ? 3 : 0}
           />
         </section>
       );

src/pages/index.astro

@@ -26,8 +26,8 @@ const personJsonLd = buildPersonJsonLd();
   <section class="home-intro">
     <p class="eyebrow">A notebook, written after the fact</p>
     <h1>
-      Andras Schmelczer — writing up the projects, the trades I made inside them, and the
-      ones I'd make differently now.
+      <span class="home-intro-name">Andras Schmelczer</span> writes about projects, the tradeoffs
+      behind them, and what hindsight changed.
     </h1>
     <p>
       Most of these started because I couldn't yet do the thing. An 8-bit ALU, a mobile
@@ -46,7 +46,7 @@ const personJsonLd = buildPersonJsonLd();
         <span aria-hidden="true">→</span></a
       >
     </div>
-    <ArticleList posts={latestPosts} />
+    <ArticleList posts={latestPosts} timeline eagerThumbnailCount={2} />
   </section>
 
   <section class="home-section">

src/pages/projects/index.astro

@@ -19,7 +19,7 @@ const older = projects.filter((project) => !project.data.selected);
 const collectionJsonLd = {
   '@context': 'https://schema.org',
   '@type': 'CollectionPage',
-  name: `${site.name} — Projects`,
+  name: `${site.name}: Projects`,
   url: absoluteUrl('/projects/'),
   description,
 };
@@ -32,7 +32,7 @@ const jsonLd = [collectionJsonLd, breadcrumbJsonLd];
 <Page title="Projects" description={description} jsonLd={jsonLd}>
   <section class="project-section">
     <h2 id="selected-projects">Selected Projects</h2>
-    <ProjectList projects={selected} eagerFirstThumbnail />
+    <ProjectList projects={selected} eagerThumbnailCount={6} />
   </section>
 
   <section class="project-section">

src/pages/tags/[tag].astro

@@ -45,5 +45,5 @@ const breadcrumbJsonLd = buildBreadcrumbJsonLd(trail);
   </nav>
 
   <h2 class="sr-only">Articles</h2>
-  <ArticleList posts={filteredPosts} eagerFirstThumbnail />
+  <ArticleList posts={filteredPosts} eagerThumbnailCount={3} />
 </Page>

src/pages/tags/index.astro

@@ -25,7 +25,7 @@ for (const post of posts) {
 const collectionJsonLd = {
   '@context': 'https://schema.org',
   '@type': 'CollectionPage',
-  name: `${site.name} — Tags`,
+  name: `${site.name}: Tags`,
   url: absoluteUrl('/tags/'),
   description,
 };