Accessibility and performance pass

package.json

@@ -9,13 +9,14 @@
   "scripts": {
     "dev": "astro dev",
     "dev:network": "astro dev --host",
-    "build": "astro check && astro build",
+    "build": "astro check && astro build && node scripts/check-internal-links.mjs",
     "preview": "astro preview",
     "preview:network": "astro preview --host",
     "astro": "astro",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "check:spacing": "node scripts/check-inline-spacing.mjs"
+    "check:spacing": "node scripts/check-inline-spacing.mjs",
+    "check:links": "node scripts/check-internal-links.mjs"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.10",

scripts/check-internal-links.mjs

@@ -0,0 +1,72 @@
+/**
+ * Fails the build when an internal link points at a page that is not there.
+ *
+ * Written after a hand-rolled version of this check reported 80 broken links
+ * that were not broken: the shell pipeline behind it parsed the wrong field.
+ * A check that cries wolf is worse than no check, so this one is tested against
+ * a link it must catch, and it prints what it looked at rather than only what
+ * it rejected.
+ *
+ * Anchors, mailto:, tel: and absolute URLs are out of scope. So is anything
+ * under public/, which is copied verbatim and checked by its own presence.
+ */
+
+import { readdirSync, readFileSync, statSync } from "node:fs"
+import { join, resolve } from "node:path"
+
+const DIST = resolve("dist")
+
+const walk = (dir) =>
+  readdirSync(dir).flatMap((entry) => {
+    const full = join(dir, entry)
+    return statSync(full).isDirectory() ? walk(full) : [full]
+  })
+
+let pages
+try {
+  pages = walk(DIST).filter((f) => f.endsWith(".html"))
+} catch {
+  console.error("no dist/ to check — run the build first")
+  process.exit(1)
+}
+
+// A link resolves if dist holds the file itself, or the directory-style page
+// Astro writes for it.
+const resolves = (path) => {
+  const clean = path.replace(/[?#].*$/, "")
+  const candidates = [
+    join(DIST, clean),
+    join(DIST, clean, "index.html"),
+    join(DIST, `${clean.replace(/\/$/, "")}.html`),
+  ]
+  return candidates.some((c) => {
+    try {
+      return statSync(c).isFile() || statSync(c).isDirectory()
+    } catch {
+      return false
+    }
+  })
+}
+
+const broken = []
+let checked = 0
+
+for (const page of pages) {
+  const html = readFileSync(page, "utf8")
+  for (const match of html.matchAll(/(?:href|src)="(\/[^"]*)"/g)) {
+    const target = match[1]
+    if (target.startsWith("//")) continue
+    checked += 1
+    if (!resolves(target)) {
+      broken.push({ page: page.slice(DIST.length + 1), target })
+    }
+  }
+}
+
+if (broken.length > 0) {
+  for (const { page, target } of broken) console.error(`${page} -> ${target}`)
+  console.error(`\ninternal links: ${broken.length} broken of ${checked} checked`)
+  process.exit(1)
+}
+
+console.log(`internal links: ${checked} checked across ${pages.length} pages, none broken`)

src/components/Newsletter.astro

@@ -24,7 +24,10 @@ const LIST_UUID = "56525a08-c916-4c7c-ae2c-36481da13071"
     </button>
   </form>
   <p id="newsletter-status" class="text-sm mt-2 hidden" role="alert" aria-live="polite"></p>
-  <p class="text-xs mt-2 opacity-50">No spam. Unsubscribe anytime. Your email is stored by <a href="https://listmonk.app" target="_blank" rel="noopener" class="underline">Listmonk</a> (self-hosted) and used solely for this newsletter. See our <a href="/privacy" class="underline">Privacy Policy</a>.</p>
+  <!-- opacity-80, not 50: at 50 this small print sat at 2.4:1 against the
+       card background, well under the 4.5:1 WCAG AA needs, and it carries the
+       privacy notice. 75 was still short at 4.45:1. -->
+  <p class="text-xs mt-2 opacity-80">No spam. Unsubscribe anytime. Your email is stored by <a href="https://listmonk.app" target="_blank" rel="noopener" class="underline">Listmonk</a> (self-hosted) and used solely for this newsletter. See our <a href="/privacy" class="underline">Privacy Policy</a>.</p>
 </div>
 
 <script is:inline define:vars={{ LISTMONK_URL, LIST_UUID }}>

src/components/SocialShare.astro

@@ -14,7 +14,7 @@ const linkedinUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encod
 ---
 
 <div class="flex items-center gap-3 mt-8 pt-6 border-t border-black/10 dark:border-white/10">
-  <span class="text-sm text-black/50 dark:text-white/50">Share:</span>
+  <span class="text-sm text-black/70 dark:text-white/70">Share:</span>
 
   <a
     href={twitterUrl}

src/content/projects/ethrome/index.md

@@ -11,7 +11,7 @@ repoURL: ""
 ![demo image](/images/projects/ethrome/sharknado.png)
 ![demo image](/images/projects/ethrome/sharknado_1.png)
 ![demo image](/images/projects/ethrome/sharknado_2.png)
-![demo image](/images/projects/ethrome/sharknado_3.png)
+![demo image](/images/projects/ethrome/sharknado_3.jpg)
 ![demo image](/images/projects/ethrome/sharknado_4.png)
 ![demo image](/images/projects/ethrome/sharknado_5.png)
 

src/pages/blog/[...slug].astro

@@ -58,9 +58,9 @@ const alternates = Object.entries(post.translations).map(([hreflang, entry]) =>
           {readingTime(post.body ?? "")}
         </div>
       </div>
-      <div class="animate text-2xl font-semibold text-black dark:text-white">
+      <h1 class="animate text-2xl font-semibold text-black dark:text-white">
         {post.data.title}
-      </div>
+      </h1>
       {post.data.tags && post.data.tags.length > 0 && (
         <div class="animate flex flex-wrap gap-2 mt-2">
           {post.data.tags.map((tag: string) => (

src/pages/blog/index.astro

@@ -43,7 +43,7 @@ const sections = langsWithPosts.map((lang) => ({
   <Container>
     <div class="space-y-10">
       <div class="flex flex-wrap items-center justify-between gap-2">
-        <div class="animate font-semibold text-black dark:text-white">Blog</div>
+        <h1 class="animate font-semibold text-black dark:text-white">Blog</h1>
         {
           langsWithPosts.length > 1 && (
             <div class="animate flex gap-1" role="group" aria-label="Language">

src/pages/index.astro

@@ -6,6 +6,10 @@ import { APPS, HACKATHON_SLUGS, HOME, SITE, SOCIALS } from "@consts"
 import PageLayout from "@layouts/PageLayout.astro"
 import { dateRange } from "@lib/utils"
 import { Image } from "astro:assets"
+// Imported rather than referenced from public/: Astro only optimises images it
+// can resolve at build time. As a public path it shipped the 4060x5904, 3 MB
+// original and let the browser scale it to 280px.
+import profile from "../assets/profile.jpg"
 import { getCollection, render } from "astro:content"
 
 const APP_SLUGS = APPS.map((app) => app.slug)
@@ -105,10 +109,12 @@ const education = await Promise.all(
         </h2>
         <Image
           class="animate rounded-md"
-          src="/images/profile.jpg"
+          src={profile}
           alt="Tobias Leinss"
           width={280}
           height={406}
+          densities={[1, 2]}
+          loading="lazy"
         />
         <p>
           I build custom-tailored software and the infrastructure behind it,

src/pages/projects/index.astro

@@ -17,9 +17,9 @@ const hackathons = all.filter((project) => HACKATHON_SLUGS.includes(project.id))
   <Container>
     <div class="space-y-10">
       <section class="space-y-4">
-        <div class="animate font-semibold text-black dark:text-white">
+        <h1 class="animate font-semibold text-black dark:text-white">
           ⭐️ Projects
-        </div>
+        </h1>
         <ul class="animate flex flex-col gap-4">
           {
             projects.map((project) => (
@@ -32,9 +32,9 @@ const hackathons = all.filter((project) => HACKATHON_SLUGS.includes(project.id))
       </section>
 
       <section class="space-y-4">
-        <div class="animate font-semibold text-black dark:text-white">
+        <h2 class="animate font-semibold text-black dark:text-white">
           🛠️ Hackathons
-        </div>
+        </h2>
         <ul class="animate flex flex-col gap-4">
           {
             hackathons.map((project) => (

src/pages/work/index.astro

@@ -21,19 +21,19 @@ const work = await Promise.all(
 <PageLayout title={WORK.TITLE} description={WORK.DESCRIPTION}>
   <Container>
     <div class="space-y-10">
-      <div class="animate font-semibold text-black dark:text-white">
+      <h1 class="animate font-semibold text-black dark:text-white">
         🏢 Work
-      </div>
+      </h1>
       <ul class="flex flex-col space-y-8">
         {
           work.map((entry) => (
             <li class="animate">
               <div class="text-sm opacity-75">
                 {dateRange(entry.data.dateStart, entry.data.dateEnd)}
               </div>
-              <div class="font-semibold text-black dark:text-white">
+              <h2 class="font-semibold text-black dark:text-white">
                 {entry.data.company}
-              </div>
+              </h2>
               <div class="text-sm opacity-75">{entry.data.role}</div>
               <div class="entry-body mt-2">
                 <entry.Content />