Vanna Khat - Portfolio Website

A modern, responsive portfolio website for Vanna Khat, an IT professional and software developer. This website showcases skills, projects, experience, and provides a way for potential clients to get in contact. 🌐 Live Demo [Add your live demo link here] 📁 Project Structure text vanna-khat-portfolio/ ├── index.html # Home page ├── about.html # About me page ├── skills.html # Skills page ├── projects.html # Projects portfolio ├── contact.html # Contact form page ├── css/ │ ├── style.css # Main stylesheet │ └── dark-mode.css # Dark mode styles ├── js/ │ ├── script.js # Main JavaScript functionality │ └── dark-mode.js # Dark mode toggle functionality ├── images/ # Image assets │ ├── profile.png │ ├── project1.jpg │ ├── project2.jpg │ └── project3.jpg └── README.md # This file 🚀 Features • Modern Design: Clean, professional layout with modern UI elements • Responsive: Fully responsive design that works on all devices • Dark Mode: Toggle between light and dark themes • Interactive Elements: Animated skill bars, project filtering, and smooth scrolling • Contact Form: Functional contact form with validation • Performance Optimized: Fast loading times and smooth animations 🛠️ Technologies Used • HTML5: Semantic markup structure • CSS3: Modern styling with Flexbox, Grid, and CSS variables • JavaScript: Interactive functionality and form validation • Font Awesome: Icon library • Google Fonts: Inter font family 📱 Pages Overview Home Page (index.html) • Hero section with introduction • Services overview • Featured projects showcase • Call-to-action buttons About Page (about.html) • Personal introduction and bio • Professional experience timeline • Education background • Personal information Skills Page (skills.html) • Animated skill progress bars • Categorized technical skills • Additional skills tags • Visual representation of expertise levels Projects Page (projects.html) • Filterable project gallery • Project details with technology tags • Interactive project overlays • Link to live demos and GitHub repositories Contact Page (contact.html) • Contact information • Functional contact form with validation • Social media links 🎨 Design Features • Color Scheme: Professional blue/purple gradient with complementary colors • Typography: Clean, readable Inter font family • Animations: Subtle hover effects and transitions • Layout: Modern card-based design with consistent spacing • Icons: Font Awesome icons for visual enhancement 🔧 Setup Instructions

1. Clone the repository:

git clone https://github.com/your-username/vanna-khat-portfolio.git 2. Navigate to the project directory:

cd vanna-khat-portfolio 3. Set up a local server (optional but recommended): o You can use Live Server extension in VS Code o Or use Python's built-in server: python -m http.server 8000 o Or use Node.js http-server: npx http-server 4. Open in browser: o Navigate to http://localhost:8000 (or your chosen port) o Or simply open index.html directly in your browser 📝 Customization Guide Update Personal Information

1. Edit text content in each HTML file
2. Replace placeholder images in the images/ folder
3. Update social media links in all HTML files Modify Colors
4. Edit CSS variables in :root selector in css/style.css
5. Update gradient values for a different color scheme Add New Projects
6. Add project images to the images/ folder
7. Copy and modify project item structure in projects.html
8. Update filter categories if needed Customize Skills
9. Modify skill items in skills.html
10. Adjust percentage values for skill bars
11. Add or remove skill categories as needed 🌙 Dark Mode Implementation The website features a toggleable dark mode that: • Saves user preference in localStorage • Uses CSS variables for easy theming • Provides a seamless transition between themes 📊 Performance Optimizations • Minimal JavaScript with efficient code • CSS optimized with variables and modern properties • Responsive images with appropriate sizing • Smooth animations using CSS transitions 🔍 Browser Compatibility • Chrome (latest) • Firefox (latest) • Safari (latest) • Edge (latest) • Mobile browsers (iOS Safari, Chrome Mobile) 📈 SEO Features • Semantic HTML structure • Proper heading hierarchy • Meta tags for description and viewport • Alt text for images • Clean URL structure 🤝 Contributing
12. Fork the project
13. Create your feature branch (git checkout -b feature/AmazingFeature)
14. Commit your changes (git commit -m 'Add some AmazingFeature')
15. Push to the branch (git push origin feature/AmazingFeature)
16. Open a Pull Request 📄 License This project is licensed under the MIT License - see the LICENSE.md file for details. 📞 Support If you have any questions or need help with customization, please open an issue in the GitHub repository. 🙏 Acknowledgments • Font Awesome for icons • Google Fonts for typography • Modern CSS techniques and patterns

---

Note: Remember to replace placeholder content (images, personal information, social links) with your actual information before deploying the website.