story no. 04

Shaojiang.io

This site: portfolio, blog and playground.

Visit site

Role

Creator & Solo Developer

Timeline

2023 — now

Company

Shaojiang.io

Stack

Nextjs · React · TypeScript

Part 01

Switch Design

Two complete looks for the same site: Storybook (warm paper, doodles and my cartoon self) and Nebula (deep space, glass and a violet glow), picked from the switch in the nav. One attribute on the page swaps every design token, each design can lay a page out its own way, and the choice is remembered and shareable as a ?design= link.

Part 02

AI-native Home

A home page that introduces me with an illustrated portrait, the teams I've helped as logo stickers, featured work, skills, a career timeline and recent notes, animated with Motion presets tuned to each design.

Part 03

English & Chinese

Every page is served under /en and /zh. The copy lives in typed dictionaries per language, worded per design where the two differ, so both languages always stay complete.

Part 04

Light & Dark Themes

Each design has a light and a dark mode built from semantic Panda CSS tokens. The choice is applied before the first paint, so there is no flash, and remembered across visits.

Part 05

Project Portfolio

A filterable grid of projects spanning 14 years. Cards slide into place when the filter changes, Nebula adds a list view, and unfinished projects carry a Work in progress badge.

Part 06

Shareable Project Details

Each project has its own statically generated page (/projects/[slug]). Storybook tells it as a short story, one part per feature; Nebula shows a feature explorer beside a sticky card of facts.

Part 07

Tech Articles

Articles written in Contentful and rendered with syntax-highlighted code, an auto-generated table of contents that follows the reader, draft-mode previews and incremental static regeneration.

Part 08

Panorama Image Viewer

A showcase of the panorama viewer pattern from Pano AI: pan, rotate, zoom and re-centre a wide wildfire-camera image, with live debug variables.

Part 09

Audio Player

A controlled audio player with a custom progress bar, playback controls and a locked section that can't be played until it is unlocked.

Part 10

Color Picker

A developer tool with a full HSL picker, a palette of tints and one-click copy of HEX, RGB and HSL values; an SVG-to-Base64 converter sits alongside it.