Personal Portfolio Homepage Template

A warm, editorial personal portfolio homepage built with Bootstrap 6 for a product designer and front-end developer, with filterable projects, case study popups, an experience timeline, testimonials and a contact form.

How it works

Everything lives inside .mo-page, which pins data-bs-theme="light" and re-maps the --bs-primary-* role tokens to the vermillion accent.

Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> as the mobile menu. The script keeps aria-expanded on .mo-toggler in sync with the drawer's shown.bs.drawer / hidden.bs.drawer events and closes the drawer after an in-page link is chosen.
Hero: a large headline with the highlighted .mo-mark word, two calls to action, a .mo-stats row, and .mo-arch, an arch-shaped portrait with a rotating SVG badge (.mo-spin) and two floating cards.
Work: Bootstrap 6 .chip buttons with data-mo-filter hide or show .mo-project cards by their data-mo-cat value, update aria-pressed, and announce the count in a live region. Each "Read case study" button carries data-mo-case; the script fills the shared #mo-case Dialog from the MO_CASES object and opens it with Dialog.getOrCreateInstance().
About and Experience: skill chips in two groups, then a Bootstrap 6 stepper with three roles.
Kind words: three <figure> quotes, the first highlighted with .mo-quote-big.
Contact: a dark section with <form data-bs-validate novalidate>, a Combobox for the project type and a btn-check radio group for the budget. On submit the script marks invalid fields, shows a spinner, simulates the request and shows #mo-toast.

Customization

Change --mo-accent, --mo-cream and --mo-ink in .mo-page (style.css) to rebrand; adjust the --bs-primary-* overrides beside them so buttons follow.
Edit the MO_CASES object in script.js to write your own case studies; the key must match the button's data-mo-case.
Add a filter by giving cards a new word in data-mo-cat and adding a chip with the same data-mo-filter value.
Remove .mo-project-wide or .mo-project-span from a card to make all project cards equal.
Replace the setTimeout in the submit handler with fetch() to your form endpoint (Formspree, your API or a serverless function).
Delete .mo-ticker or .mo-spin for a calmer hero.

The portrait and project photos come from Unsplash; replace them with your own work and photo.

Accessibility

A skip link jumps to #mo-main. Filter chips use aria-pressed and results are announced through aria-live. The case study dialog is a native <dialog> with aria-labelledby, so focus is trapped and Escape closes it. Decorative graphics are aria-hidden, the toast is role="status", and every control has a visible focus ring. Marquee, badge rotation and hover effects stop under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Bootstrap 5 developers will notice that btn-solid theme-primary replaces the per-color button classes, the navbar uses a Drawer instead of navbar-collapse, Modal is now Dialog, and validation uses data-bs-validate. Chips, Combobox and Stepper are new Bootstrap 6 components. The Combobox has no reset method, so the chosen project type stays after the form resets.