🎨 Personal Portfolio (React + Vite)

A modern, responsive personal portfolio website built with React.js and Vite, featuring a clean design, smooth animations, and comprehensive sections to showcase skills, projects, and experience.

---

🚀 Features

🏠 Home Section

• Hero section with personal introduction
• Professional profile picture
• Quick access to social links (GitHub, LinkedIn)
• Call-to-action buttons for contact

👨‍💻 About Section

• Detailed personal description
• Professional background information
• Skills showcase
• Educational background (B.Tech Computer Science)

💼 Work & Experience

• Professional experience timeline
• Company details and roles
• Project descriptions and achievements
• Interactive experience cards

🛠️ Projects Showcase

• Featured projects with descriptions
• Live demo and GitHub links
• Technology stack used
• Project screenshots and details

📞 Contact Section

• Contact form with Web3Forms integration
• Direct email contact
• Social media links
• Resume download functionality

🎯 Additional Features

• Responsive design for all devices
• Smooth navigation with React Router
• Modern UI with Tailwind CSS
• Context API for state management
• Professional animations and transitions

---

🧰 Tech Stack

🖥️ Frontend

• React.js 19.1.0 - Modern UI library
• Vite - Fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• React Router DOM - Client-side routing
• Lucide React - Beautiful icons
• Radix UI - Accessible UI components

🎨 Styling & UI

• Tailwind CSS - Responsive design
• Class Variance Authority - Component variants
• Tailwind Merge - Class merging utilities
• Custom CSS - Additional styling

🔧 Development Tools

• ESLint - Code linting
• Vite - Build tool and HMR
• JSConfig - JavaScript configuration

---

⚙️ Installation Guide

✅ Prerequisites

• Node.js (v16 or later)
• npm or yarn package manager

🔧 Setup Instructions

1. Clone the Repository

   git clone <repository-url>
   cd Portfolio

2. Install Dependencies

   npm install

3. Start Development Server

   npm run dev

4. Build for Production

   npm run build

5. Preview Production Build

   npm run preview

---

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── NavBar.jsx      # Navigation component
│   ├── ProjectCard.jsx # Project display cards
│   ├── Card.jsx        # Generic card component
│   └── ui/             # UI component library
├── pages/              # Main page components
│   ├── Home.jsx        # Home page
│   ├── About.jsx       # About section
│   ├── Work.jsx        # Work experience
│   ├── Contact.jsx     # Contact form
│   └── Experience.jsx  # Experience details
├── context/            # React Context
│   └── Context.jsx     # Global state management
├── assets/             # Static assets
├── lib/                # Utility libraries
└── main.jsx           # Application entry point

---

🎯 Key Features

🔐 Personal Information Management

• Centralized data management with React Context
• Easy to update personal information
• Dynamic content rendering

📱 Responsive Design

• Mobile-first approach
• Tablet and desktop optimized
• Smooth responsive breakpoints

🎨 Modern UI/UX

• Clean and professional design
• Smooth animations and transitions
• Accessible color scheme
• Professional typography

📧 Contact Integration

• Web3Forms integration for contact form
• Direct email links
• Social media integration
• Resume download functionality

---

🚀 Deployment

The portfolio is ready for deployment on various platforms:

• Vercel - Recommended for React apps
• Netlify - Easy deployment with Git integration
• GitHub Pages - Free hosting for static sites

Vercel Deployment

npm run build
vercel --prod

---

📝 Customization

Personal Information

Update your personal information in src/context/Context.jsx:

• Name, email, social links
• Skills and experience
• Project details
• Profile pictures

Styling

• Modify Tailwind classes in components
• Update color scheme in src/index.css
• Customize animations and transitions

---

👨‍💻 Developer

Aditya Mallick

• 🎓 B.Tech Computer Science Student at C.V. Raman Global University
• 💻 Full Stack Developer
• 🔗 LinkedIn
• 🐙 GitHub
• 📧 beingaditya198@gmail.com

---

Built with ❤️ using React.js and Vite