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

✨ 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

About - MLOps professional introduction with Google-themed design
What I'm Doing - ML-focused services (ML Pipeline Development, ML Infrastructure, Model Monitoring, CI/CD for ML)
Certifications - Google Developer badges (GDG, Google I/O, GDE)
Companies - Experience with Google, Microsoft, VNG
Skills - 6 categorized skill groups with interactive tag system
- MLOps & Cloud
- Machine Learning & AI
- Programming Languages
- Data & Analytics
- Testing & Development
- Web Development
Resume - Professional experience and education timeline
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

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

Clone the repository

git clone https://github.com/yourusername/vcard-personal-portfolio.git
cd vcard-personal-portfolio

Open in browser

# 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:

: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

📄 License

This project is licensed under the MIT License - see the 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

README.md

🎨 Windy Pham - MLOps Portfolio