New Personal Website
⚠️ This English content was machine-translated from Japanese.
Overview
I created a personal website and blog. I'll write about various technical aspects and visual style.
Technical Details
Content Management with Sanity CMS
I'm using three domains with different roles:
- kynantokoro.com: Displays only published content
- draft.kynantokoro.com: Displays all content including drafts (Sanity CDN is disabled for near-instant preview)
- cms.kynantokoro.com: Sanity Studio (content editing interface)
Access to the draft and cms versions is managed with Cloudflare Access.
FOUC-free Theme Switching
A common problem with dark mode/light mode switching is FOUC (Flash of Unstyled Content). While there's an approach using cookies to apply themes with SSR, for sites like blogs that serve the same content regardless of user, this doesn't work well with HTTP Cache-Control.
After trying a cookie-based approach, I ultimately adopted client-side theme switching. By synchronously setting theme attributes and classes within the `<head>` tag before CSS rendering begins, FOUC is completely prevented, while all HTML responses remain identical, enabling aggressive caching with HTTP Cache-Control headers.
AI Translation Feature
I implemented a custom AI translation feature within the CMS. After writing an article in Japanese, I can translate it to English with one click (and vice versa). I use Claude (Anthropic) as the translation engine.
Articles are managed in Sanity's Portable Text format (JSON-based structured rich text), and can be translated while preserving embedded images, custom blocks (game embeds, audio players, etc.), text styling, and document structure.
Visual Style
For the site's visual aspects, I'm utilizing animations created with Nintendo DS's "Flipnote Studio (Ugomemo)".
Top Page GIF
For the profile image, I'm using a GIF converted from a 10-frame animation drawn across the full DS screen. To visually confirm SSR and HTTP Cache behavior, the saturation is randomly generated server-side. The color changing when you reload the page is actually for cache behavior verification.
Blog Entry Key Images
Each blog entry displays a key image that is deterministically generated based on a seed value. The following parameters are determined from the seed:
- GIF frame index (which frame to use)
- Zoom magnification
- Tilt
- Hue
I'm not actually generating images, just changing CSS properties. This allows for lightweight and flexible visual variation.
Pure randomness wouldn't be interesting, so I've given it "directionality". For example, tilts are basically in 90-degree increments, with occasional diagonal angles. These constraints create visuals that are random yet cohesive.
Making Something Every Week
One reason I started this blog is being influenced by the "Game a Week Challenge" and blogs of Creative Coding creators. I might have some obsession with the habit of regularly making and publishing things. (Most of the music projects I'm involved in were also born from forcibly creating such constraints.)
I actually wanted to do "make a game every week", but knowing that my interests shift around constantly, I made the rules a bit looser.
"Upload something interesting once a week"
Whether it's a game, music, tool, experimental code, anything goes! But work and life come first 😅