feat(identity): real author photo across the site + About page rewrite

The photo is the identity evidence the external review flagged as the biggest
gap. One source image (Pictures/Professional Portrait with Blue Gradient
Background.png, 1254x1254), two sizes, WebP first with a JPEG fallback —
continuous tone is the case where WebP/JPEG beat PNG:

  640x640  42 KB JPG / 26 KB WebP   About page (190 CSS px)
  128x128   3 KB JPG /  2 KB WebP   author card + home hero avatar

It now appears in the About hero, the author card at the end of every post, the
home hero (both languages), and JSON-LD Person.image — the node search engines
read to associate the name with a face.

About went from 1,024 characters to five sections: identity with photo, "By the
numbers" (162 containers / 3 hosts / 71 essays / 0 hosting companies between me
and the servers), the real tech stack in four columns, the Hoelee Enterprise
block (website design and development is the main business, email hosting
secondary), and a contact split between hiring and business.

Also: the headshot's dark-blue background sits close to the page background, so
the photo, hero avatar and card avatar get a faint brand ring plus shadow.

Pictures/ keeps the converted JPG master next to the untouched PNG.

src/styles/global.css

@@ -284,20 +284,88 @@ pre code {
   border-radius: var(--radius);
 }
 .author-card .avatar {
-  width: 56px;
-  height: 56px;
+  width: 64px;
+  height: 64px;
   border-radius: 50%;
-  background: var(--brand);
-  color: #fff;
-  display: grid;
-  place-items: center;
-  font-weight: 700;
-  font-size: 1.3rem;
+  object-fit: cover;
+  border: 1px solid var(--border);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 25%, transparent);
   flex-shrink: 0;
+  display: block;
 }
+.author-card .author-body { min-width: 0; }
 .author-card .who { font-weight: 600; margin: 0; }
 .author-card .bio { color: var(--muted); font-size: 0.9rem; margin: 0.25rem 0 0.5rem; }
-.author-card .links { display: flex; gap: 0.75rem; font-size: 0.85rem; }
+.author-card .links { display: flex; gap: 0.75rem; font-size: 0.85rem; flex-wrap: wrap; }
+.author-card .author-split { font-size: 0.82rem; color: var(--muted); margin: 0.6rem 0 0; }
+.author-card .author-split a { color: var(--muted); }
+.author-card .author-split a:hover { color: var(--brand); }
+
+/* ---------- About ---------- */
+.about-hero {
+  display: flex;
+  gap: 1.75rem;
+  align-items: flex-start;
+  margin: 0.5rem 0 2.25rem;
+  padding-bottom: 1.75rem;
+  border-bottom: 1px solid var(--border);
+}
+.about-photo {
+  width: 190px;
+  height: 190px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  /* The headshot's own dark-blue background sits close to the page background, so a
+     faint brand ring + shadow is what actually separates it from the UI. */
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent),
+              0 10px 28px rgba(0, 0, 0, 0.35);
+  object-fit: cover;
+  flex-shrink: 0;
+  display: block;
+}
+.about-hero h1 { margin-bottom: 0.6rem; }
+.about-hero h1 .handle { color: var(--muted); font-weight: 500; }
+.about-lede { font-size: 1.02rem; color: var(--muted); margin-bottom: 0.75rem; }
+.about-links { font-size: 0.9rem; margin-bottom: 0.5rem; }
+.about-open { font-size: 0.9rem; color: var(--muted); margin: 0; }
+
+.proof-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.85rem;
+  margin: 1rem 0 1.25rem;
+}
+.proof-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.85rem 0.9rem;
+}
+.proof-card .n { display: block; font-size: 1.45rem; font-weight: 700; line-height: 1.15; }
+.proof-card .l { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; }
+
+.stack-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  margin: 1rem 0 1.5rem;
+}
+.stack-grid h3 { font-size: 0.95rem; margin: 0 0 0.4rem; }
+.stack-grid ul { margin: 0; padding-left: 1.1rem; }
+.stack-grid li { font-size: 0.88rem; color: var(--muted); margin: 0.15rem 0; }
+
+.sme-block {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--brand);
+  border-radius: var(--radius);
+  padding: 1rem 1.1rem;
+  margin: 1rem 0 1.5rem;
+}
+.sme-block p { margin: 0.4rem 0; }
+.contact-split { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 1rem; }
+.contact-split h3 { font-size: 0.95rem; margin: 0 0 0.35rem; }
+.contact-split p { margin: 0.2rem 0; font-size: 0.9rem; color: var(--muted); }
 
 /* ---------- Related posts ---------- */
 .related { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
@@ -346,7 +414,18 @@ pre code {
   padding-bottom: 1.5rem;
   border-bottom: 1px solid var(--border);
 }
-.hero h1 { margin-bottom: 0.75rem; }
+.hero-id { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
+.hero-photo {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent);
+  object-fit: cover;
+  flex-shrink: 0;
+  display: block;
+}
+.hero h1 { margin: 0; }
 .hero-sub { font-size: 1.05rem; color: var(--muted); max-width: 62ch; }
 .hero-cta {
   display: flex;
@@ -642,6 +721,10 @@ a.category-card:hover { border-color: var(--brand); }
   h2 { font-size: 1.25rem; }
   .related-grid { grid-template-columns: 1fr; }
   .featured-grid { grid-template-columns: 1fr; }
+  .proof-grid { grid-template-columns: repeat(2, 1fr); }
+  .stack-grid, .contact-split { grid-template-columns: 1fr; }
+  .about-hero { flex-direction: column; gap: 1rem; }
+  .about-photo { width: 140px; height: 140px; }
   .search-hint, .search-key { display: none; }
   .author-card { flex-direction: column; align-items: flex-start; }
 }