nextjsportfoliotypescriptsupabaseweb-dev
How I Built This Portfolio (And Why It Has Games)
The technical decisions behind building a portfolio that recruiters actually remember.
December 24, 20255 min read
Why Another Portfolio?
Every developer has a portfolio. Most look the same: hero section, project cards, contact form. Boring.
I wanted something that:
- Shows technical skill without being obnoxious
- Is actually fun to explore
- Stands out in a recruiter's browser tabs
The Stack
- Next.js 15 with App Router
- TypeScript (obviously)
- Tailwind CSS for styling
- Supabase for the backend/CMS
- Vercel for deployment
The Fun Parts
Command Palette (⌘K)
Inspired by VS Code and Raycast. Lets you navigate anywhere instantly. Built with Headless UI for accessibility.
Terminal Emulator
A working terminal with custom commands. Try help to see what's available. It's not just for show—it actually queries the database.
Arcade Games
6 playable games: Snake, Tetris, Pong, Breakout, Flappy Bird, and a secret one. All built with vanilla Canvas API, no game engines.
Why games? Because:
- They're impressive to non-technical recruiters
- They show I can build interactive UIs
- They make people stay on the site longer
Performance
- 98 Lighthouse score
- < 1s LCP on 3G
- PWA-ready with offline support
The CMS
Built a full admin panel to manage everything: projects, blog posts, site settings, even the terminal commands. All stored in Supabase with RLS policies.
What I'd Do Differently
- Start with a design system
- Add more tests earlier
- Use a monorepo structure
The code is open source: github.com/blackspider-ops/portfolio