Hillcrest Architects
Multi-page WordPress portfolio for a fictional PNW architecture firm with a custom CSS Grid masonry block — server-rendered, per-item size, zero JavaScript library.
Overview
A multi-page WordPress portfolio for a fictional Pacific Northwest architecture firm — five-page structure (home, projects archive, single project case study, studio, contact) on a custom Full-Site-Editing block theme. One server-rendered Gutenberg block uses CSS Grid + grid-auto-flow: dense for a masonry layout without a JavaScript library.
Custom block — sfp-blocks/portfolio-grid:
- Server-rendered, takes a JSON array of items with
image_url,alt,caption, andsize - Three sizes: small 1×1, medium 2×1, large 2×2
- CSS Grid +
grid-auto-flow: densepacks mixed-size items without a JS masonry library - Lives in the shared
sfp-blocksplugin — available to every future portfolio-style demo
Five-page structure with editorial depth:
- Home — Hero with practice statement on cedar-clad architectural image; 4-column portfolio-grid of the six featured projects with mixed sizes; studio teaser strip
- /projects/ — Full portfolio in a 3-column grid; Cedar Cove House anchors the 2×2 slot, the other five pack densely around it
- /projects/cedar-cove-house/ — Full case study: cover hero, narrative prose (the site / the materials / the decisions we'd defend), sidebar facts panel (type, location, year, sqft, structural system, awards, photography credit)
- /studio/ — Practice story, principals, recognition
- /contact/ — Direct contact + qualifying notes about scope, budget, geographic focus
Real-photo pipeline — validated end-to-end:
- Photos drop into local
photos/directory in the demo repo npm run deployrsyncs tosource-photos/on EC2 (outside the public web root)npm run seed:pagescallswp media importfor each photo- Attachment slug rename — every attachment's
post_namegets renamed to<name>-imageimmediately after import. Without this, WP silently appends-3,-5,-7to the case-study page slugs to avoid collisions with attachment slugs, producing duplicate pages and a canonical URL that resolves to the JPG attachment rather than the page. Fix is now part of the standard seed pattern across every demo
The Challenge
Architecture firms get sold WordPress as a CMS for blogs while design-led portfolio platforms (Webflow, Squarespace, Framer) get pitched as the only credible option for visual work — until you actually try to scale them across a working studio with twenty or forty project case studies that someone non-technical needs to update.
The Solution
A well-built FSE block theme plus one well-aimed custom block (CSS Grid masonry, no JS library) supports image-led navigation, deep individual project case studies, and owner-editable copy at every level — without giving up the editor accessibility WordPress is actually good at.
Results
Lighthouse 75 / 96 / 100 / 92 with real photos at native resolution (~12 MB total payload)
CSS Grid masonry with
grid-auto-flow: dense— no Masonry.js, no Isotope, no client-side reflowPer-item size attribute (small / medium / large) maps to grid-column / grid-row spans
Real-photo pipeline validated end-to-end with 7 supplied photos at native resolution
Attachment-slug rename pattern fixes WP's silent page-slug collisions — now part of the standard seed
Per-demo theme + chassis inheritance: identity lives in the demo, primitives live in the platform
Gallery
