DevFolio - Bootstrap Training Project

In this step of my learning journey that has never and will never end, I built DevFolio as a personal portfolio website to practice Bootstrap. This project marks my transition from learning pure CSS to using CSS frameworks. It focuses on mastering Bootstrap's grid system, utilities, and components while maintaining a clean and professional design. I worked mobile-first to ensure a responsive experience on all devices and used a little JavaScript to create an animated counter that activates when it comes into view.

🌐 Live Demo

View the Website

📂 Project Repository

GitHub Repository

🛠 Technologies Used

• HTML5 – Semantic and structured markup.
• Bootstrap 5 – Component-based framework for efficient styling.
• Bootstrap Grid System – Responsive and flexible layout.
• Font Awesome – Used for high-quality icons.
• Bootstrap Utilities – Spacing, display, positioning, sizing, and more.
• Bootstrap Components – Prebuilt elements for a cohesive design.
• Bootstrap Carousel – Used for interactive sliding content.
• Scrollspy & Scroll Behavior – Used in the navbar for smooth section highlighting and improved navigation experience.
• JavaScript Counter Animation – Counts up when the section comes into view.

✨ Features

• Fully Responsive (Mobile-First Approach) – Optimized for all screen sizes.
• Bootstrap Grid System – Flexible and efficient layout.
• Customizable Components – Built using Bootstrap’s pre-styled elements.
• Smooth Scrolling – Enhancing user experience.
• Navbar Scrollspy – Dynamically highlights the active section in the navbar.
• Bootstrap Carousel – Engaging image slider for showcasing content.
• Font Awesome Icons – Used to enhance the design with scalable vector icons.
• JavaScript Counter Animation – Engaging number counters triggered on scroll.
• Shadow & Background Effects – Adding depth and contrast.
• Optimized Performance – Lightweight and fast loading.

🚀 Getting Started

Clone the Repository:

git clone https://github.com/Mena-Erian/DevFolio.git

Open the Project:

Simply open index.html in your browser.

📬 Contact

• 📞 Phone/WhatsApp: +201200523080
• 📧 Email: mena3koko2karas1@gmail.com
• 🔗 GitHub: github.com/Mena-Erian
• 💼 LinkedIn: linkedin.com/in/mena-erian-farouk

🙌 Acknowledgments

• Bootstrap Documentation – getbootstrap.com
• Font Awesome – Used for scalable icons (fontawesome.com)

Have questions or want to collaborate? Feel free to reach out!