samjwest.com

The client and the objective

Sam J. West is an Arizona-licensed architect (licensed since 1990) with 40+ years across design, land planning, feasibility, construction management, and design-build — spanning professional, medical, retail, historic renovation, and residential work. He also happens to be my father.

The site exists to do three things for his practice. First, establish credibility: license, tenure, and range of project types up front, not buried in an About page. Second, showcase the work — a portfolio system that carries a vast array of projects with photography, categorization, and narrative. Third, convert interest into contact — clear service categories and a direct path to “get in touch” from anywhere on the site.

Everything in the stack and design is in service of those three goals.

Early Decisions

The original plan was a 21-day migration: install the Neve theme on WordPress, apply the existing color palette, migrate 92 pages in batches of ten, test, launch. That plan lasted about two days before the approach shifted to a fully custom Full Site Editing block theme (sjw-desert-modern-theme), built from scratch against the FSE theme.json schema.

The front page hero image would focus on the high profile, historic renovation designed by Sam J. West (Bischoff’s on the Park).

Next, utilize AI for as much of the process as is possible to speed up delivery but allow for human verification and approval.

ChatGPT was used to created a mockup w/ color palette as a test and it looked so good, I just had to implement it. Claude was then used to create the design system from the mockup.

A custom FSE theme is more durable and maintainable than a Neve child theme full of overrides: when WordPress updates its block API, the theme follows the standard, not a patchwork of theme-specific hooks.

Content of prior (pages/verbage) website will still be migrated using WordPress database export and import.

Desert Modern visual language

The palette and type system is a direct response to the client’s context — Arizona architecture, adobe-and-desert materials — rather than a generic corporate template.

Colors are defined once in theme.json (making them available as block editor swatches) and mirrored as CSS custom properties in style.css, so hand-written component CSS can reference var(--sjw-burnt-sienna) instead of hardcoded hex. The accent family — Burnt Sienna #C85A17, Adobe Rust #A64521, Copper #D97A3A — handles all CTAs, links, and hover states. Warm neutrals (Soft Plaster #F5F1E8, Sandstone #EAD9BA) carry background and card surfaces.

For typography, Georgia (serif) pairs with Inter (sans) — an “architectural serif over modern sans” pairing that echoes blueprint drafting typography without being literal. Fluid sizing via clamp() scales the hero heading from 3.25rem at mobile to 6.25rem at wide viewports.

Component vocabulary

Rather than one-off styling per section, the theme uses a small reused set of primitives: .sjw-hairline (a short accent rule below section labels), .sjw-kicker (uppercase eyebrow label), .sjw-card (left-border accent card used for services and pull quotes), and .sjw-project-card (the portfolio grid item). Applying the same vocabulary across the homepage, work page, and single project templates keeps the site visually coherent without reaching for a component library.

Information architecture

Five templates, each doing a specific job:

• front-page.html — the credibility-to-contact funnel in one scroll: hero → services (4 categories) → about/philosophy → featured work → client endorsements → direct CTA band
• page-work.html — the full portfolio archive, with Visual Portfolio handling category filtering and grid rendering
• single-portfolio.html — individual project case studies with photography and narrative
• home.html — a news/commentary index, separate from the portfolio, for longer-form posts
• page.html / single.html — generic pages and blog posts at intentionally conservative widths (960px / 720px) so they don’t compete with the portfolio-first homepage

The footer reinforces the same funnel on every page: services summary, tagline, “Request Info” CTA. Contact is never more than one scroll or one click away regardless of where a visitor lands.

Iterative build

The theme went through five archived iterations (sjw-desert-modern-v1 through v5, kept in the repo as history before settling on the current sjw-desert-modern-theme). The hero section was revisited most: the background photo went through six variants before the final JPG, and the vignette effect behind the hero text was rewritten to use a single left-side gradient driven by one CSS custom property (--fade-end) — down from an earlier three-layer gradient stack that required duplicating values across breakpoints.

Previously used project photos were ran thru AI to clean up and clarify the subjects.

Accessibility was treated as first-class work: nav links use :focus-visible states with an animated underline, interactive states are handled through explicit classes, and a dedicated accessibility pass (focus states, reduced-motion, newsletter a11y) shipped alongside visual polish rather than as a late-stage bolt-on.

Where it stands

Final theme w/ core project content deployed and live. Various pages have been rewritten to provide both a more personal and professional voice at the same time.