https://github.com/mena-erian/devfolio
A responsive portfolio website built with Bootstrap 5, featuring a mobile-first approach, scrollspy navigation, carousel, and animated counters. This project was part of my transition from CSS to Bootstrap, focusing on its grid system, utilities, and components. 🚀🎨
https://github.com/mena-erian/devfolio
bootstrap5 css3 fontawesome
Last synced: about 1 month ago
JSON representation
A responsive portfolio website built with Bootstrap 5, featuring a mobile-first approach, scrollspy navigation, carousel, and animated counters. This project was part of my transition from CSS to Bootstrap, focusing on its grid system, utilities, and components. 🚀🎨
- Host: GitHub
- URL: https://github.com/mena-erian/devfolio
- Owner: Mena-Erian
- Created: 2025-03-17T12:02:20.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-03-17T12:35:14.000Z (about 2 months ago)
- Last Synced: 2025-03-24T15:13:23.104Z (about 1 month ago)
- Topics: bootstrap5, css3, fontawesome
- Language: HTML
- Homepage: https://mena-erian.github.io/DevFolio/
- Size: 1.97 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://mena-erian.github.io/DevFolio/)
## 📂 Project Repository
[GitHub Repository](https://github.com/Mena-Erian/DevFolio)
## 🛠 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:
```bash
git clone https://github.com/Mena-Erian/DevFolio.git
```
### Open the Project:
Simply open `index.html` in your browser.
## 📬 Contact
- 📞 **Phone/WhatsApp:** [+201200523080](tel:+201200523080)
- 📧 **Email:** [[email protected]](mailto:[email protected])
- 🔗 **GitHub:** [github.com/Mena-Erian](https://github.com/Mena-Erian)
- 💼 **LinkedIn:** [linkedin.com/in/mena-erian-farouk](https://www.linkedin.com/in/mena-erian-farouk-904372255)
## 🙌 Acknowledgments
- **Bootstrap Documentation** – [getbootstrap.com](https://getbootstrap.com/docs/5.0/)
- **Font Awesome** – Used for scalable icons ([fontawesome.com](https://fontawesome.com/))
Have questions or want to collaborate? Feel free to reach out!