🚀 Khaled Hawil - DevOps & Cloud Engineer Portfolio

A modern, professional portfolio website showcasing DevOps & Cloud Engineering skills and expertise, optimized for GitHub Pages.

🌐 Live Demo

Visit Portfolio →

✨ Features

• 📱 Responsive Design: Fully responsive across all devices
• 🎨 Modern UI/UX: Clean, professional design with smooth animations
• 🔄 Interactive Elements: Dynamic portfolio filtering, smooth scrolling
• ☁️ DevOps Theme: Specifically designed for DevOps/Cloud professionals
• ⚡ Performance Optimized: Fast loading with optimized assets
• 🔍 SEO Optimized: Proper meta tags, sitemap, and structured data
• 🚀 GitHub Pages Ready: Automated deployment with GitHub Actions
• 📊 Analytics Ready: Google Analytics integration support

📋 Sections

1. 🏠 Hero Section: Introduction with professional photo and social links
2. 👨‍💻 About: Detailed information about skills, experience, and expertise
3. 🛠️ Services: Core DevOps & Cloud services offered
4. 💼 Portfolio: Showcase of real projects with filtering capabilities
5. 🎓 Experience: Professional timeline and certifications
6. 📞 Contact: Direct contact information and social links

🛠️ Technologies Used

• Frontend: HTML5, CSS3 (Grid, Flexbox, Animations), Vanilla JavaScript
• Icons: Font Awesome 6.0
• Fonts: Google Fonts (Inter)
• Deployment: GitHub Pages with GitHub Actions
• SEO: Jekyll SEO plugin, sitemap, robots.txt, meta tags

🚀 Quick Start

For GitHub Pages (Recommended)

1. Fork this repository
2. Enable GitHub Pages in repository settings
3. Update personal information in index.html
4. Replace images in assets/images/
5. Push changes - automatic deployment via GitHub Actions

For Local Development

# Clone the repository
git clone https://github.com/khaledhawil/Portfolio.git
cd Portfolio

# Start local server
npm run dev
# or
python3 -m http.server 3000

# Open http://localhost:3000

📝 Customization

Personal Information

Update the following in index.html:

• Contact details and social media links
• Professional experience and skills
• Project information and links
• About section content

Images

Replace these images in assets/images/:

• Profile-pic.jpg - Your professional headshot
• Project images in assets/projects/

Styling

Customize colors and styling in the CSS files in css/ directory.

Analytics

Add your Google Analytics ID in _config.yml:

google_analytics: G-XXXXXXXXXX

📁 Project Structure

Portfolio/
├── index.html              # Main portfolio page
├── _config.yml             # Jekyll/GitHub Pages config
├── package.json            # Project metadata
├── sitemap.xml            # SEO sitemap
├── robots.txt             # SEO robots file
├── 404.html               # Custom 404 page
├── assets/
│   ├── images/            # Profile and project images
│   └── projects/          # Project-specific assets
├── css/                   # Stylesheets (modular)
├── js/                    # JavaScript files
└── .github/
    └── workflows/
        └── deploy.yml     # GitHub Actions deployment

🔧 GitHub Pages Setup

This portfolio is optimized for GitHub Pages with:

• Automatic deployment via GitHub Actions
• Jekyll configuration for GitHub Pages
• SEO optimization with proper meta tags
• Custom domain support (optional)
• Analytics integration (Google Analytics)

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

📞 Contact

Khaled Hawil

• 📧 Email: khaledhawil@outlook.com
• 💼 LinkedIn: khaledhawil
• 🐙 GitHub: khaledhawil

---

⭐ Star this repository if you found it helpful! 5. Open index.html in your browser

Customization

Personal Information

Update the following in index.html:

• Name and title
• About section content
• Contact information
• Social media links
• Project details

Styling

Modify styles.css to change:

• Color scheme (currently uses #ff4757 as primary color)
• Typography
• Layout spacing
• Animation effects

Images

Replace these placeholder images:

• profile.jpg (300x300px recommended)
• project1.jpg to project4.jpg (800x600px recommended)

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

This project is open source and available under the MIT License.

---

Note: This portfolio is designed specifically for DevOps/SRE professionals. Feel free to customize it according to your personal brand and requirements.