/posts/ and /zh/posts/ become hybrid: three fixed-slug flagship cards above the
complete year/month archive, with the flagship block collapsing (inert, h=0) as
soon as the reader filters. /categories/case-studies/ becomes a portfolio: compact
two-column hero with a 21:9 deterministic topology banner, flagship ordering from
lib/portfolio.ts instead of pubDate, and one measured pill per card.
Also fixes what the screenshot review turned up: ZH archive rows and category chips
were printing raw English slugs, the two chip strips were unlabelled and read as one
list with a duplicated 'devops', card meta rows broke rhythm past four tags, the nav
had no current-section indicator, and mobile title links were under the 44px tap
minimum. scripts/probe-layout.mjs is the repeatable gate: 72/72 page x viewport
checks and the collapse test.
Replaces the generated isometric diagram with the supplied 2752x1536
render (engineer at a multi-monitor desk, container streams flowing into
server racks). Re-exported at 1024/1280/2048 widths; alt text and the
lightbox caption now describe what the image actually shows.
The previous hero-banner was composed as a wide banner with an empty left
40% reserved for overlay text. In the 50/50 hero column it rendered as a
shrunken half-width picture with dead space on both sides.
New illustration fills the whole 16:9 frame edge to edge (code/CI/CD left,
container + host cluster centre, observability right) so the right hero
column reads as a system diagram at its native 518px width, with the
2048w lightbox for detail reading.
Also add a 1280w WebP so DPR2 desktops do not pull the 2048w asset on
first paint.
- brand: three-colour Hoelee mark (rasterised from the brand vector,
transparent, public/images/hoelee-mark-96.png) followed by the name
- section links grouped in .nav-links so the mobile header puts them on
their own row instead of wrapping past the search/lang/theme controls
- measured 320/360/390/414/600/768/1280: scrollWidth == innerWidth,
header 91.6px two rows (<600px) / 60.3px one row, mark loads at 22/26px
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.
hoelee