Portfolio v1
First personal portfolio — command-palette navigation, GitHub stats integration, typed content architecture, and a dark cyber aesthetic.
Next.jsTypeScriptTailwind
Role
Frontend Developer
Team
Solo
Duration
2 weeks
Category
Portfolio / Personal Brand
Impact
Sections
6 (Home, About, Projects, Research, Certs, Contact)
Status
Live
Problem
Needed a personal site that went beyond a static resume — something that communicated technical personality, showed real projects, and was easy to maintain as content grew.
Solution
Built a typed, data-driven portfolio with a command-palette (Ctrl+K) for power navigation, GitHub stats widget, and a clean multi-section layout including Projects, Research, Certificates, and Resume.
Objectives
- Create a strong first impression with recruiter-friendly structure
- Make all content sections easy to update from a single data file
- Stand out with interactive UX details like command palette
Key Features
- Command palette (Ctrl+K) for keyboard-driven navigation
- GitHub stats widget with live profile data
- Data-driven project, research, and certificate sections
- Typed content models for maintainability
- Cyber-themed dark UI with custom font and layout system
Architecture
- Next.js App Router with centralized content exports
- Typed schemas for all content sections
- Tailwind utility classes for theme consistency
Challenges
- Designing a command palette that felt native, not gimmicky
- Balancing dark aesthetic with readability
Learnings
- Where interaction details elevate perceived quality
- How a content schema reduces future rewrite cost