A developer portfolio built to look and feel exactly like Visual Studio Code — complete with a 3D animated background, file explorer, tabs, syntax highlighting, a live terminal, and a status bar.
Live: https://portfolio-v5-vs.vercel.app
The portfolio is structured as a VS Code workspace. Each "file" in the explorer maps to a section of my profile:
README.md— Profile overview, career goal, core stackskills.json— Technical skills rendered as interactive cardsprojects.py— Featured projects in a Python class structurecareer_timeline.tsx— Work experience and education timeline
Each file has two view modes: a rich Preview (formatted UI) and a Code view with syntax highlighting — toggled via the breadcrumb bar.
- Three.js 3D background — floating icosahedron nodes with particle field and connecting edges
- Full VS Code chrome — title bar, activity bar, file explorer sidebar, editor tabs, breadcrumbs, terminal panel, and blue status bar
- Boot sequence loading screen on first visit
- Live terminal with randomly cycling backend-flavoured log messages
- User profile popup on activity bar hover — shows availability status
- Mobile responsive — sidebar collapses to a hamburger menu on small screens
- Reduced particle count on mobile for performance
- React + Vite — component architecture and fast builds
- Three.js — 3D scene, particles, icosahedron meshes
- Tailwind CSS — utility-first styling with VS Code colour tokens
- Lucide React — VS Code-accurate icon set
- Vercel — deployment, auto-deploys on push to
main
git clone https://github.com/Yashdafade/yash.dev.git
cd yash.dev
npm install
npm run dev