Project Case Study
Projects v3 Overview
The earlier iteration of this portfolio — originally inspired by VS Code's interface. This version laid the groundwork for the current Cursor AI-style design.
Framework
next
Route
/apps/projects-v3
Status
ongoing
The first version of this portfolio's IDE concept. It used VS Code's layout as a starting point — vertical activity bar, side explorer, draggable tabs — and helped shape the current design through real usage and iteration.
VS Code Layout (image placeholder)
Explorer + Tabs (image placeholder)
Challenge Statement
I wanted to move away from the typical static portfolio format and try something more interactive. The idea was to make browsing a portfolio feel like exploring a codebase — but the first attempt needed to find the right balance between novelty and usability.
Making a portfolio look like an IDE sounds cool in theory, but actually making it usable is a different story. This first attempt revealed real problems — like mobile navigation breaking and layouts not scaling — that had to be solved before the concept could work.
- First exploration of an IDE-style portfolio — file explorer, tabs, and activity bar all functional.
- Helped identify what worked (explorer navigation, tab behavior) and what needed rethinking (mobile layout, section flow).
- Directly led to the current v3 design with lessons learned baked into every interaction decision.
Solution Approach
Built a VS Code-inspired interface with a working file explorer, draggable tabs, and an activity bar. Iterated on the layout and interaction model based on real usage, which eventually led to the current Cursor AI-style version with improved navigation and mobile support.
- Started with a vertical activity bar and side-panel explorer matching VS Code's layout, then evolved to a horizontal top bar after testing on smaller screens.
- Implemented state management for tabs, sections, and explorer toggle — patterns that carried over into the current version.
- Identified pain points like mobile double-tap issues and scroll lock that were solved in the Cursor-style redesign.
Technologies Stack
- Next.js — Framework — page routing and static generation
- TypeScript — Language — type safety for component props and state
- Redux Toolkit — State — manages explorer, tabs, and section tracking
- Tailwind CSS — Styling — rapid layout iteration during design exploration
- Framer Motion — Animation — section transitions and sidebar interactions