Frankie RivieraWebsite Showcase

How these sites are built

The same five steps ran for every niche. A client site runs through the same steps, with your business in place of a fictional one.

The five steps

  1. Research the niche

    Before any design work: what top sites in the niche do, what customers search for, and what makes them pick up the phone. Each niche page lists the must-haves and the sources.

  2. Pick three directions

    Three art directions per niche, each for a different kind of owner. A storm-response roofer and a slate specialist need different first impressions.

  3. Build it for real

    Custom HTML, CSS and JavaScript. Real photos sized for phones and desktops. Working calculators, booking flows, carts and filters. No page builder and no theme.

  4. Three review passes

    Every site gets three logged passes. An automated checker runs on each pass, and every page gets screenshotted at desktop, tablet and phone sizes and reviewed line by line.

  5. Ship it on Azure

    One versioned container image in Azure Container Registry, served by Azure Container Apps over HTTPS. One script builds, deploys and smoke-tests the whole showcase.

Step 4 in detail

What the three passes look for

99 passes are logged across the 33 sites. A pass with no findings does not count.

Pass 1

Correctness

Broken layouts, overflow on small screens, contrast, image crops, consistent navigation, and every form, calculator and menu working.

Pass 2

Simplify and clarify

Cut sections that do not earn their place, sharpen headlines and buttons, and leave one obvious next step on every page.

Pass 3

Polish

Spacing rhythm, alignment, line lengths, hover and focus states, and a line-by-line proofread of every page.

From the Torrent 24/7 Plumbing log, pass 2. Found: the dispatch board carried its own Call now and Book a visit buttons right beside the hero CTAs. Four buttons competed in one screen. Removed the board buttons. The board is now pure proof.

What the automated checker tests on every page

  • One H1, a title and a meta description on every page
  • Alt text on every image and a label on every form field
  • No broken links, missing anchors or failed requests
  • No console errors
  • No sideways scrolling at 360, 390, 768, 1024 and 1440 pixels
  • Text contrast and tap target sizes
  • The mobile menu opens and closes
  • Page weight
  • Copy rules: no placeholder text, no vague filler words

Step 5 in detail

The Azure setup

Everything lives in one resource group, defined in Bicep and deployed by one PowerShell script. The script builds the image inside Azure Container Registry, rolls a new Container Apps revision with a unique tag, and checks the live URLs before it reports success.

Security basics are on by default: HTTPS only, a managed identity instead of registry passwords, a strict content security policy, and no admin or anonymous access to the registry.

  • Container Apps, 1 idle replica (0.25 vCPU, 0.5 GiB)$5.91
  • Container Registry, Basic$5.07
  • Log Analytics and HTTP requests (inside the free allowance)$0.00
  • Per month, all 33 sitesabout $11
Hosting architecture Visitors reach Azure Container Apps over HTTPS. One nginx container serves all sites. It pulls its image from Azure Container Registry with a managed identity. Logs go to Log Analytics and a budget alert watches cost. RESOURCE GROUP rg-ais-eus2-showcase-prod Visitor phone or desktop HTTPS Azure Container Apps environment nginx container 1 warm replica, scales to 3 gallery + all concept sites 0.25 vCPU, 0.5 GiB Azure Container Registry Basic, versioned image tags no admin user, no anonymous pull image pull with managed identity (AcrPull) Log Analytics access + system logs Budget alert $20 a month cap, email at 50% and 100%
East US 2 retail prices, October 2026. Scale to zero replicas and the monthly cost drops to about $5.

Want your site built this way?

Tell me about your business. You get a reply by email with next steps.

Start a project