🧑‍💻 Maher-Portfolio – Personal Portfolio

A professional front-end developer portfolio to showcase my projects and services. The website is built with HTML, CSS/Sass, JavaScript, supports Dark/Light mode, and uses Swiper.js to display projects dynamically.

---

📸 Screenshots

🖥️ Desktop View

---

🛠️ Built With

• HTML5
• CSS3 + Sass (modular partials + SCSS map)
• JavaScript (Vanilla)
• Swiper.js (portfolio slider)
• Normalize.css (cross-browser styling reset)
• Font Awesome & Unicons (icons)
• Responsive Design
• Custom Favicon
• GitHub API (fetching repos dynamically)
• Local JSON Data (custom project images & order)

---

📂 Project Structure

My_Website/
├── assets/
│   ├── Css/
│   │   ├── Normalize.css
│   │   ├── style.css
│   │   └── swiper-bundle.min.css
│   ├── JavaScript/
│   │   ├── index.js
│   │   ├── sendEmail.js
│   │   ├── GitHubAPI.js     # Handles GitHub API + JSON integration
│   │   └── swiper-bundle.min.js
│   ├── Sass/
│   │   ├── style.scss
│   │   ├── _Portfolio.scss
│   │   ├── _breakpoints.scss
│   │   └── _global.scss
│   ├── Html/
│   │   └── Portfolio.html
│   ├── Data/
│   │   └── projects.json    # Custom repo config (names, images, fallback)
│   └── images/
│       └── ... (project previews, icons, design assets)
├── screencapture-room-homepage.png
└── index.html

---

📋 Features

• 🎯 Clean semantic structure (accessible HTML5).

• 🌗 Dark/Light mode toggle with data-theme.

• 📱 Fully responsive (SCSS breakpoints).

• 🧭 Responsive navigation menu with active link highlighting.

• 🧩 Accordion skills section (expand/collapse).

• 🧰 Modal windows for services details.

• 🖼️ Portfolio slider using Swiper.js:

  • Projects fetched via GitHub API.
  • Order & images controlled via projects.json.
  • Fallback image support if preview is missing.

• 📨 Contact form with EmailJS integration.

• 🔗 Social links in header & footer.

• 🧷 Custom favicon and icon libraries.

---

🚀 Live Demo

• 🔗 View Live Project

• 💡 Bit.ly Short Link

---

🧑‍💻 Author

Maher Elmair

• 📫 [email protected]
• 🔗 LinkedIn
• ✖️ X (Twitter)
• ❤️ Made with passion by Maher Elmair

---

🙏 Credits

• 🎠 Slider: Swiper.js
• 🧰 Icons: Font Awesome & Unicons
• 📦 GitHub API: for repo info
• 💡 Inspired by open-source developer templates (Bedimcode style)

---

🙌 Thank You

If you liked the project, please ⭐ the repository!
Feel free to open issues or submit pull requests with improvements 🙏

---