williamliu.ai now reads like a publication, in English and Chinese

TL;DR

🧭 The home page now opens on the newest release, with the blog, podcasts and projects side by side below it.
🌏 Every page has a Chinese twin under /zh/, with a Chinese interface and Chinese series and project descriptions.
🎧 The podcast page is organized by series. The latest three episodes play in place, and a "View all" link shows the rest.
📖 Episode pages read like articles: a serif transcript, with figures and references in a sidebar.
📱 Phones no longer scroll sideways, and the core of every page works with JavaScript turned off.
⚖️ The trade-off: a Chinese page downloads 4 to 9 MB of fonts on your first visit.

The old williamliu.ai was a podcast host with my name on top; the new one treats everything I publish as one body of work, in two languages. Before this redesign, the home page was a name, a one-line description, an "Open podcasts" button, two social links and three project cards. It had no navigation bar and no link to the blog. You could listen, but you had to know where to look. The redesign went live on September 16. This post shows what changed, page by page, against the version it replaced.

I designed it in Claude Design, then had AI coding agents build it into the existing site. How that went, including what broke, is a separate technical series. This post is about what you get as a reader. The short, silent prototype walkthrough below plays right in the article.

fig 01 Four uncropped Claude Design prototype screenshots at the same scale, all in the prototype's Chinese mode: a home page centered on a featured podcast, a podcast index grouped by series, an episode page with a cover placeholder, and an essay page.

fig 02 The Claude Design prototype in motion: a 90-second screen recording, without sound, of the home page, an episode page with the animated waveform player, the projects page and the Chinese pages.

fig 03 Side by side: the previous home page shows a large name, a tagline, an "Open podcasts" button and three project cards; the redesigned home page has a navigation bar with an English/Chinese switch and opens on the newest podcast episode with a player.

🧭 One site, not a podcast host with extras

The blog, podcasts and projects now sit side by side, and every page shares one navigation bar: Blog, Podcasts, Projects, About, and a language switch. The first idea of the redesign is that these are equal bodies of work. So the home page stopped being a personal banner and became an index. At the top is the single newest release, whatever it is. Below it, three columns list the latest blog posts, podcasts and projects, each with a link to see all of them.

The Blog index gives each post a date column, a title with a two-line dek beneath it, and a → arrow. On article pages, the first real paragraph gets a drop cap, and figure captions carry fig 01-style labels.

Two pages are new: Projects and About. The site now describes itself as “Technical podcasts and a blog on language models, coding agents, and engineering practice,” and the About page opens with the same line. Both pages use only facts I could verify. No invented star counts, no job history I didn't write down, no mock numbers from the design prototype. The About page is short because I'd rather it be short than wrong.

🎧 Listen without leaving the list

The podcast page is organized by series, and the latest three episodes of each series play right there. Before, each series was a large card with a cover and an "Open series" button, so hearing anything meant clicking into it. Now each series shows its cover, its episode count, subscribe links for Apple Podcasts, Android and RSS, and its three newest episodes with a player next to each title. Start one and any other player on the page stops, so two episodes never talk over each other.

Three rows can make a series look small, so each series ends with a "View all 9 episodes" link, with the real count, that takes you to the full list. On a series page, every episode row expands in place to show its notes, with a link to the full episode page.

The player is the browser's own audio player, the one the site had before. The design had a custom player with a waveform, and I liked it. The agents built and tested one, but on the staging site it looked far from the design, so I asked for the old player back. It behaves the way audio behaves everywhere else in your browser.

🌏 Every page in Chinese, honestly labeled

Every page now has a Chinese twin: the home page, podcasts, every series and episode page, projects, about, even the 404 page. Switch with the EN / 中文 control in the navigation bar, or visit any address under /zh/. In the September 12 build, that came to 137 Chinese pages next to 137 English ones, and each new episode adds a pair. The switch is an ordinary link, so it works without JavaScript. With JavaScript on, the site remembers your choice and sends a browser set to Chinese to the Chinese pages. Each page also declares its language twin to search engines.

Here is exactly what is translated today. The interface is in Chinese: navigation, headings, labels, dates, counts and reading times. The blog entry in the Chinese navigation is 文章; the page title is 博客. One exception: the new "View all" link is still in English until I approve its Chinese wording. Three series have Chinese titles and descriptions, as do the three projects and two episodes. Everything else, most episode titles and all transcripts, is still in English. Where a long English text appears on a Chinese page, a one-line notice says so first: "这一部分尚未翻译，以下为英文原文。" The build does no automatic translation: only translations supplied with the design or approved by me ship.

fig 05 The Chinese podcast page: navigation, heading, series title and description are in Chinese; the episode titles below remain in English.

📖 Episode pages that read like articles

An episode page is now a reading page: title and player up top, then show notes, then the full transcript in a serif typeface, with figures and references in a sidebar. The layout is built for coming back to an episode to find one claim or one chart. The transcript now shows who is speaking in a narrow column next to the text. The figures appear where they are discussed, and the sidebar lists every figure and source so you can jump straight to one. On a phone, the sidebar moves below the article.

fig 06 A redesigned episode page on a desktop: the transcript in a serif typeface with the speaker's name in a narrow column, a figure from the source paper inline with its numbered caption and license, and a sidebar listing every figure in the episode.

📱 Built for phones, keyboards and no JavaScript

The old episode page scrolled sideways on a phone; the new one fits the screen, and the core of every page works without JavaScript. On a 390-pixel-wide phone, the old episode page was 11 pixels wider than the screen, so it wobbled sideways as you scrolled. The redesigned pages have zero sideways overflow on the same phone. The site is tested on four screen sizes down to 320 pixels wide, with automated accessibility checks on each.

fig 07 Side by side on a 390-pixel phone: the old episode page and the redesigned episode page.

A few other things you won't notice until you need them. Automated tests check keyboard access and a visible focus ring on the site's interactive controls. Expand buttons and list links are at least 44 pixels tall, a comfortable size for a thumb. Animations turn off if your system asks for reduced motion. Turn JavaScript off and you still get the navigation, full episode lists, every episode page, transcripts, source links and a working audio player. Only the expandable episode rows need it. The typefaces now ship with the site itself, so the pages look the same on every device instead of falling back to whatever fonts yours has, and no third-party font service sees your visit.

⚖️ What stayed the same, and what it costs

Your subscriptions, episode links and feeds keep working; the one real cost is a heavier first visit to the Chinese pages. The redesign changed how the site looks, not what it publishes. Every existing episode address still works. RSS feeds, publication dates and release schedules are untouched, so nothing in your podcast app will move.

The cost is fonts. The site now ships its own typefaces. An English page loads 64 to 215 KB of them, depending on the page. A Chinese page also needs a Chinese typeface. The font files cover the Simplified Chinese ranges the site needs and weigh 4 to 6 MB each, so a Chinese page downloads 4 to 9 MB of fonts on a first visit, depending on the page. Your browser keeps them for a day, but a first visit on a slow connection will feel it. Cutting it down to the characters the site actually uses is the obvious next step.

🧪 How it was built

I designed the site in Claude Design, and AI agents built it into the existing codebase over fifteen days, September 2–16, while the old site kept serving readers. The design prototype was a working mock-up with sample content, not something you can ship. Turning it into the real site took AI coding agents and a lot of automated review. Readers never saw an outage, but one staging mistake stopped the production database from accepting writes for about two hours. The technical series covers the build and the mistakes.

If you read Chinese, try the 中文 switch and tell me which page you'd want translated first. That list decides the order.

How this post was made: drafted by Claude Code from my own session logs, checked against those logs by a separate Codex agent, and edited by me. The cover illustration is AI-generated; the screenshots are of local builds of the previous site and the redesign.