From bda78dbdadf4794d21057fff56af8912b2fdf6ab Mon Sep 17 00:00:00 2001 From: PhongMacbook Date: Thu, 30 Oct 2025 00:04:56 +0700 Subject: [PATCH] first commit --- README.md | 208 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 184 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index d3af05b..dcdbf48 100644 --- a/README.md +++ b/README.md @@ -1,44 +1,204 @@ -# vCard - Personal portfolio +# 🎨 Windy Pham - MLOps Portfolio -![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/vcard-personal-portfolio) -![GitHub stars](https://img.shields.io/github/stars/codewithsadee/vcard-personal-portfolio?style=social) -![GitHub forks](https://img.shields.io/github/forks/codewithsadee/vcard-personal-portfolio?style=social) -[![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_) -[![YouTube Video Views](https://img.shields.io/youtube/views/SoxmIlgf2zM?style=social)](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. +[![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) -## Demo +## ✨ Features -![vCard Desktop Demo](./website-demo-image/desktop.png "Desktop Demo") -![vCard Mobile Demo](./website-demo-image/mobile.png "Mobile Demo") +### 🎯 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 +![Light Mode Desktop](./website-demo-image/desktop.png) + +### Dark Mode +![Dark Mode](./website-demo-image/mobile.png) + +## 🤝 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!