feat(identity): real author photo across the site + About page rewrite
Deploy / build (push) Successful in 48s
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:
1 parent
215051ef08
commit
6b7c5a983f
12 files changed
+410
-65
No files matched your search
+14
-1
@@ -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 & 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 & 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
|
||||
|
||||
Reference in new issue
Block a user