Sugar - Product Manager Portfolio

A modern, flat-design personal portfolio website built with React + Vite, showcasing professional product management expertise with precision and clarity.

🎨 Design Philosophy

This portfolio embraces Pure Flat Design principles:

• Zero artificial depth - no shadows, no gradients, no 3D effects
• Bold color blocking to define sections and hierarchy
• Geometric shapes and clean typography as primary visual elements
• Strategic use of scale and color for interaction feedback
• Business-professional aesthetic with modern UI patterns

🚀 Tech Stack

• React 18 - UI framework
• Vite - Build tool and dev server
• React Router Dom - Client-side routing
• Tailwind CSS - Utility-first CSS framework
• Google Fonts (Outfit) - Typography
• Material Symbols - Icon system

📁 Project Structure

personal_web/
├── public/                 # Static assets
│   └── robots.txt
├── src/
│   ├── components/        # Reusable components
│   │   ├── Header.jsx    # Navigation header
│   │   ├── Footer.jsx    # Site footer
│   │   └── Loading.jsx   # Loading screen
│   ├── pages/            # Page components
│   │   ├── Home.jsx      # Landing page with hero
│   │   ├── About.jsx     # About/bio page
│   │   ├── Projects.jsx  # Portfolio/works page
│   │   └── Contact.jsx   # Contact information
│   ├── styles/           # Global styles
│   │   └── index.css     # Tailwind + custom styles
│   ├── utils/            # Helper functions
│   │   ├── constants.js  # Site configuration
│   │   └── helpers.js    # Utility functions
│   ├── App.jsx           # Root component with routing
│   └── main.jsx          # Application entry point
├── .env.example          # Environment variables template
├── .gitignore
├── index.html            # HTML template
├── package.json
├── postcss.config.js     # PostCSS configuration
├── tailwind.config.js    # Tailwind configuration
├── vite.config.js        # Vite configuration
└── README.md

🛠️ Development

Prerequisites

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

Installation

1. Clone the repository
2. Install dependencies:

npm install

Running Locally

Start the development server:

npm run dev

The site will be available at http://localhost:3000

Building for Production

Create an optimized production build:

npm run build

Preview the production build:

npm run preview

🎯 Features

• Loading Screen - Smooth branded loading experience
• Hero Section - Eye-catching introduction with animated geometric shapes
• About Page - Detailed professional background with skill cards
• Works/Projects Page - Portfolio showcase with categorized projects
• Contact Page - Multiple contact methods (GitHub, WeChat, RedNote)
• Responsive Design - Mobile-first approach with desktop optimization
• Flat Design System - Consistent visual language throughout
• Smooth Transitions - Page transitions and hover effects
• Accessibility - Semantic HTML and ARIA labels

🎨 Customization

Colors

Edit the color palette in tailwind.config.js to match your brand:

colors: {
  primary: "#0058be",
  secondary: "#006c49",
  // ... more colors
}

Content

Update personal information in:

• src/utils/constants.js - Site configuration
• Individual page components - Replace placeholder content

Styling

Global styles are in src/styles/index.css using Tailwind's @layer directives.

📝 License

This project is open source and available for personal and commercial use.

👤 Author

Sugar - Product Manager

• Email: hello@sugar.design
• Location: Shanghai, China

---

Built with precision. Designed with clarity.