Carrie Barron Interiors

A Dallas interior design studio's site for homeowners and commercial clients, built around project pages, a tiered services list and a hand-composed portfolio.

What they came with

An interior design practice is judged on photographs, and no two projects photograph the same way. One property has a long run of rooms worth showing; a condo has a handful of frames that carry it. A portfolio that forces both into one card grid flattens the very difference the work is sold on. The services split two ways at once as well: by scale, from a whole-home remodel down to a single consultation, and by type, residential against commercial.

What the build had to do

A portfolio with no card grid

The index runs nine named sections, portfolio1 through portfolio9, each giving one project its own title, location, image mosaic and link, composed on its own grid rather than stamped from a template. A project with a lot of photography and one with a little each get an arrangement that suits them.

Project pages sized to the work

Every project runs as a stack of Fluid Engine sections holding individually placed image blocks, so the count and rhythm of frames changes from one project to the next. No gallery block is imposing a single cadence across all nine.

Services stated twice, deliberately

The home page names four service areas in an accordion beside a fixed image, then a second pass sets out the engagement tiers in full: full-service design, styling for spaces that need refining, furnishings, kitchen and bath finish selection, and a one-time consultation. Someone scanning gets the categories; someone choosing gets the scope.

Decorative frames as layout objects

The offset gold outlines and shaped image masks are Shape blocks sitting on the same Fluid Engine grid as the photographs they frame. They rely on cell overlap rather than absolute positioning, so they have to keep their relationship to the image when the grid reflows on narrower screens.

Typography carried by uploaded fonts

The Graphie faces are uploaded as OTF files and registered in custom CSS across four weights, then applied site-wide. Navigation, headings and buttons are all restyled away from the template default, including a primary button that draws its trailing dash from a pseudo-element and swaps its palette in the two sections that sit on white.

Technical detail

Focal points doing the cropping

Images come off the Squarespace CDN with a wide srcset ladder and a per-image focal point written into object-position, so a landscape interior shot can hold a tall frame on a phone without losing its subject. The sizes attribute switches to 200vw below 800px, which is what keeps the mosaic tiles dense on mobile rather than letting them resolve to thumbnails.

Per-block CSS and JS, loaded per block

The newer image, shape, accordion and button components declare their own stylesheet and chunked scripts on the block element itself, pulled from definitions.sqspcdn.com. The trade-off is explicit: a page's asset cost tracks how many distinct components it uses rather than sitting in one shared bundle, which is why the image-heavy project pages and the lighter contact page load very different sets.

Overrides pinned to section identifiers

Part of the custom CSS is scoped to named section ids and to raw data-section-id values rather than to classes, which is how one hero takes a gradient scrim and a letter-spaced heading its neighbours do not. It binds the stylesheet to the page's own structure, so styling and content are maintained as a single thing rather than two.