0%

0000000

0x00

abchaudary.me

Project Name: This site. A Next.js and Payload rebuild carrying a second, machine-readable copy of itself.

Technologies:

Project Links: Live Repository Available for similar engagements

The abchaudary.me home page: a full-bleed photographic hero under the site wordmark, with the sidebar menu control top left.

The constraint that shaped everything

The design was not up for negotiation. The home page and the about page look the way they looked before the rebuild, down to the pinned scroll choreography and the Three.js scene, and the original globals.css is treated as a read-only source file.

That single rule decides the architecture. A site that cannot change what it shows a reader, but still has to be legible to search engines and language models, has to put the machine layer somewhere else. So every route ships twice: the page you see, and a plain-Markdown twin at the same URL with a .md suffix, carrying no navigation, no CSS and no JavaScript, marked noindex and canonical back to the page it mirrors. An llms.txt at the root indexes all of them, and each route carries one JSON-LD @graph whose nodes reference a single Person by stable @id rather than restating an identity per page.

Things that were harder than they looked

The loading screen had to run before React existed. A React component cannot dismiss an overlay quickly, because it cannot do anything until hydration, and hydration is precisely what the overlay is covering for. It is an inline script in the document head instead, counting in raw DOM, finished before the bundle has parsed.

Music across tabs needed a lease. Only the first tab plays. Two tabs open means two audio elements racing, so tabs coordinate over BroadcastChannel with a localStorage heartbeat as the fallback, and a tab that dies releases its claim rather than holding it forever.

One CSS minifier bug cost a layout. Lightning CSS merges duplicate backdrop-filter declarations and keeps the last, which left only the -webkit- form, which Chromium 151 no longer supports. The blur vanished, and with it the containing block it had been silently providing, so a sidebar's absolutely positioned children jumped to the wrong ancestor. The visible symptom was icons in the wrong place, three components away from the cause.

What holds it together

Payload CMS on Postgres, 18 architecture decision records, a generated sitemap, Playwright across nine device profiles, and an ASCII-art 404 that renders a GIF as text. Every fix above is written up on the blog.

Links

Live: abchaudary.me. The blog covers the bugs in detail.