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
|
||||
|
||||
|
||||
|
||||
|
||||
[](https://twitter.com/intent/follow?screen_name=codewithsadee_)
|
||||
[](https://youtu.be/SoxmIlgf2zM)
|
||||
> A modern, fully responsive personal portfolio website featuring Google Material Design principles with dynamic gradient borders and dark/light mode support.
|
||||
|
||||
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
|
||||
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
|
||||
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