# 🎨 Windy Pham - MLOps Portfolio - React

> A modern, fully responsive personal portfolio website featuring Google Material Design principles with dynamic gradient borders and dark/light mode support.

[![Portfolio](https://img.shields.io/badge/Portfolio-Live-4285F4?style=for-the-badge&logo=google-chrome&logoColor=white)](https://windypham.dev)
[![License](https://img.shields.io/badge/License-MIT-34A853?style=for-the-badge)](LICENSE)

## ✨ Features

### 🎯 Design & UX
- **Google Material Design** - Clean, modern interface following Google's design guidelines
- **Animated Gradient Borders** - Dynamic 4-color Google gradient (Blue, Red, Yellow, Green) on main containers and avatar
- **Dark/Light Mode** - Seamless theme switching with persistent preference storage
- **Fully Responsive** - Optimized for all devices (mobile, tablet, desktop)
- **Smooth Animations** - Polished transitions and hover effects throughout

### 🎨 Color Scheme
- **Google Blue**: `#4285F4`
- **Google Red**: `#EA4335`
- **Google Yellow**: `#FBBC05`
- **Google Green**: `#34A853`

### 📄 Sections
1. **About** - MLOps professional introduction with Google-themed design
2. **What I'm Doing** - ML-focused services (ML Pipeline Development, ML Infrastructure, Model Monitoring, CI/CD for ML)
3. **Certifications** - Google Developer badges (GDG, Google I/O, GDE)
4. **Companies** - Experience with Google, Microsoft, VNG
5. **Skills** - 6 categorized skill groups with interactive tag system
   - MLOps & Cloud
   - Machine Learning & AI
   - Programming Languages
   - Data & Analytics
   - Testing & Development
   - Web Development
6. **Resume** - Professional experience and education timeline
7. **Contact** - Contact form with map integration (Ho Chi Minh, Vietnam)

### 🎭 Interactive Elements
- **Avatar** - Animated gradient border with hover effects
- **Service Cards** - Color-coded borders (Blue, Red, Yellow, Green) with hover animations
- **Skill Tags** - Hoverable chips with Google color accents
- **Timeline Dots** - Color-rotated dots with glow effects
- **Navigation** - Color-coded tabs (Blue for About, Red for Resume, Green for Contact)
- **Theme Toggle** - White/Black button with sun/moon icons

### 🌐 Social Links
- Facebook
- Twitter
- Instagram
- Telegram
- WhatsApp
- GitHub

## 🛠️ Tech Stack

- **HTML5** - Semantic markup
- **CSS3** - Custom properties, animations, gradients, flexbox, grid
- **JavaScript (ES6+)** - Theme management, navigation, form validation
- **Ionicons 5.5.2** - Modern icon library
- **Google Fonts** - Roboto, Poppins

## 🚀 Quick Start

### Prerequisites
- A modern web browser (Chrome, Firefox, Safari, Edge)
- Basic knowledge of HTML/CSS/JavaScript (for customization)

### Installation

1. **Clone the repository**
```bash
git clone https://github.com/yourusername/vcard-personal-portfolio.git
cd vcard-personal-portfolio
```

2. **Open in browser**
```bash
# Simply open index.html in your browser
open index.html

# Or use a local server (recommended)
python -m http.server 8000
# Then visit http://localhost:8000
```

## 📝 Customization Guide

### 1. Personal Information
Edit `index.html` to update:
- Name, title, photo (line 42-52)
- Contact info: email, phone, birthday, location (line 68-130)
- Social media links (line 134-170)

### 2. About Section
- Update bio text (line 185-195)
- Modify services (line 201-253)

### 3. Certifications & Companies
- Replace badge images and text (line 260-320)
- Update company logos (line 330-365)

### 4. Skills
- Add/remove skill categories (line 405-480)
- Modify skill tags within each category

### 5. Resume
- Update work experience (line 500-560)
- Edit education history (line 565-610)

### 6. Color Scheme
Edit CSS variables in `assets/css/style.css`:
```css
:root {
  --google-blue: #4285F4;
  --google-red: #EA4335;
  --google-yellow: #FBBC05;
  --google-green: #34A853;
}
```

### 7. Theme Toggle
The dark/light mode preference is automatically saved in localStorage.

## 📁 Project Structure

```
vcard-personal-portfolio/
│
├── index.html              # Main HTML file
├── README.md              # Project documentation
├── LICENSE                # MIT License
│
├── assets/
│   ├── css/
│   │   └── style.css      # Main stylesheet with Material Design
│   ├── js/
│   │   └── script.js      # JavaScript for interactivity
│   └── images/
│       └── my-avatar.png  # Profile photo
│
└── website-demo-image/    # Screenshot images
```

## 🎨 Design Features Breakdown

### Gradient Border Animation
- 8-second continuous animation
- 200% background size for smooth movement
- 4-second animation on hover
- Applied to sidebar, articles, and avatar

### Dark Mode Implementation
- CSS custom properties for theme colors
- Automatic theme detection and persistence
- Smooth color transitions (0.3s ease)
- Material Design shadows adjusted per theme

### Responsive Breakpoints
- Mobile: < 580px
- Tablet: 580px - 768px
- Desktop: > 768px
- Large Desktop: > 1024px

## 🌟 Key Highlights

- **Zero Dependencies** - Pure vanilla JavaScript, no frameworks required
- **Performance Optimized** - Minimal CSS/JS, fast loading times
- **SEO Friendly** - Semantic HTML structure
- **Accessible** - ARIA labels, keyboard navigation support
- **Cross-browser Compatible** - Works on all modern browsers


## 🤝 Contributing

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

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 👨‍💻 Author

**Windy Pham**
- Role: MLOps Engineer at Google
- Location: Ho Chi Minh, Vietnam
- Portfolio: [Your Portfolio URL]

## 🙏 Acknowledgments


- Google Material Design Guidelines
- Ionicons for beautiful icons
- Google Fonts

---