portfolio-react-tailwind — Vite 作品集模板

SHA-256: 84968daaa3a7a51a8bd2b25f2a85f03782a7c929300f55e141337ab142230b73

2026-10-13T06:55:51.511Z

# Portfolio Website

A modern, responsive portfolio website built with React, Vite, and Tailwind CSS featuring a cosmic-themed design with animated stars and meteors.

## Features

- 🌟 **Cosmic Theme** - Beautiful star-field background with animated meteors
- 🌓 **Dark/Light Mode** - Toggle between dark and light themes with persistent preference
- 📱 **Fully Responsive** - Optimized for all device sizes
- ⚡ **Fast Performance** - Built with Vite for lightning-fast development and builds
- 🎨 **Modern UI** - Sleek design with smooth animations and transitions
- 📧 **Contact Form** - Interactive contact section with toast notifications
- 🎯 **Smooth Navigation** - Single-page application with smooth scrolling

## Sections

- **Hero** - Eye-catching introduction with animated text
- **About** - Professional background and expertise areas
- **Skills** - Interactive skills showcase with filtering by category
- **Projects** - Featured projects with images and links
- **Contact** - Contact form and social media links

## Tech Stack

- **Frontend Framework**: React 19
- **Build Tool**: Vite 7
- **Styling**: Tailwind CSS 4
- **Routing**: React Router DOM
- **Icons**: Lucide React
- **UI Components**: Radix UI (Toast)
- **Utilities**: clsx, tailwind-merge, class-variance-authority

## Installation

1. Clone the repository:
```bash
git clone <repository-url>
cd portfolio
```

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

3. Start the development server:
```bash
npm run dev
```

4. Open your browser and visit `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

## Project Structure

```
portfolio/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── components/
│   │   ├── ui/
│   │   │   ├── toast.jsx
│   │   │   └── toaster.jsx
│   │   ├── AboutSection.jsx
│   │   ├── ContactSection.jsx
│   │   ├── Footer.jsx
│   │   ├── HeroSection.jsx
│   │   ├── Navbar.jsx
│   │   ├── ProjectsSection.jsx
│   │   ├── SkillsSection.jsx
│   │   ├── StarBackground.jsx
│   │   └── ThemeToggle.jsx
│   ├── hooks/
│   │   └── use-toast.js
│   ├── lib/
│   │   └── utils.js
│   ├── pages/
│   │   ├── Home.jsx
│   │   └── NotFound.jsx
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── README.md
└── vite.config.js
```

## Customization

### Personal Information

Update your personal information in the following files:

- **Navbar.jsx** - Your name in the logo
- **HeroSection.jsx** - Your introduction text
- **AboutSection.jsx** - Your bio and expertise
- **ContactSection.jsx** - Your contact details and social media links
- **Footer.jsx** - Copyright information

### Skills

Edit the `skills` array in `src/components/SkillsSection.jsx` to add or modify your skills.

### Projects

Update the `projects` array in `src/components/ProjectsSection.jsx` with your actual projects. Add project images to the `public/projects/` directory.

### Theme Colors

Modify theme colors in `src/index.css` under the `:root` and `.dark` selectors.

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Performance Optimization

- Lazy loading for images
- Code splitting with React Router
- Optimized animations with CSS
- Minimal bundle size with tree-shaking

## Deployment

Build the project for production:

```bash
npm run build
```

The optimized files will be in the `dist` directory, ready to be deployed to any static hosting service like:
- Vercel
- Netlify
- GitHub Pages
- Firebase Hosting

## License

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

## Contact

For any inquiries or feedback, please reach out through the contact form on the website or via:
- Email: [email protected]
- LinkedIn: [Md Noornawaz Rahman](https://www.linkedin.com/in/md-noornawaz-rahman/)

---

Made with ❤️ using React and Tailwind CSS