Web
Portfolio Website
Version 1 of this site
A personal portfolio built as a real product rather than a template. Next.js 15 and React 19 on the front, with a Three.js shader background, a full ⌘K command palette for keyboard navigation, and a scroll-pinned experience timeline. The community chat runs on Supabase Realtime, rate-limited through Upstash Redis and filtered for profanity before anything posts. Fully themed light and dark, reduced-motion aware throughout.
- 01The hero background is a WebGL fragment shader running in Three.js, not an image or a video loop.
- 02⌘K opens a command palette that drives the whole site from the keyboard.
- 03The experience timeline pins to the viewport and fills as you scroll through it.
- 04The community chat is live for everyone at once. Supabase Realtime pushes each message straight to every open tab.
- 05Every post clears a rate limiter on Upstash Redis and a profanity filter before it is written.
- 06Light and dark are a full palette swap, and every animation checks prefers-reduced-motion before it runs.
Core
- Next.js 15: App Router, RSC, static generation
- React 19
- TypeScript 5.7
Styling
- Tailwind CSS v4: @theme tokens, PostCSS pipeline
- Custom light/dark palette on the html element
- Geist + JetBrains Mono via next/font
Graphics & motion
- Three.js: the hero's ColorBends WebGL fragment shader
- Motion 11: springs, scroll reveals, palette transitions
- lucide-react: icons
Backend & data
- Supabase: Postgres + Realtime, powering the community chat
- Upstash Redis + @upstash/ratelimit: rate limiting on the chat endpoint
- obscenity: profanity moderation before messages post
- Next Route Handlers: /api/chat
- GitHub Contributions API (jogruber): the heatmap
Deploy
- Vercel