Archive
Technical writing, site-building notes, and study logs, archived by time and browsable by theme.
This fix unifies the 3D Rubik puzzle's screen and logical axes, restores a repeatable initial state, expands free-view dragging, and reduces its focused size.
The final pass turned small props into local applications: layered Rubik turns, an in-model handheld arcade, and a finite spring-driven wall badge.
Blog, photography, and calligraphy stopped jumping to ordinary page templates. Monitor OS and native in-room surfaces now support reading without leaving Studio.
Turntable, monitor, and calligraphy focus once pulled back and drifted off target. One timeline, projection checks, and native music cards made the motion stable.
A correct Blender preview does not automatically survive WebGL. The stable delivery bakes authored light into multiple beauty atlases and prevents the browser from grading it again.
Importing models was only the start. A maintainable 3D homepage needed Outliner hierarchy, a license ledger, reproducible export, and a manifest-enforced delivery chain.
Turning an empty box into a readable studio required judging the fixed entrance projection, not simply chasing one supposedly correct room dimension.
The 3D room began as progressive enhancement: establish a reliable first frame, navigation, and fallback before letting Three.js take over the same composition.
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.
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.
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.
The hard part was not drawing a hexagon. It was keeping blades, gaps, background color, photo clipping, and motion inside one coherent geometry.
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.
The typography pass split normal text, code, the homepage script, and the intro H into separate font stacks with practical fallbacks.
Blog, gallery, calligraphy, and about needed a page entry feel, but not a global loading overlay. Local PageEnter wrappers keep route changes fast.
The homepage motion depends on order. The overlay leaves first, then the header and hero enter, then lower sections reveal on scroll.
This pass split site motion into clear layers, then rebuilt the first-visit intro so it feels intentional without slowing the site down.
The recently played section connects Last.fm data, album artwork, an SVG record, and an orbital track layout. It looks visual, but the first boundary is data.
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.
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.
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.
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.
The gallery pipeline uses Sharp to produce 720, 1600, and 2560px WebP files. The point is not magic numbers, but matching real UI contexts.
Processing images is only half the workflow. The rest is uploading to R2, writing public URLs, and generating YAML that Next.js can consume.
A small rendering note from placing a Procreate ornamental bird on a theme-aware homepage: why blend modes looked better, and why the dark image flashed.
This is my first blog post
