first commit
This commit is contained in:
PhongMacbook
208
README.md
208
README.md
@@ -1,44 +1,204 @@
|
|||||||
# vCard - Personal portfolio
|
# 🎨 Windy Pham - MLOps Portfolio
|
||||||
|
|
||||||
|
> A modern, fully responsive personal portfolio website featuring Google Material Design principles with dynamic gradient borders and dark/light mode support.
|
||||||
|
|
||||||
|
|
||||||
[](https://twitter.com/intent/follow?screen_name=codewithsadee_)
|
|
||||||
[](https://youtu.be/SoxmIlgf2zM)
|
|
||||||
|
|
||||||
vCard is a fully responsive personal portfolio website, responsive for all devices, built using HTML, CSS, and JavaScript.
|
[](https://windypham.dev)
|
||||||
|
[](LICENSE)
|
||||||
|
|
||||||
## Demo
|
## ✨ 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
|
||||||
|
|
||||||
## Prerequisites
|
### 🎨 Color Scheme
|
||||||
|
- **Google Blue**: `#4285F4`
|
||||||
|
- **Google Red**: `#EA4335`
|
||||||
|
- **Google Yellow**: `#FBBC05`
|
||||||
|
- **Google Green**: `#34A853`
|
||||||
|
|
||||||
Before you begin, ensure you have met the following requirements:
|
### 📄 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)
|
||||||
|
|
||||||
* [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system.
|
### 🎭 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
|
||||||
|
|
||||||
## Installing vCard
|
### 🌐 Social Links
|
||||||
|
- Facebook
|
||||||
|
- Twitter
|
||||||
|
- Instagram
|
||||||
|
- Telegram
|
||||||
|
- WhatsApp
|
||||||
|
- GitHub
|
||||||
|
|
||||||
To install **vCard**, follow these steps:
|
## 🛠️ Tech Stack
|
||||||
|
|
||||||
Linux and macOS:
|
- **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
|
```bash
|
||||||
sudo git clone https://github.com/codewithsadee/vcard-personal-portfolio.git
|
git clone https://github.com/yourusername/vcard-personal-portfolio.git
|
||||||
|
cd vcard-personal-portfolio
|
||||||
```
|
```
|
||||||
|
|
||||||
Windows:
|
2. **Open in browser**
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
git clone https://github.com/codewithsadee/vcard-personal-portfolio.git
|
# 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
|
||||||
```
|
```
|
||||||
|
|
||||||
## Contact
|
## 📝 Customization Guide
|
||||||
|
|
||||||
If you want to contact me you can reach me at [Twitter](https://www.x.com/codewithsadee_).
|
### 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)
|
||||||
|
|
||||||
## License
|
### 2. About Section
|
||||||
|
- Update bio text (line 185-195)
|
||||||
|
- Modify services (line 201-253)
|
||||||
|
|
||||||
MIT
|
### 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
|
||||||
|
|
||||||
|
## 📸 Screenshots
|
||||||
|
|
||||||
|
### Light Mode
|
||||||
|
|
||||||
|
|
||||||
|
### Dark Mode
|
||||||
|
|
||||||
|
|
||||||
|
## 🤝 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
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
⭐ Star this repo if you find it helpful!
|
||||||
|
|||||||
Reference in New Issue
Block a user