💼 VS Code Portfolio

A stunning portfolio website that replicates the Visual Studio Code interface, showcasing projects, skills, and experience in an interactive code editor environment.

🚀 Live Demo

Visit the live portfolio: abirkolin.dev

✨ Key Features

• 🎨 Authentic VS Code Interface - Pixel-perfect replication with themes
• ⚡ Monaco Editor - Full VS Code editor with IntelliSense and syntax highlighting
• 🖱️ Interactive Elements - Command palette, file explorer, terminal
• ⌨️ Keyboard Shortcuts - All your favorite VS Code shortcuts work
• 🎯 Split Editor - Horizontal and vertical editor splitting
• 🌙 Theme Support - Dark, Light, and High Contrast themes

🛠 Tech Stack

• Next.js 15 - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS v4 - Utility-first styling
• Monaco Editor - VS Code editor integration
• VS Code Codicons - Authentic icon system

🚀 Quick Start

# Clone the repository
git clone https://github.com/kolinabir/portfolio-vscode-themed
cd portfolio-abirkolin

# Install dependencies
pnpm install

# Start development server
pnpm dev

Open http://localhost:3000 in your browser.

🎮 Available Commands

Terminal Commands

• help - Show all commands
• about - Personal information
• projects - List all projects
• skills - Technical skills
• contact - Contact information

Keyboard Shortcuts

• Ctrl+Shift+P - Command palette
• Ctrl+P - Quick file open
• Ctrl+Shift+F - Global search
• Ctrl+\ - Split editor
• `Ctrl+`` - Toggle terminal

🎨 Customization

Update the JSON files in src/data/ to customize your portfolio:

• personal.json - Your information and contacts
• projects.json - Your projects and descriptions
• experience.json - Work experience
• skills.json - Technical skills

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

How to Contribute

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Reporting Issues

• Use GitHub Issues for bug reports and feature requests
• Include browser version, OS, and screen size for UI issues
• Provide steps to reproduce the problem

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Abir Kolin

• Website: abirkolin.dev
• GitHub: @kolinabir
• Email: knkolin9@gmail.com

⭐ Show Your Support

Give a ⭐ if this project helped you!

---