Vista is a one-page portfolio built from repeating this same idea: a fullscreen photo, a slim gradient so the type stays legible, and one focused message. Scroll to watch it become a docked content box, then a parallax panel, then a lightbox gallery.
This panel is a min-vh-100 section with a background-size: cover photo behind it — no image tag, no cropping markup, just one CSS rule. The white .content-box on top lives in a col-lg-5, pushed to the right edge by justify-content-end on its row. One backdrop, one docked box — that's the entire pattern.
An IntersectionObserver watches this box and adds .is-visible the instant it enters the viewport — a few lines of vanilla JS standing in for jQuery's scrollex plugin. The photo behind it holds still while the page scrolls, pinned with background-attachment: fixed; touch devices fall back to normal scrolling instead, since fixed backgrounds stutter on mobile browsers. This box docks left, mirroring the one before it.
Six photos, one Bootstrap modal, one carousel inside it. Click any tile below and the lightbox opens already scrolled to that image — each thumbnail carries a data-lightbox-index, and a few lines of JS turn that into carousel.to(i). No poptrox, no jQuery, no plugin config.
This form doesn't send anywhere yet — its action is a bare #. Point it at your own endpoint or a form service and it's live; the fields, spacing, and focus states are already wired up with Bootstrap's row g-3 and form-control.