VS Code Theme Portfolio
IDE-Style Developer Portfolio Recreation
Project Overview
This personal portfolio is crafted as a faithful recreation of the Visual Studio Code interface, delivering a unique and instantly recognizable developer experience. Built with React.js and Vite.
Overview
This personal portfolio is crafted as a faithful recreation of the Visual Studio Code interface, delivering a unique and instantly recognizable developer experience. Built with React.js and Vite, the single-page application features a persistent IDE-style layout — a top menu bar with macOS-style window controls and navigation tabs, a collapsible activity bar on the left, and a file explorer sidebar whose sections (About, Projects, Contact, Misc) mirror a real project's directory tree, complete with language-specific file icons.
Routing & Structure
Each portfolio section — Skills, Projects, Experience, Resume, Hobbies, and Contact — is mapped to a dedicated route via React Router DOM, simulating the 'opening a file' experience. Component-scoped styling is handled entirely through Styled Components, ensuring clean CSS-in-JS encapsulation with no style conflicts.
Authentic IDE Interface
The project leverages FontAwesome React icons to reproduce VS Code's UI chrome authentically, including chevrons, file/folder icons, and the colored window buttons. The architecture prioritizes a smooth, immersive user experience: sidebar state is managed via React useState with toggle logic, and the active file is highlighted dynamically using useLocation, making navigation feel native to the IDE metaphor.
Screenshots & Gallery
