This portfolio showcases a selection of my best projects as a Front-End Web Developer, demonstrating my technical skills, problem-solving ability, and commitment to continuous learning.
The purpose of this project is to present real examples of my work to potential employers and collaborators. Each project included reflects both my technical development and my dedication to improving through research, experimentation, and practice.
🔗 View Portfolio: https://mikemupararano.github.io/Bootstrap-Portfolio/
HTML5
CSS3
Bootstrap 5
JavaScript
Chart.js
This portfolio highlights the following projects:
-
HTML/CSS Piano Project — A fully styled piano built using only HTML and CSS as part of the freeCodeCamp curriculum.
-
Suzana Designs Online Shop — A clothing store layout styled using CSS.
-
GDP Data Visualisation — Interactive charts created using Chart.js to visualise GDP data from selected countries.
-
City Skyline Project — A skyline illustration built entirely with HTML and CSS.
Building this portfolio required extensive research, testing, and iteration. Whenever I encountered challenges, I investigated documentation and technical resources until I found solutions.
Through this process, I gained deeper experience working with:
Bootstrap layout systems
Responsive design principles
UI components such as cards, grids, and navigation bars
Debugging and optimisation techniques
This project reflects both my technical progress and my persistence as a developer.
N/A
Installation
No installation is required. The portfolio runs in any modern web browser.
Simply open the live link above or clone the repository and open index.html locally.
git clone https://github.com/mikemupararano/Bootstrap-Portfolio.git cd Bootstrap-Portfolio
To run it, use: python -m http.server
- Responsive Design — Fully optimised for desktop, tablet, and mobile devices using Bootstrap’s grid system.
- Modern UI Components — Clean layout built with reusable Bootstrap cards, navigation bar, and grid utilities.
- Accessible Navigation — Semantic HTML structure and keyboard-friendly focus states for improved accessibility.
- Interactive Elements — Hover effects and subtle animations enhance user experience without sacrificing performance.
- Design Token System — Uses CSS variables for colours and shadows, making theming and maintenance easier.
- Automatic Dark Mode Support — Adapts to the user’s system theme using
prefers-color-scheme. - Optimised Images — Lazy-loaded images and consistent aspect ratios for better performance.
- Clean Code Structure — Organised file structure for scalability and maintainability.
Resources & Credits
Helpful resources used during development:
Bootstrap Documentation — https://getbootstrap.com/docs/5.3/
Bootstrap Icons — https://icons.getbootstrap.com/
Bootstrap Grid Layout — https://getbootstrap.com/docs/5.3/layout/grid/
Bootstrap Cards — https://getbootstrap.com/docs/5.3/components/card/
Stack Overflow — troubleshooting and implementation guidance
Bootstrap Tutorial Video — https://www.youtube.com/watch?v=4sosXZsdy-s
This project is licensed under the MIT License. See the repository for details.
N/A
N/A
Contributions, suggestions, and improvements are welcome. Feel free to fork the repository and submit a pull request.
Mike Thomas Full-Stack Web Developer
N/A