Under the hood

This portfolio is also a working full-stack system. The pages are static and served from Cloudflare's global network. Behind them is a small serverless backend: an AI assistant, a database, lead scoring and notifications. Here is how it works, with live numbers.

-AI messages handled

-Leads captured

-Avg response, 7 days

100Lighthouse, all 4 scores

Checking live status...

Architecture

What happens when you send a message

1. Validate

Input is trimmed and size-limited. A per-IP rate limit (hashed, never stored raw) stops abuse before any paid call runs.

2. Understand

The AI replies and returns structured JSON with the details it heard: need, business, budget, timeline, name, email.

3. Score

Scoring is plain code, not AI, so it is predictable and tested. Budget and timeline weigh most.

4. Store

The lead is upserted into a D1 (SQLite) table keyed by chat session, so a conversation never creates duplicates.

5. Notify once

When name and email are known, WhatsApp and email go out in parallel, exactly once per lead, and the visitor gets a confirmation.

6. Fail gracefully

No AI? The chat switches to a scripted demo. No email keys? It hands off to WhatsApp. The visitor never sees an error page.

API

Endpoint	What it does	Auth
`POST /api/chat`	AI conversation. Returns the reply, extracted lead, score and a timed step log.	Rate limited
`POST /api/lead`	Free audit and form leads. Runs PageSpeed in the background and emails the report.	Rate limited, honeypot
`GET /api/stats`	Anonymous numbers shown on this page. No personal data.	Public, cached 30 s
`GET /api/health`	Which services are connected.	Public
`GET /api/admin/leads`	Lead list for the private dashboard.	Bearer token, constant-time check

Request

POST /api/chat
{
  "sid": "c1f9...",
  "messages": [
    { "role": "user",
      "content": "I need a site for my clinic, around $4k, next month" }
  ]
}

Response

{
  "reply": "Great, a clinic site fits the Studio package...",
  "lead": { "need": "clinic website", "budget": "$4k",
            "timeline": "next month" },
  "score": { "score": 60, "tier": "warm" },
  "log": [ { "step": "AI understood the message", "ms": 812 }, ... ],
  "total": 905
}

Stack

Frontend

Hand-written HTML, CSS and vanilla JavaScript. No framework, so nothing to download that the page does not use.

Backend

Cloudflare Pages Functions (JavaScript, Web standard APIs), D1 database, Workers AI.

Quality

Unit tests with Node's built-in test runner, run on every push by GitHub Actions. Lighthouse 100 on mobile and desktop.