Portfolio

Modern developer portfolio with IDE-inspired design, command palette, terminal emulator, and 6 arcade games

Next.js 16TypeScriptTailwind CSS 4SupabaseFramer MotionVercel

The Problem

Most developer portfolios are boring static pages that fail to showcase technical skills or engage visitors. Recruiters spend seconds on each portfolio before moving on.

The Approach

Built a production-grade portfolio that showcases technical skills while being genuinely engaging:

Interactive Features:

Command Palette (⌘K) - VS Code/Raycast-inspired instant navigation
Terminal Emulator - Working terminal with custom commands that query the database
6 Arcade Games - Snake, Tetris, Pong, Breakout, Flappy Bird (vanilla Canvas API)
Phone Mockup - Interactive mobile preview of projects

Design System:

4 Color Themes - Dark, Cyber, Dracula, Solarized
IDE-inspired aesthetic with monospace fonts
Responsive design for all devices
Smooth animations with Framer Motion

Full CMS:

Admin panel at /admin with Supabase Auth
Manage projects, blog posts, site settings
Terminal command editor
Theme customization
Asset management

Technical Excellence:

Next.js 16 with App Router and Turbopack
TypeScript 5 for type safety
Tailwind CSS 4 for styling
Supabase for PostgreSQL, Auth, Storage
PWA-ready with offline support
98 Lighthouse score

The Impact

98 Lighthouse score. Sub-1s LCP on 3G. The terminal and games make recruiters actually spend time on the site instead of bouncing. Open-sourced for the community.

Build Notes

Keyboard Shortcuts:

⌘+K - Open command palette
⌘+J - Toggle terminal
⌘+B - Toggle phone mockup
Escape - Close modals
~ - Open terminal

Terminal Commands:

help - List all commands
projects - Show projects
blog - Show blog posts
skills - Show tech stack
contact - Contact info
theme [name] - Change theme
clear - Clear terminal

Performance:

98 Lighthouse score
Sub-1s LCP on 3G
Code splitting and lazy loading
Image optimization
Edge caching via Vercel

Back to Projects