SalvadorLet’s talkHarbor & Oak
A single-page marketing website for a fictional high-end residential general contracting studio, built as a portfolio piece. Dark, luxury aesthetic with gold accents and serif display type, designed to feel like a real studio’s site.
The Goal
Present a complete, production-quality brand experience covering the hero, portfolio, about, process, and contact that feels like a real studio’s site while remaining clearly labeled as a concept project. Every section needed to work together as one cohesive narrative, from first impression to final call to action.
Our Work
Where the portfolio lives. Two projects, each with six photos you scroll through with arrows and a counter. The project description on the left updates as you move from one gallery to the next, so the context always matches what you are looking at.
About
The story behind the studio. Two decades of craftsmanship, told through a Built on Trust narrative on the left and the founder’s portrait on the right. It puts a face to the name and grounds the brand in real experience.
Process
How the studio works with clients. Four numbered steps: Consultation, Design, Build, Deliver. Each one reveals as you scroll, walking the visitor through the process from first conversation to final handoff.
Contact
The final step. Contact details on one side, an inquiry form on the other. Everything a visitor needs to reach out, laid out without friction.
WebP conversion
Source photography (45MB) converted to WebP q85. Same resolution, visually lossless, about half the size.
No animation libraries
Native IntersectionObserver and CSS keyframes keep the JS bundle minimal.
Accessibility
Labeled form fields, aria-labels on carousel buttons, and prefers-reduced-motion respected through CSS.
Like this project?
Let’s work together. Get in touch.
← Back to work