Archive
Technical notes and site-building records, archived by date and theme.
28 posts
Topics
Site Fix Notes
Tracing a Fast Origin Transfer warning to crawlers, filter combinations, and dynamic rendering, then restoring static delivery without losing gallery navigation.
Site Fix Notes
Preparing the 3D homepage for launch: reliable first visits and mode switching, smaller scene assets, and restored static generation and edge caching for bilingual pages.
Site Fix Notes
Fixing mismatched orientation and solution moves by aligning the puzzle's screen and logical axes, then refining its initial state, drag range, and focused size.
3D Homepage Development Log
The final pass turned small props into local applications: layered Rubik turns, an in-model handheld arcade, and a finite spring-driven wall badge.
3D Homepage Development Log
Blog, photography, and calligraphy stopped jumping to ordinary page templates. Monitor OS and native in-room surfaces now support reading without leaving Studio.
3D Homepage Development Log
Correcting backward motion and drift with one camera timeline, while native DOM cards keep recent listening records readable and easy to open.
3D Homepage Development Log
Why did natural-looking Blender materials turn plastic in the browser? Baking stable lighting into texture atlases helped preserve the intended appearance in WebGL.
3D Homepage Development Log
From imported models to reliable delivery: organize the Blender hierarchy, record asset licenses, and use export settings and a manifest to keep the scene reproducible.
3D Homepage Development Log
Turning an empty box into a readable studio required judging the fixed entrance projection, not simply chasing one supposedly correct room dimension.
3D Homepage Development Log
The 3D room began as progressive enhancement: establish a reliable first frame, navigation, and fallback before letting Three.js take over the same composition.
Site Fix Notes
A homepage calligraphy record opened a 404, then returning home stopped at the intro H. The two symptoms came from separate layers: stale development routes and intro state that did not respond to history restoration.
Homepage Change Log
The final section uses outer photo blades, a central SVG aperture, and a mouse preview. Photos are split by clip-path, gaps come from background, and one progress value drives the entry motion.
Homepage Change Log
The aperture went through overlay lines, SVG blades, clip-path sectors, and finally geometry-based insets. The stable version puts the gap inside the photo blade itself.
Homepage Change Log
The hard part was not drawing a hexagon. It was keeping blades, gaps, background color, photo clipping, and motion inside one coherent geometry.
Site Motion Log
The gallery and calligraphy detail modals were not broken by size alone. Page entry motion changed their positioning context, so the fix was to render them through a body portal.
Typography Change Log
Separate font stacks for Chinese, English, code, and handwritten greetings balance character, loading speed, and reliable fallbacks.
Site Motion Log
Blog, gallery, calligraphy, and about needed a page entry feel, but not a global loading overlay. Local PageEnter wrappers keep route changes fast.
Site Motion Log
The homepage motion depends on order. The overlay leaves first, then the header and hero enter, then lower sections reveal on scroll.
Site Motion Log
This pass split site motion into clear layers, then rebuilt the first-visit intro so it feels intentional without slowing the site down.
Homepage Change Log
From Last.fm data to album artwork, an SVG record, and an orbital track layout: connecting a dependable data flow with lightweight interaction.
Homepage Change Log
The second screen no longer behaves like a set of feature cards. Recent notes and recent photography expose real content, while Velite and YAML keep the data flow clean.
Homepage Change Log
The homepage background eventually became a global atmosphere layer. The important part was not reusing an image, but managing the image, overlay, theme switch, and readability in one boundary.
Homepage Change Log
The first step of the homepage change was to make the opening screen feel like a personal site: a welcome line, the calligraphy bird, a compact name card, and a quiet scroll cue.
Engineering Notes
The real requirement was not just uploading images. It was turning local originals into reliable web assets with sizes, URLs, metadata, and repeatable content data.
Engineering Notes
Using Sharp to produce 720, 1600, and 2560-pixel WebP variants for thumbnails, page display, and large-image viewing, balancing detail against loading cost.
Engineering Notes
Processing images is only half the workflow. The rest is uploading to R2, writing public URLs, and generating YAML that Next.js can consume.
Frontend
A Procreate bird exposed two rendering problems: transparency softened the ink strokes, and theme switching flashed the image background. A closer look at blending and first-frame rendering.
A fresh start after moving from WordPress to a static site, with space for technical notes, photography, and calligraphy.
