Redesign: prototype a new template for home and content pages #8

Rework how the homepage, article pages and supporting pages look and are structured. Start from a prototype, and change nothing visible on the live site until the prototype is approved.

The site audit found the following points for the new template to account for.

Structure and content

• The homepage lists 18 articles mixed with 40 activity logs, 23 of them under 100 words. Consider separating them, for example with a /logs/ page, and keep existing URLs.
• The homepage <title> is "meaningfool" and its only H1 is "Articles". It needs a name and a positioning line, and maybe a "Start here" selection.
• The About page has a "Work with me" section but no way to make contact: no email, LinkedIn or booking link.
• No post has a meta description, so all of them fall back to the title. The template should support a description field with an excerpt fallback.
• The article template hides every # heading inside content, to hide the duplicated title. That also hides "Part 1–5" in "Agent Frameworks for the Rest of Us". The new template needs a proper heading hierarchy.
• Navigation offers About only. There's no visible RSS link, no previous/next or related posts, and no reading time. Tags exist in frontmatter but are unused.
• The 404 page is unstyled.

Visual and accessibility

• The accent #ff7c1f on white is 2.58:1, below the 4.5:1 WCAG AA minimum. Links rely on color alone, so underline links in running text.
• On mobile, the article list leaves the * bullet alone on its line when a title wraps.
• Three typefaces (Space Mono, Roboto Mono 300, Poppins). Body text at weight 300 hurts legibility, and strong is set to weight 400.
• The favicon is Astro's default logo. There's no favicon.ico or apple-touch-icon.
• No dark mode.
• One share image for every page, and RSS items carry titles only.

Template-level performance and privacy

• Self-host the fonts. Google Fonts block rendering for about 0.6–1 s on mobile, cause a 0.22 layout shift on one article, and send visitor IPs to Google.
• YouTube embeds: lazy loading on youtube-nocookie.com, or a click-to-load thumbnail
• Responsive images (srcset). Convert the large GIF to a looping video. Give videos posters and preload="metadata".

Content edits (meaningfool-writing)

• Typos on the homepage and About page
• Tracking parameters in a few outbound links
• Missing alt text on some images, and file names used as alt text on others