C4Site
A website for C4Site, our sister business teaching Perth schools and workplaces to use AI, set on a green chalkboard with real sheets of paper pinned to it.
Overview
C4Site is our sister business. It teaches Perth schools and workplaces to use AI tools on their real work, and C4 designed and built its website. The pages move between white paper, which carries the detail, and a green chalkboard for the statements and the rules. Real documents sit on the board as sheets of paper held by green magnets. The home page opens on a chalk word-search film. On the schools page, three picture cards are pinned up beside the answer a machine gave in a test run, chalked on the board with the wrong word struck through in red. The sheets a team takes home sit in a glass folder that opens and fans them out, and each pack on the packs page opens to two of its real pages in place. Colour is kept for meaning: yellow marks a claim that was checked and held, and red marks one that failed. The site is static pages served by a Cloudflare Worker on C4Site’s own account, and the Worker runs the forms. It went live on c4site.com.au on 9 October 2026.
Screenshots
What I Delivered
- The website, designed and built: white paper chapters and a green chalkboard, with real sheets pinned to the board
- The chalk word-search film on the home page
- A page for each kind of team the training is for
- A library of articles and activities, and the free packs page
- A glass folder for the take-home sheets, and Look inside for every pack
- An enquiry form and a packs form behind Cloudflare Turnstile, with the records kept in Cloudflare D1
- A record of consent kept with every pack download, in the words the visitor saw
- Build checks that stop a release if a placeholder is left in, or if wording the business has ruled out comes back
- The move from c4studios.com.au, with a permanent redirect from every old address
Key Features
- Two actions, named the same way on every page, with the first one always in reach
- Sheets of paper held to the board by green magnets, lit from the top left and turned a little
- A chalk word-search film on the home page, with a pause control
- Three picture cards pinned in the schools hero, with the machine’s answer chalked beside them
- A glass folder that leans under the pointer and opens to fan the sheets out, each one opening full size
- Look inside: two real pages of each pack, opened in place
- Yellow only for a claim that was checked and held, and red only for one that failed
- Scroll reveals at the same strength as c4studios.com.au, with chalk marks drawing on as each block lands
Stack & Tooling
- Astro 7, built to static HTML
- A Cloudflare Worker that serves the pages and runs the forms
- Cloudflare D1 for enquiries and pack downloads
- Cloudflare Turnstile on both forms
- Bricolage Grotesque, self-hosted
- GSAP only for the film and two interactive lessons
- Vitest, running the Worker’s tests in the Workers runtime against a local D1
- GitHub Actions running the type checks, the build, the build checks and the tests on every push
Integrations & Backend
- Cloudflare Turnstile, checked on the server for success, action and hostname, and failing closed
- Cloudflare D1, reached only through the Worker, with no public database API
- A limit of five posts a minute per IP address on each form
- A health check that passes only when both forms can do their whole job
Performance / SEO / Accessibility
- Lighthouse mobile on the final design before launch (8 Oct 2026, seven pages): performance 98 to 100, largest paint 1.4 to 2.2 s, no layout shift
- A content security policy that allows no inline script or style, enforced by a build check
- One self-canonical address per page, and a robots file that never blocks a crawler, both checked at build
- Security headers on every page, HSTS included
Challenges & Constraints
- Moving a business’s pages off c4studios.com.au to its own domain without breaking the old addresses
- Keeping a training site simple to use, with two actions named the same way everywhere
- Saying only what can be checked: build checks stop a release that still holds a placeholder or wording the business has ruled out