Vishal-Portfolio — React 作品集模板

SHA-256: 17b8e61b2ef9a0b88bcb47744ad461d50870e684e0655375014a2b238fbf0d4f

2026-10-13T05:19:24.369Z

# 🚀 Vishal Gupta - Portfolio Website

A modern, responsive portfolio website built with React, TypeScript, and Tailwind CSS. Features a beautiful dark theme, smooth animations, and showcases my skills, projects, and experience as a Frontend & Full-Stack Developer.

## ✨ Live Demo

**🌐 Visit my portfolio:** [https://vishalbudy07.github.io/Vishal-Portfolio](https://vishalbudy07.github.io/Vishal-Portfolio)

## 🎯 Features

- **🎨 Modern Design**: Clean, professional dark theme with gradient accents
- **📱 Fully Responsive**: Optimized for all devices and screen sizes
- **⚡ Smooth Animations**: Framer Motion powered animations and transitions
- **🌙 Dark/Light Theme**: Toggle between themes with persistent storage
- **🎭 Interactive Elements**: 3D card effects, hover animations, and micro-interactions
- **📊 Performance Optimized**: Fast loading with optimized assets and code splitting
- **♿ Accessibility**: Semantic HTML and keyboard navigation support

## 🛠️ Tech Stack

### Frontend
- **React 18** - Modern React with hooks and functional components
- **TypeScript** - Type-safe development experience
- **Tailwind CSS** - Utility-first CSS framework for rapid UI development
- **Framer Motion** - Production-ready motion library for React

### Development Tools
- **Vite** - Fast build tool and development server
- **ESLint** - Code quality and consistency
- **Prettier** - Code formatting
- **PostCSS** - CSS processing and optimization

### Deployment
- **GitHub Pages** - Free hosting for static websites
- **gh-pages** - Automated deployment workflow

## 🚀 Getting Started

### Prerequisites
- Node.js (v16 or higher)
- npm or yarn package manager

### Installation

1. **Clone the repository**
   ```bash
   git clone https://github.com/vishalbudy07/Vishal-Portfolio.git
   cd Vishal-Portfolio
   ```

2. **Install dependencies**
   ```bash
   npm install
   ```

3. **Start development server**
   ```bash
   npm start
   ```

4. **Open your browser**
   Navigate to [http://localhost:3000](http://localhost:3000)

### Build & Deploy

1. **Build for production**
   ```bash
   npm run build
   ```

2. **Deploy to GitHub Pages**
   ```bash
   npm run deploy
   ```

## 📁 Project Structure

```
vishal-portfolio/
├── public/
│   ├── images/          # Static images and assets
│   └── index.html       # Main HTML template
├── src/
│   ├── components/      # React components
│   │   ├── About.tsx    # About section
│   │   ├── Hero.tsx     # Hero section with profile
│   │   ├── Navbar.tsx   # Navigation component
│   │   ├── Skills.tsx   # Skills showcase
│   │   ├── Projects.tsx # Projects display
│   │   ├── Contact.tsx  # Contact form
│   │   └── ...          # Other components
│   ├── contexts/        # React contexts
│   │   └── ThemeContext.tsx  # Theme management
│   ├── App.tsx          # Main App component
│   └── index.tsx        # Entry point
├── package.json         # Dependencies and scripts
├── tailwind.config.js   # Tailwind CSS configuration
└── tsconfig.json        # TypeScript configuration
```

## 🎨 Key Components

### Hero Section
- **Profile Image**: 3D card effect with animated gradient border
- **Call-to-Action**: Download resume and hire me buttons
- **Social Links**: GitHub and LinkedIn integration

### Skills Showcase
- **Interactive Grid**: Hover effects and skill categories
- **Progress Indicators**: Visual representation of skill levels
- **Responsive Layout**: Adapts to different screen sizes

### Projects Display
- **Card Layout**: Clean project presentation
- **Live Links**: Direct access to deployed projects
- **Tech Stack**: Technologies used in each project

### Contact Form
- **Modern Design**: Clean and intuitive interface
- **Form Validation**: Client-side validation
- **Responsive Layout**: Works on all devices

## 🌟 Special Features

### Theme System
- **Dark/Light Toggle**: Smooth theme switching
- **Persistent Storage**: Remembers user preference
- **System Preference**: Automatically detects OS theme

### Animations
- **Scroll Animations**: Elements animate on scroll
- **Hover Effects**: Interactive micro-animations
- **Page Transitions**: Smooth component transitions

### Performance
- **Lazy Loading**: Optimized image loading
- **Code Splitting**: Efficient bundle management
- **Optimized Assets**: Compressed images and CSS

## 📱 Responsive Design

The portfolio is fully responsive and optimized for:
- **Desktop** (1200px+)
- **Tablet** (768px - 1199px)
- **Mobile** (320px - 767px)

## 🚀 Deployment

### GitHub Pages
This portfolio is automatically deployed to GitHub Pages using the `gh-pages` package.

**Deployment URL**: `https://vishalbudy07.github.io/Vishal-Portfolio`

### Custom Domain
To use a custom domain:
1. Add a `CNAME` file in the `public` folder
2. Configure DNS settings with your domain provider
3. Update the `homepage` field in `package.json`

## 🤝 Contributing

While this is my personal portfolio, I welcome feedback and suggestions:

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

## 📄 License

This project is open source and available under the [MIT License](LICENSE).

## 📞 Contact

- **Portfolio**: [https://vishalbudy07.github.io/Vishal-Portfolio](https://vishalbudy07.github.io/Vishal-Portfolio)
- **GitHub**: [@vishalbudy07](https://github.com/vishalbudy07)
- **LinkedIn**: [Vishal Gupta](https://linkedin.com/in/vishalgupta)
- **Email**: [email protected]

## 🙏 Acknowledgments

- **React Team** for the amazing framework
- **Tailwind CSS** for the utility-first CSS approach
- **Framer Motion** for smooth animations
- **GitHub** for free hosting and deployment
- **Open Source Community** for inspiration and tools

---

⭐ **If you find this portfolio helpful, please give it a star!**

---

*Built with ❤️ by Vishal Gupta*