About This Website

Behind the Build

A transparent account of how a production-ready, Lighthouse-98 website was designed, tested, and deployed in 24 hours — using a strict AI-pair programming methodology built around specification, test-driven development, and zero-compromise engineering standards.

From first prompt to production
24h
Lighthouse Performance
98
Total AI token cost
$30.02

The 24-Hour Build

Sprint by Sprint

Every component written test-first. Every section deployed with a green suite. This is the unedited sequence.

  1. Hour 0
    System Design

    Project Inception & AI SDLC Architecture

    CLAUDE.md authored. Specification-first AI workflow established. Zero deprecated code policy, build health gate, and TDD-first mandate locked in before a single line of production code was written.

    • CLAUDE.md
    • SDLC
    • Specs
  2. Hour 2
    Foundation

    Astro 6 Scaffold, Design Tokens & First Unit Tests

    Astro 6 initialised with Tailwind CSS v4 via the @tailwindcss/vite plugin. Complete design token system defined in global.css. First Vitest unit suite passing — the green baseline established.

    • Astro 6
    • Tailwind v4
    • Vitest
  3. Hour 3
    Global Components

    Navbar, Footer & Contact Section

    Sticky responsive navbar with ARIA landmarks, hamburger mobile menu, and keyboard navigation. Enterprise-grade footer with legal links and company registration. Contact section — all three written test-first, RED → GREEN.

    • Playwright
    • ARIA
    • TDD
  4. Hour 5
    Core Sections

    Hero & Core Services — First npm run dev

    Hero section with animated tagline carousel. Core Services section. This was the first visual review via npm run dev — only after the Playwright tests were green.

    • Hero
    • Services
    • TDD
  5. Hour 10
    Core Sections

    Approach, Philosophy & WebP Asset Migration

    SCITAS three-pillar Approach section. Philosophy & Founder section. Full migration to astro:assets with responsive WebP srcsets — Lighthouse-compliant from day one.

    • Approach
    • Philosophy
    • WebP
  6. Hour 12
    Legal & SEO

    Privacy, Terms, SEO & 404 MVP

    Privacy Policy and Terms of Use. Open Graph metadata, canonical sitemap, and robots.txt. A first-pass 404 page — scoped, tested, and shipped in a single sprint.

    • SEO
    • Legal
    • Sitemap
  7. 7-Hour Reset
  8. Hour 20
    Infrastructure

    CI/CD Quality Gate & Enterprise Trust Signals

    GitHub Actions build pipeline and Dependabot configured — automated health checks on every push. Professional Indemnity, Public Liability, and Employers' Liability insurance declarations woven into Footer and Terms. Trust by deliberate design.

    • CI/CD
    • GitHub Actions
    • Insurance
  9. Hour 24
    Go Live

    Maintenance Mode, Parallax 404 & Cloudflare Deploy

    Hidden maintenance overlay with CSS-animated cat architect. Architectural Breakpoint parallax 404 page. Deployed to Cloudflare Pages. Live on www.scitas.uk.

    • 404
    • Maintenance
    • Cloudflare

Engineering Integrity

Test-Driven from the Start

No implementation was written before its Playwright or Vitest test existed. Every component shipped as RED → GREEN — a behavioural contract checked before every commit, preventing regressions across the entire sprint sequence.

Tests aren't just safety nets — they are executable specifications. When a requirement changes, the test changes first, and the implementation follows the failure. The result is a suite that documents the system's behaviour as precisely as the code itself.

Vitest v8 Coverage — Go-Live Snapshot (instrumented TypeScript files)

100%
Statements
19/19
100%
Branches
12/12
100%
Functions
3/3
100%
Lines
15/15
File Stmts Branch Funcs Lines
src/utils/seo.ts 100% 100% 100% 100%
src/config/site.ts 100% 100% 100% 100%
Total 100% 100% 100% 100%

Exemplar — tests/unit/utils/seo.test.ts 100% AI-authored · zero manual intervention

This test covers 14 assertions across the composePageTitle and resolveOgImageURL utilities — edge cases included. If either function ever changes behaviour, this suite fails immediately, catching regressions before a single character reaches production.

describe('composePageTitle', () => {
  it('appends site name when absent', () => {
    expect(composePageTitle('Home')).toBe('Home | SCITAS Ltd');
  });

  it('does not duplicate an already-suffixed title', () => {
    expect(composePageTitle('Services | SCITAS Ltd'))
      .toBe('Services | SCITAS Ltd');
  });

  it('falls back to site name for an empty title', () => {
    expect(composePageTitle('')).toBe('SCITAS Ltd');
  });

  it('falls back to site name for a whitespace-only title', () => {
    expect(composePageTitle('   ')).toBe('SCITAS Ltd');
  });

  it('appends suffix when site name appears as a prefix', () => {
    expect(composePageTitle('SCITAS Ltd Architecture'))
      .toBe('SCITAS Ltd Architecture | SCITAS Ltd');
  });
});

Token Economy

What $30.02 Actually Means

The $30.02 is the direct AI compute cost — one input to the total cost of a structured engagement. It represents the raw efficiency of AI-pair programming when the AI is given a defined specification, not an open-ended prompt. The real value is in the methodology that produced it.

Session Token Cost

$30.02

Direct AI compute — not the service fee.

Input Tokens

~7.41M

Prompts, file context, tool responses.

Cache Hits

~51.77M

87.5% of all input served from Anthropic's 5-minute prompt cache.

Output Tokens

~240k

Source code, tests, documentation, and plans.

Input Token Efficiency

87.5% cache hit rate

87 cents of every dollar spent was served at cache price — because the AI never lost context of the full specification. Structured prompting keeps context warm across the entire development session.

The structured workflow that made it possible

Plan

Architecture decisions, TypeScript interfaces, and file trees resolved before any implementation begins. AI context constrained to what matters.

Specify

A formal .md specification locks the behavioural contract before a single line of production code is written.

Test RED

Playwright and Vitest assertions authored against the spec. Suite confirmed to fail — the RED state is the proof that the test is meaningful.

Implement

Minimal, optimised code written to turn RED → GREEN. No speculation, no scope creep. The test suite is the delivery contract.

Performance

Speed Was Never an Afterthought

Every architectural decision — edge hosting, zero client JS, responsive images, no render-blocking scripts — was made with performance as a first-class constraint. These are the live production scores.

98

Performance

FCP 1.9s · LCP 1.9s · TBT 0ms · CLS 0

95

Accessibility

Semantic HTML · ARIA landmarks · WCAG 2.1 AA

100

Best Practices

HTTPS · no deprecated APIs · secure headers

92

SEO

sitemap · robots.txt · OG metadata · canonical URL

Traditional SPA

TTFB
~1.2s
LCP
~4.8s
CLS
0.12
TBT
520ms

SCITAS / Edge CDN

TTFB
30ms
LCP
1.9s
CLS
0
TBT
0ms

The modern stack

Astro

6.x

Island Architecture — zero JS by default

Tailwind CSS

v4

CSS-first — no JavaScript config

TypeScript

5.x

Strict mode — end-to-end type safety

Cloudflare Pages

Edge

300+ PoPs — 30ms TTFB from CDN

Playwright

Latest

E2E contract tests — desktop + mobile

Vitest

v4

Unit suite with v8 coverage

30ms

TTFB

Edge-cached HTML delivered before your finger leaves the key.

0ms

TBT

Zero render-blocking scripts. The Cloudflare email-decode blocker was eliminated in Sprint 0.

0

CLS

No layout shifts. No web fonts swapping late. No images without dimensions.

0 kB

JS (default)

Astro ships no client JavaScript unless a component explicitly hydrates.

100%

Build Health

Zero deprecated API warnings enforced by a blocking Vitest gate on every build.

Easter Eggs

Attention to Detail — Even Where Users Aren't Looking

Two hidden experiences. Entirely unnecessary. Absolutely deliberate.

Architectural Breakpoint

A page that doesn't exist — built like one that should.

404

Most 404s are an afterthought. Ours is a deliberate brand statement. A full parallax layout served from Cloudflare's edge the moment a user lands somewhere that doesn't exist — on-brand, on-performance, and oddly satisfying.

Under the Hood

CSS parallax layers at different scroll speeds. Served directly from Cloudflare's edge network — no round-trip to the origin server required.

Go anywhere on this site that doesn't exist.

Cat Architect

Even planned downtime can be charming.

Maintenance Mode

Behind a hidden route lives a fully animated maintenance overlay — a kinematic cat architect with an articulated arm, drawn entirely in CSS. It's never linked from the navigation. Clients who find it during an update window see a polished, branded experience rather than a generic server error.

Under the Hood

Pure CSS keyframe animation. A kinematic chain of transform: rotate() on nested elements creates the moving arm. Zero images, zero JavaScript.

It's hiding at /maintenance.

"This is what deliberate engineering looks like."

Have an idea and want expert advice?

Book a consultation today to see your ideas come to life with a structured, AI-accelerated delivery process.

Book a Consultation