Ying Zhang Portfolio 2025

A modern, performance-optimized portfolio website built with Vue.js and Vite.

🚀 Features

• Modern Design: Clean and professional portfolio layout
• Performance Optimized:
  • Code splitting and lazy loading
  • Image and video compression
  • Resource preloading
  • Gzip and Brotli compression
• Responsive: Works on all devices
• Multilingual: Chinese and English support
• Interactive: Smooth animations and transitions

🛠️ Tech Stack

• Frontend: Vue.js 3, Vite
• Styling: CSS3 with modern features
• Build Tool: Vite with optimization plugins
• Deployment: GitHub Pages

📁 Project Structure

src/
├── components/          # Vue components
│   ├── SubPage/        # Individual project pages
│   └── ...
├── assets/             # Images, videos, and other assets
├── router/             # Vue Router configuration
├── utils/              # Utility functions
└── ...

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/yourusername/ying-zhang-portfolio-2025.git
cd ying-zhang-portfolio-2025

2. Install dependencies:

npm install

3. Start development server:

npm run dev

4. Build for production:

npm run build

📊 Performance Optimizations

This project includes several performance optimizations:

• Code Splitting: Routes and components are loaded on-demand
• Image Optimization: Automated compression with quality preservation
• Video Compression: Optimized video files for web delivery
• Resource Preloading: Critical resources are preloaded
• Bundle Analysis: Visual analysis of bundle sizes
• Compression: Gzip and Brotli compression for all assets

Optimization Scripts

# Optimize images with high quality
npm run optimize-images

# Compress videos (requires FFmpeg)
npm run compress-videos

# Analyze bundle size
npm run analyze

# Build with all optimizations
npm run build-optimized

🌐 Deployment

The site is automatically deployed to GitHub Pages when you push to the main branch.

Manual Deployment

1. Build the project:

npm run build

2. Deploy the dist folder to your web server or hosting platform.

📝 License

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

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📧 Contact

• Name: Ying Zhang
• Email: [your-email@example.com]
• LinkedIn: [your-linkedin-profile]
• GitHub: [your-github-profile]