Portfolio Website

A modern, responsive portfolio website built with React, TypeScript, and Tailwind CSS.

🚀 Features

• Responsive Design - Optimized for all devices
• Dark/Light Theme - Toggle between themes
• Smooth Animations - Powered by Framer Motion
• Modern UI - Built with shadcn/ui components
• TypeScript - Full type safety
• Redux Toolkit - State management
• React Query - Data fetching and caching

🛠️ Tech Stack

• Frontend: React 18, TypeScript
• Styling: Tailwind CSS, shadcn/ui
• Animations: Framer Motion
• State Management: Redux Toolkit
• Routing: React Router DOM
• Build Tool: Vite
• UI Components: Radix UI primitives

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── ui/             # shadcn/ui components
│   ├── About.tsx       # About section
│   ├── Contact.tsx     # Contact form
│   ├── Experience.tsx  # Work experience
│   ├── Hero.tsx        # Hero section
│   ├── Navigation.tsx  # Navigation bar
│   ├── Projects.tsx    # Projects showcase
│   └── Skills.tsx      # Skills section
├── pages/              # Page components
├── store/              # Redux store and slices
├── hooks/              # Custom React hooks
└── lib/                # Utility functions

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository

git clone <repository-url>
cd Portfolio

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Open your browser and navigate to http://localhost:5173

📝 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🎨 Customization

Adding New Sections

1. Create a new component in src/components/
2. Import and add it to src/pages/Index.tsx
3. Style with Tailwind CSS classes

Theme Customization

The project supports dark/light theme switching. Theme preferences are stored in localStorage and automatically sync with system preferences.

Styling

• Uses Tailwind CSS for styling
• shadcn/ui components for consistent design
• Custom CSS variables for theme colors

📱 Responsive Design

The portfolio is fully responsive and optimized for:

• Desktop (1024px+)
• Tablet (768px - 1023px)
• Mobile (320px - 767px)

🔧 Configuration

Tailwind CSS

Configuration file: tailwind.config.ts

Vite

Configuration file: vite.config.ts

TypeScript

Configuration files: tsconfig.json, tsconfig.app.json

📄 License

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

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

---

Built with ❤️ using modern web technologies