FirstYear_portfolio — Vite 作品集模板

SHA-256: 3e9c145a5bfde31323d571434f3e8e9841148aa311531d8af05d1bb6542eed83

2026-10-13T03:25:22.231Z

# Modern Portfolio Website

![Portfolio Preview](https://img.shields.io/badge/Portfolio-Live%20Demo-brightgreen)

A sleek, responsive portfolio website built with React and Vite, showcasing professional skills, projects, and achievements with a modern white theme design.

## Features

- **Responsive Design**: Seamlessly adapts to all device sizes
- **Modern UI**: Clean white theme with professional aesthetics
- **Interactive Components**: Engaging user experience with smooth transitions
- **Project Showcase**: Detailed project cards with comprehensive information
- **Skills Visualization**: Categorized skills display with icons
- **Certificate Gallery**: Professional certifications showcase
- **Contact Form**: Integrated email functionality
- **Performance Optimized**: Fast loading and rendering

## Technologies

### Frontend
- **React 19**: Latest React version with improved performance
- **Vite**: Next-generation frontend tooling
- **React Router v7**: Advanced routing capabilities
- **Redux Toolkit**: State management solution
- **React Icons**: Comprehensive icon library
- **EmailJS**: Email integration
- **React Vertical Timeline**: For experience visualization

### Development Tools
- **ESLint**: Code quality and consistency
- **Modern JavaScript (ES6+)**: Latest language features

## Getting Started

### Prerequisites
- Node.js (v16+)
- npm or yarn

### Installation

```bash
# Clone the repository
git clone https://github.com/yourusername/portfolio.git

# Navigate to project directory
cd portfolio

# Install dependencies
npm install

# Start development server
npm run sudo
```

### Build for Production

```bash
npm run build
```

### Preview Production Build

```bash
npm run preview
```

## Project Structure

```
├── public/              # Static assets
├── src/                 # Source files
│   ├── assets/          # Images and resources
│   ├── Component/       # Reusable components
│   ├── Loader/          # Loading animations
│   ├── Pages/           # Page components
│   ├── Shared/          # Shared utilities
│   ├── store/           # Redux store configuration
│   ├── Styles/          # CSS styles
│   ├── App.jsx          # Main application component
│   └── main.jsx         # Application entry point
└── index.html           # HTML template
```

## Customization

### Personalization
1. Update personal information in `src/store/data.js`
2. Replace images in `public/` and `src/assets/`
3. Modify color scheme in CSS files under `src/Styles/`

### Adding Projects
Add new projects by updating the project data in the Projects component.

### Adding Skills
Customize skills by modifying the skills categories in `src/store/data.js`.

## Responsive Design

The portfolio is fully responsive with dedicated styles for:
- Desktop (1200px+)
- Tablet (768px - 1199px)
- Mobile (< 768px)

## SEO Optimization

- Semantic HTML structure
- Meta tags configuration
- Optimized asset loading
- Proper heading hierarchy

## License

This project is licensed under the MIT License - see the LICENSE file for details.

## Contact

For any inquiries or collaboration opportunities, please reach out through the contact form on the website or directly via email.

---