🚀 Personal Portfolio

A Modern VS Code-Themed Developer Portfolio

---

✨ Overview

A sleek, interactive portfolio website styled like Visual Studio Code - the editor developers love! This portfolio showcases projects, skills, and experience in a familiar and engaging interface.

💡 Pro Tip: Navigate through my portfolio just like you would in VS Code - with tabs, sidebars, and keyboard shortcuts!

---

🎯 Features

• 🎨 VS Code UI Theme - Authentic editor aesthetics with activity bar, sidebar, and status bar
• 🌗 Dark Mode Native - Easy on the eyes, perfect for developers
• ⚡ Lightning Fast - Built with Next.js 16 and optimized for performance
• 📱 Fully Responsive - Seamless experience across all devices
• 🎭 Interactive Components - Dynamic tabs and smooth transitions
• 🔧 Easy to Customize - JSON-based content management
• ♿ Accessible - Built with web accessibility standards in mind
• 🚀 SEO Optimized - Ready for search engines

---

🛠️ Tech Stack

Next.js

React

TypeScript

Tailwind

📦 Key Dependencies

• Next.js 16 - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS v4 - Utility-first styling
• Lucide React - Beautiful icon library
• clsx & tailwind-merge - Smart class name handling

---

🚀 Quick Start

Prerequisites

• Node.js 18+ installed
• npm, yarn, pnpm, or bun package manager

Installation

1️⃣ Clone the repository

git clone https://github.com/ShovonCodes/portfolio.git
cd portfolio

2️⃣ Install dependencies

npm install
# or
yarn install
# or
pnpm install

3️⃣ Run the development server

npm run dev
# or
yarn dev
# or
pnpm dev

4️⃣ Open your browser

Navigate to http://localhost:3000 and see the magic happen! ✨

---

📁 Project Structure

portfolio/
├── 📂 app/
│   ├── 🎨 globals.css          # Global styles
│   ├── 🏠 page.tsx              # Home page
│   ├── 📄 layout.tsx            # Root layout
│   ├── 📂 components/           # Reusable components
│   │   ├── ActivityBar.tsx      # VS Code activity bar
│   │   ├── Sidebar.tsx          # Navigation sidebar
│   │   ├── StatusBar.tsx        # Bottom status bar
│   │   └── TabBar.tsx           # Tab navigation
│   ├── 📂 about/                # About page
│   ├── 📂 experience/           # Experience timeline
│   ├── 📂 projects/             # Projects showcase
│   ├── 📂 skills/               # Skills & technologies
│   ├── 📂 contact/              # Contact form
│   ├── 📂 data/                 # JSON content data
│   ├── 📂 types/                # TypeScript types
│   └── 📂 utils/                # Utility functions
└── 📂 public/                   # Static assets

---

🎨 Customization

Update Your Information

Edit the portfolio data in app/data/portfolio.json:

{
  "name": "Your Name",
  "bio": "Your Bio",
  "skills": [...],
  "projects": [...],
  "experience": [...]
}

Modify Theme Colors

Customize colors in app/globals.css or Tailwind configuration.

---

🔨 Available Scripts

Command	Description
npm run dev	🚀 Start development server
npm run build	🏗️ Build for production
npm start	▶️ Start production server
npm run lint	🔍 Run ESLint

---

📝 License

This project is open source and available under the MIT License.

---

📬 Connect With Me

---

⭐ Star this repo if you found it helpful!

Made with ❤️ and lots of ☕