From 948c76a6a8214a45415c9b1214e98ac21a6b1442 Mon Sep 17 00:00:00 2001
From: NikolajDanger <nikolaj@ingemanngade.net>
Date: Wed, 9 Sep 2026 18:49:53 +0200
Subject: [PATCH] :goat:

---
 index.html | 3 ++-
 style.css  | 7 ++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 4efb66c..651fb45 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,7 @@
   <link rel="icon" type="image/png" href="/goat.png" sizes="any" />
   <link rel="apple-touch-icon" href="/goat.png" />
   <link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/space-grotesk-var.woff2" />
+  <link rel="preload" as="image" href="nikolaj.jpg" />
   <link rel="stylesheet" href="/fonts/fonts.css" />
   <link rel="stylesheet" href="/fa/css/all.min.css" />
   <link rel="stylesheet" href="style.css" />
@@ -96,7 +97,7 @@
       <div class="hero-visual">
         <div class="avatar-ring">
           <div class="avatar-placeholder">
-            <img src="nikolaj.jpg" draggable="false" alt="Nikolaj Gade, a very handsome (and extremely hireable) person."/>
+            <img src="nikolaj.jpg" fetchpriority="high" draggable="false" alt="Nikolaj Gade, a very handsome (and extremely hireable) person."/>
           </div>
         </div>
       </div>
diff --git a/style.css b/style.css
index 4990d4d..bf2637d 100644
--- a/style.css
+++ b/style.css
@@ -309,7 +309,12 @@ main { position: relative; z-index: 1; }
   border-radius: 50%;
   overflow: hidden;
 }
-.avatar-placeholder img { width: 100%; height: 100%; object-fit: cover; }
+.avatar-placeholder img {
+  width: 100%; height: 100%; object-fit: cover;
+  /* Hide the alt text the browser paints into the ring while the JPEG
+     is still on its way; screen readers still get it. */
+  color: transparent;
+}
 
 /* Spin the image inside the ring, not the ring itself: the ring's hard
    offset shadow would visibly orbit if the shadowed element rotated.