Yamentai.com is designed around a simple rule: ship the smallest system that can express the idea.
Static at the core
Astro produces the pages as static HTML. The homepage, Our First Title, the Technology index, and every article arrive as complete documents without waiting for a client application to start. This keeps navigation fast, makes the content resilient, and leaves search engines and assistive technology with a straightforward document structure.
Technology articles are Markdown files loaded through an Astro content collection. A typed schema validates titles, descriptions, publication dates, tags, and draft state during the build. Publishing a new article means adding a file—not introducing a database or content-management runtime.
React as an island
React is deliberately limited to the live network-presence module. Everything around it remains static Astro markup.
That island opens a WebSocket to the same origin and listens for a compact, versioned presence message. If JavaScript is unavailable, the rest of the site remains complete. If the connection cannot be established, the module settles into a quiet offline state without blocking the page.
One edge system
Cloudflare serves the generated files and runs the API from one Worker deployment. Static files remain asset-first; only /api/* requests invoke Worker logic.
The live connection endpoint is coordinated by a single named Durable Object. It uses Cloudflare’s hibernating WebSocket API, allowing active connections to remain attached while the object sleeps between events. Presence is calculated from open sockets rather than stored as user records.
There are no accounts, tracking identifiers, IP-address records, or durable visitor profiles behind the indicator.
Presentation without excess runtime
Tailwind CSS supplies the build-time styling system, while the distinctive transitions, responsive typography, focus states, and reduced-motion behavior live in the site’s global design layer. Fonts and artwork are served locally.
The result is intentionally asymmetric: rich visual presentation on top of a conservative technical foundation. Static where possible. Stateful only where the experience requires it.