feat(identity): real author photo across the site + About page rewrite
Deploy / build (push) Successful in 48s

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.
This commit is contained in:
hoelee committed 2026-10-16 22:07:25 +08:00
1 parent 215051ef08
commit 6b7c5a983f
12 files changed
+410 -65

No files matched your search

+14 -1
View File
@@ -25,7 +25,20 @@ const featuredPosts = featured.length === 4 ? featured : posts.slice(0, 4);
<BaseLayout title={SITE.title} description={SITE.description} altLocaleUrl={`${SITE.url}/zh/`}>
<section class="hero">
<h1>{SITE.author} — full-stack developer &amp; DevOps engineer</h1>
<div class="hero-id">
<picture>
<source srcset={SITE.photo.smallWebp} type="image/webp" />
<img
class="hero-photo"
src={SITE.photo.small}
alt={`${SITE.author} (${SITE.handle})`}
width="72"
height="72"
decoding="async"
/>
</picture>
<h1>{SITE.author} — full-stack developer &amp; DevOps engineer</h1>
</div>
<p class="hero-sub">
I run <strong>162 containers across three self-managed hosts</strong> — client sites, a
mail platform, CI/CD, workflow automation and this blog — and I build web systems for