A hand-drawn, scroll-driven portfolio that feels more like moving through a short film than clicking through pages.
I am a sophomore Computer Engineering student at UBC, and I built this site to combine illustration, interaction design, and frontend engineering in one place.
- Add your URL here: `https://imryan.kim
This portfolio is one continuous animated scene:
- a custom loading phase that preloads core assets
- a landing + train sequence
- an interactive About section with a cursor-based reveal effect
- a Projects section that transitions through illustrated scenes
- a sticky music player with waveform controls
Everything is intentionally linear and story-like so the experience feels guided, not just navigated.
- This Website: custom scroll-state scene engine in Next.js/React
- Rebase: AI-native resume builder
- Mango: webcam full-body gesture controls for games
- Next.js 15
- React 19
- TypeScript
- WaveSurfer.js
- Custom WebGL2 shader (
RevealFluid)
- Scene orchestration lives in
src/components/ScrollScenePlayer.tsx - WebGL reveal effect lives in
src/components/RevealFluid.tsx - Audio UI lives in
src/components/StickyAudioPlayer.tsx - App entry points are
app/page.tsxandapp/layout.tsx
Recent improvements:
- Converted heavy scene assets to WebP
- Added startup preloading before intro playback
- Added windowed preloading as phases progress
- Switched scene fitting behavior to keep the full drawing visible (
contain) - Added a loading overlay transition so users do not see partially loaded UI
Requirements:
- Node.js 20+
- pnpm
pnpm install
pnpm devOther useful commands:
pnpm build
pnpm start
pnpm lint
pnpm exec tsc --noEmitapp/: Next.js app router entry filessrc/components/: core interactive componentspublic/Animation/: frame-by-frame scene imagespublic/: other media (audio, project images, reference assets, resume)