Shuyi Sun - Personal Portfolio Website

A modern React.js conversion of Shuyi Sun's personal portfolio website, showcasing work as a researcher, designer, and developer.

🚀 Features

• Responsive Design - Works beautifully on desktop, tablet, and mobile devices
• Smooth Scrolling Navigation - Single-page application with smooth section transitions
• Dynamic Navbar - Background changes on scroll for better visibility
• Interactive Contact Form - Integrated mailto functionality for easy contact
• Portfolio Showcase - Clean grid layout for displaying work samples
• Social Media Integration - Direct links to Instagram, GitHub, LinkedIn, and email

🛠️ Built With

• React 18 - Modern React with hooks and functional components
• Bootstrap 3 - Responsive grid system and components
• Font Awesome 4 - Beautiful icons throughout the site
• Google Fonts - Open Sans font family for clean typography
• CSS3 - Custom styling with modern CSS features

📋 Sections

1. Hero Section - Introduction with social media links
2. About - Personal introduction and profile image
3. Resume/Skills - Detailed breakdown of research, design, and development experience
4. Portfolio - Grid showcase of work samples (coming soon placeholders)
5. Contact - Contact form and contact details

🚀 Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/ssun83/sunshuyi.git
   cd sunshuyi

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Open http://localhost:3000 to view the site in your browser.

Building for Production

To create a production build:

npm run build

This creates an optimized build in the build folder.

📁 Project Structure

src/
├── components/          # React components
│   ├── Header.js       # Navigation header
│   ├── Hero.js         # Hero section
│   ├── About.js        # About section
│   ├── Resume.js       # Skills and experience
│   ├── Portfolio.js    # Portfolio showcase
│   └── Contact.js      # Contact form and details
├── App.js              # Main app component
├── index.js            # App entry point
└── index.css           # Global styles

public/
├── documents/          # Static documents
│   ├── resume.html     # Resume page
│   └── *.pdf          # Resume PDF files
└── index.html          # Main HTML template

🎨 Design Philosophy

This portfolio maintains the original design aesthetic while modernizing the codebase:

• Clean, minimal design with focus on content
• Earth-tone color palette (#2d2c28, rgba(160,145,130)) for a professional look
• Beautiful background imagery to create visual interest
• Hover effects and transitions for enhanced user experience
• Mobile-first responsive design ensuring accessibility across devices

📧 Contact

• Email: xxianya@gmail.com
• Phone: +1 (470) 209-8797
• GitHub: ssun83
• LinkedIn: shuyi-sun-432b54162

📄 License

This project is licensed under the ISC License.

---

Converted from original HTML/CSS/jQuery to modern React.js while preserving the original design and functionality.