Personal Website Rebuild

Project Context

This project began as an opportunity to apply concepts from web development coursework to an existing personal site. AI-assisted development made it practical to investigate several rendering approaches and iterate on a more ambitious interface. The objective was to replace a legacy Hexo blog with a maintainable publishing platform while preserving its articles and giving the blog, portfolio, and About page a consistent visual identity.

Application Architecture

Nuxt 4 and Vue 3 provide routing, shared layouts, and reactive state. Nuxt Content supplies the article collection, while structured Portfolio content is validated and compiled into JSON. The site generates static HTML and assets, so serving a completed build does not require a persistent Node.js application server. A shared card shell survives navigation across the main content areas; transitions replace its contents without repeatedly recreating the glass surface. The rain scene also persists across route changes.

A Shared Rendering Pipeline

The visual foundation combines Lucas Bebber's RainEffect with an adaptation of ybouane's Regular Glass renderer. Rain is rendered in WebGL rather than played as a background video. The glass adapter samples the existing rain canvas after a completed frame, avoiding a separate DOM capture for every card. Source texture updates follow the rain renderer's frame lifecycle, while geometry-only updates can reuse the uploaded image. Sampling regions are bounded around the viewport so that long articles do not require textures as tall as the entire document. Dock surfaces share a renderer to reduce duplicated contexts and processing.

Focus Transitions and Optical Cues

The blog opening shifts attention between the distant scene and the raindrops. Leaving the opening section drives the transition from scroll position; returning uses a timed curve. A shared controller coordinates these changes with route navigation and restored reading positions. Defocus uses disk sampling, while highlight treatment and contrast compensation keep distant lights legible as their blur grows. A small change in framing adds focus breathing. These are perceptual approximations implemented in shaders, not a physically complete camera simulation. Expensive background blur results are reused while the focus state remains unchanged.

Performance and Interaction Tradeoffs

The most difficult issue was keeping refracted content aligned with the background during scrolling and browser overscroll. A later rendering experiment reduced edge gaps but introduced long-session performance problems and dark flashes during card initialization. The retained implementation uses the earlier Regular Glass approach and disables overscroll bounce on both axes. This trades an elastic boundary effect for more predictable alignment while preserving ordinary native scrolling. Archived experiments provide a rollback and comparison point. Chrome performance recordings and repeated visual checks guided these decisions; the project does not claim a universal frame-rate target across devices.

Independent Content Workflows

Website code, articles, and Portfolio content live on separate Git branches with local worktrees. Article files contain Markdown and metadata; Portfolio files use structured YAML front matter. Composition scripts validate content before replacing the website snapshots, reject unsupported fields and routes, and retain the previous data for recovery. Assets and application code remain in the website branch. This separation allows content updates without exposing the rest of the application to routine editorial changes.

• Chinese and English articles are authored as separate files and selected by locale. The site does not translate article text at runtime.
• Existing article dates, media, and legacy paths are preserved during migration. Language-specific routes and alternate-language metadata support the bilingual site.
• GitHub Actions checks out all three sources, records their revisions, validates the combined content, and produces a downloadable static build. Deployment remains a separate step.
• An isolated local build uses the same composition and verification scripts. With dependencies already installed, it can build from local content or committed snapshots without GitHub access.

Verification and Remaining Limits

Automated checks cover content schemas, route generation, locale behavior, rendering lifecycle helpers, and generated HTML. Browser checks cover desktop and mobile layouts, fast scrolling, navigation, reading-position restoration, and renderer readiness. Static fallbacks support reduced-motion and reduced-transparency preferences. These checks complement visual review rather than replace it: GPU load, long-running sessions, and browser-specific compositing behavior still require profiling on representative devices. The implementation has not been validated by a production load test or a comprehensive cross-browser performance benchmark.

Contribution and Engineering Lessons

The work included defining interaction requirements, evaluating libraries, integrating rendering lifecycles, designing the content pipeline, and reviewing behavior in the browser. AI assisted with research, implementation, tests, and iteration; the rain and glass foundations remain attributable to their upstream authors. The central lesson was that visual continuity depends as much on lifecycle and coordinate management as on shader quality. Reusing a scene, limiting redundant work, and making an explicit interaction tradeoff produced a more coherent result than adding complexity to every rendering path.