--- title: "New Personal Website" date: "2026-01-04" tags: ["Cache-Control","FOUC","Sanity CMS","Flipnote Studio"] --- # New Personal Website ## 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 `` 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.