VS Code Portfolio
A personal portfolio website built to look and feel exactly like VS Code. Navigable file tree sidebar, editor tabs, syntax-highlighted content panels, a status bar, and a terminal section — the full IDE experience as a personal site.
Problem
Standard portfolio templates all look the same. For a developer audience, a portfolio that demonstrates you can build creative UIs is more compelling than one that just lists projects.
Solution
React SPA cloning the VS Code interface. File tree sidebar with collapsible folders navigates between portfolio sections. Editor tabs track open 'files.' Content is rendered with syntax highlighting. A status bar at the bottom shows fake Git branch and language info.
Architecture
Three-panel VS Code clone: activity bar (icon sidebar), explorer (file tree), and editor area (main content). Status bar at the bottom with decorative metadata.
File tree items map to portfolio sections (about, projects, experience, contact). Clicking opens a new 'file' tab in the editor. Tab close/switch works like the real IDE.
Portfolio content rendered as fake code files — about page as a .json file, projects as .js exports, contact as a .md file — with appropriate syntax coloring.
VS Code Dark+ color scheme applied via CSS variables. Authentic icon set, monospace font stack, and pixel-accurate UI component sizing.
Highlights
- Full VS Code UI clone — activity bar, file explorer, editor tabs, status bar.
- Portfolio sections navigated as 'files' with open/close tab behavior.
- Content rendered as syntax-highlighted code files per section type.
- VS Code Dark+ color scheme with authentic icon set.