This project started as a hands‑on exercise: I rebuilt Start Bootstrap’s Freelancer theme with Bootstrap 5, focusing on page structure, the grid, and a clean customization strategy. The goal wasn’t just to match the provided screenshots, but to understand how Bootstrap enables fast, consistent, and responsive UI building.
I began with the Bootstrap docs (Getting started) to set things up and internalize the fundamentals. I became comfortable with containers (.container, .container-fluid), composing rows and columns, and working with breakpoints—the points where the layout adapts to phones, tablets, and desktop screens.
Recreating the page exposed me to the typical sections of a one‑page portfolio: a readable navbar, a centered masthead with title and tagline, a Portfolio grid, a text‑oriented About area, and a Contact form with the usual fields (name, email, phone, message). While building these blocks I experienced the value of Bootstrap’s utility classes for spacing, typography, color, and visibility, which reduced the need for hand‑written CSS.
One key takeaway was how to customize safely: rather than overriding framework rules, I created additional classes in my own stylesheet, keeping Bootstrap’s core intact and my tweaks clearly separated. This improves maintainability and avoids breaking the grid or base components.
I also focused on real‑world responsiveness. After laying out the sections, I tested the behavior across form factors and captured screenshots (desktop, tablet, smartphone) to confirm that content remained readable and well‑balanced at every size.
Working on a well‑known template sharpened my sense of design‑system thinking—using the framework’s conventions for speed and consistency, and only customizing where it truly adds value.