Zero2Webmaster Build notes · team only

Zero2Webmaster · Web Craft Portfolio

Six pages. No two alike.

This is the working registry of showcase pages designed, written, and hand-coded by Zero2Webmaster — dark WebGL cinema, ivory field-journal illustration, kinetic editorial type. Every entry links the live page; the build notes behind each one are kept for the team.

The ledger

Newest first. Every screenshot is the real page, captured live.

Screenshot of the newsletter thank-you page: the SAVE THE FROGS! wordmark over a green done mark and the headline “Thank you — you're subscribed!”, a What to expect list and a pale orange What to do now panel, beside a landscape photograph of a Darwin Wallace poison dart frog on wet rock

Entry № 25 · logged 2026-09-27 — seven pages from one record · three parts · zero client JavaScript

SAVE THE FROGS! thank-you template

Brand: SAVE THE FROGS!

The page forms-engine sends a person to the moment they submit a form, built as one template and filled seven times from one record: what you did, what to expect, and one thing to do now, then three bonus ideas from a shared pool and three real testimonials. The headings are forms-engine's own copy, checked on every build; every page is kept out of search; the photographs are never cropped; and no page runs client JavaScript. Delivered with the gap list Site Control needs to serve it on the new savethefrogs.com.

  • Template-built
  • Light & editorial
  • Nonprofit & fundraising

Open the page ↗ Build notes · team only

Screenshot of the navigation kit index: a dark Zero2Webmaster bar over the heading “Header, footer and mobile-menu kit”, above a row of cards showing the classic bar, centered and overlay header presets

Entry № 24 · logged 2026-09-24 — nine presets, two brands, twenty demo pages · zero client JavaScript

Header, footer and mobile-menu kit

Brand: SAVE THE FROGS! and Zero2Webmaster

Three header bars, three mobile menus and three footers, each a named preset rendered as a real page for SAVE THE FROGS! and for Zero2Webmaster, with no client JavaScript: drop-downs and a titled mega panel on hover and focus, a drawer and a full-screen menu that close by tap and by keyboard from a native details element, and a fat footer read from an organisation record. Modelled on four sites measured off the live DOM, and delivered with the gap list Site Control needs to draw them.

  • Template-built
  • Data & systems
  • Light & editorial

Open the page ↗ Build notes · team only

Screenshot of the Quillon Works sample page — a white page over a faint graph-paper grid with a cyan wash, the headline “quillon.example is where Quillon Works' software runs.” beside a drawn browser window whose address bar strikes through “ledger.” to leave “quillon.example”, above three rows naming Ledger, Courier and Compass

Entry № 23 · logged 2026-09-23 — same engine, build #2's end of every axis · zero page JavaScript

Quillon Works — Starter Sample F

Brand: Quillon Works fictional demo brand

Sample E's opposite from the same beacon engine: no navigation, a plain-ink headline over a graph-paper wash, a drawn address window instead of an illustration, white cards with icons and no links, a person beside a paragraph, a cyan-to-amber closing band measured at every tenth of its length, a one-row footer on a deep ground, a monospace face for hostnames, and no page script at all. Quillon Works is invented, and .example is a reserved domain.

  • Bright platform
  • Light & editorial
  • Template-built

Open the page ↗ Build notes · team only

Screenshot of the Fernhollow Library Fund sample page — a white page with a purple wordmark and navigation, the headline “Every town deserves a library that stays open. Help keep Fernhollow reading.” with Fernhollow in purple, two buttons, and an illustrated reading room of coloured bookshelves, a lamp and an armchair

Entry № 22 · logged 2026-09-23 — the Beacon family from one config — build #1's end of every axis

Fernhollow Library Fund — Starter Sample E

Brand: Fernhollow Library Fund fictional demo brand

The first page from the Cinematic Starter's beacon layout, the family factored from /beacon/ and /z2w-us/. It takes the first build's end of every axis: a sticky header with a menu, an illustration beside a headline with one coloured word, a CSS-only amount ladder, eight tinted cards with a filter and a big number computed from the list, quotes, and a fat footer. The config supplies two identity colours; the engine derives every ink by holding the hue and lowering the lightness until it passes, then checks every text colour against every ground it touches. Fernhollow Library Fund is invented.

  • Bright platform
  • Nonprofit & fundraising
  • Template-built

Open the page ↗ Build notes · team only

Screenshot of the z2w.us design reference — a near-black ground under a glowing green grid, the headline “z2w.us is where Zero2Webmaster’s software runs.” in large white type beside a glass browser window whose address bar strikes through “something.” to leave “z2w.us”, above three rows naming Site Control, File Server and AI Engine with the pills Publishing, Storage and Intelligence

Entry № 21 · logged 2026-09-22 — Beacon build #2, restyled dark and full width · rendered from a CMS’s own block data · zero client JavaScript · a 16-item gap list

z2w.us — Design Reference

Brand: Zero2Webmaster

A redesign of a real page that another system renders. The page is built by Site Control, a server-side renderer that draws typed blocks with inline styles, so the deliverable here is not a page but a direction and a gap list. The structure is mimicked from millionverifier.com (big type, generous whitespace, green-to-gold gradients), corroborated by sigparser.com, then restyled dark and full width on review, with the founder’s Andes photograph filling half of one band. It is the second build of the Beacon family — which makes the guide’s table of what stayed fixed and what varied the input for parameterising the family. Every sentence is Site Control’s approved copy, and the builder imports Site Control’s own seed file and fails on a single changed byte. The page carries no client JavaScript and is rendered from the same JSON that lists the 16 gaps, each with a schema, a fallback and whether it needs a stylesheet, so the reference and the specification cannot drift apart.

  • Dark & cinematic
  • Data & systems
  • Template-built

Open the page ↗ Build notes · team only

Screenshot of the SAVE THE FROGS! Ways To Give page — a white ground with the headline “Frogs can’t save themselves. But together we can SAVE THE FROGS!”, the last phrase in deep green, a green Donate now button beside an outlined Become a member button, and a photograph of a gold and brown Darwin Wallace poison dart frog on wet rock to the right

Entry № 20 · logged 2026-09-18 — Built by deliberate mimicry of a named source · the big number is a count, never a typed digit

SAVE THE FROGS! — Ways To Give

Brand: SAVE THE FROGS!

The first page in this ledger built by deliberate mimicry of a site Kerry named rather than by inventing a style — pledge.to as the primary source, with unity.edu/online, Best Friends Animal Society and NRDC’s donation page measured off their live DOM to corroborate the register. It is a real charity’s giving page, so the constraints are unusually hard: every sentence is the organisation’s own, copied from this repo’s Signpost migration and reproduced word for word including a caption’s own misspelling; the three amount ladders are the real money read off SAVE THE FROGS!’s own donation pages; and the big number in the hero is the length of the route list, computed by the builder and re-derived by the gate, because a charity’s page is the last place to type a figure by hand. Kerry was asked directly whether membership made it eleven and whether a sourced headline figure should replace the count; he ruled no to both, and the gate now refuses either change. The palette is argued from measurement rather than taste: white on the identity green and orange fails even the large-text bar, so the identity colours appear only as decoration and every ink is the brand hue walked down in lightness until the pair passes — a walk that had to take one more step for the tinted cards, where the link orange drops to 3.78:1.

  • Bright platform
  • Light & editorial
  • Nonprofit & fundraising
  • Client pitch

Open the page ↗ Build notes · team only

Screenshot of the Blue Frog Communications instrument — the words STAND OUT resolving in bright blue dots out of a dark green field of grain, a flat blue poison dart frog surfacing at the lower right, and four mono-labelled controls below reading YOUR MESSAGE, MARKET NOISE, MESSAGE CLARITY and a SIGNAL READ of HEARD

Entry № 19 · logged 2026-09-01 — A deterministic noise-to-signal instrument · a 10-clause gate with 42 child-process canaries

Blue Frog Communications

Brand: Blue Frog Communications

A rebuild of a real client’s live site, and the first page here drawn from the Data & systems idiom. Blue Frog is a solo communications consultancy whose tagline is “Break Through the Jungle of Communications Noise”, so the page performs signal emerging from noise rather than claiming it: a canvas in which the reader’s own words sit buried in seeded grain and resolve as they drive clarity up. Every pixel is a pure function of three inputs, the grain is seeded so the same inputs always draw the same field, and the readout prints a tier — BURIED, COMPETING, HEARD — never a score, because nothing here measures the reader’s actual communications. The dark ground is argued from measurement, not taste: the client’s own brand orange fails AA as text on all three of the white grounds their live site uses and clears it only here. Every sentence is the client’s, harvested verbatim; the three statistics are the only numbers on the page, and the gate refuses any number the client did not write — or the surname, which the LinkedIn slug would happily have supplied.

  • Data & systems
  • Dark & cinematic
  • Client rebuild
  • Client pitch

Open the page ↗ Build notes · team only

Screenshot of the Save The Frogs Day 2027 poster — warm paper, a flat green frog printed over an orange sun, an enormous Anton headline, and a green-and-orange ink stamp whose overlap prints deep olive behind the words The 19th Annual

Entry № 18 · logged 2026-08-26 — Two-ink screenprint with a REAL overprint · an 8-clause gate with 32 child-process canaries

SAVE THE FROGS! — Silkscreen

Brand: SAVE THE FROGS!

A screenprinted poster for a real event on a real date, and the first page here that is light, saturated and printed rather than dark and lit. The organisation’s green and orange are used raw as inks, and where they cross the browser really multiplies them — the overprint is derived, not picked, and the gate re-derives it rather than believing the comment. The contrast rule inverts on that one ground: dark ink everywhere, white only on the overprint, which is why the ordinal stamp is the page’s single white-on-colour moment. Registration snaps once in 400ms and never again; prose never animates. Every stated fact is checked against an authored table, and every number printed on the sheet has to be in it.

  • Print & poster
  • Light & editorial
  • SVG illustration

Open the page ↗ Build notes · team only

Screenshot of the migrated Save The Frogs Day page — deep forest-green signage plate, cream slab headline reading April 28th Every Year, and a live countdown

Entry № 17 · logged 2026-08-23 — Interpretive-signage system + an 11-clause completeness gate with 18 child-process canaries

SAVE THE FROGS! — Signpost

Brand: SAVE THE FROGS! (savethefrogs.com)

Four real savethefrogs.com Kadence pages migrated off WordPress as interpretive trail signage — deep green plates, cream reading panels, numbered wayfinders, 20px body floor. Completeness first, by the owner's own rule: 9,243 words, 78 headings, 197 images, the resume PDF, seven videos, two live Airtable embeds and a working DAF donation widget all arrive or are named in an authored drop manifest. The countdown refuses the source's own past date and counts to the 19th Annual, Wednesday April 28, 2027.

  • Light & editorial
  • WordPress migration
  • Client pitch

Open the page ↗ Build notes · team only

Screenshot of the Selvedge Wayuu Bags page — a code-drawn woven swatch masthead above a turquoise handwoven mochila bag and warm linen bands

Entry № 16 · logged 2026-08-22 — CSS-drawn weave masthead + native-dialog lightbox + a paired-clause completeness gate

LoomInUs — Selvedge

Brand: LoomInUs (loominus.art)

The first looking surface in the portfolio, and the largest migration in it: all twelve of loominus.art's real WordPress pages rebuilt as a bolt of cloth — a fixed selvedge rail, weft bands of linen and cotton, stitch-row edges, and specimen grids carrying 226 product photographs whose lightbox is a native dialog. 220 alt texts authored by looking at each photograph. Twenty-two template-residue pages refused by name, and a 370-assertion gate that pairs every 'did it arrive' clause with an 'is the wrong thing absent' clause.

  • Light & editorial
  • Commerce & collections
  • Specimen grid
  • Client pitch

Open the page ↗ Read the case study → Build notes · team only

Screenshot of the Pride Pianos page — a two-octave piano keyboard with every key a different color, red through violet, each sharp a deeper shade of its natural

Entry № 15 · logged 2026-08-11 — playable color-coded keyboard

Pride Pianos

Brand: Pride Pianos (fictional) fictional demo brand

A fictional piano brand whose keys are twelve colors instead of black and white — seven hue families, each sharp the deep sibling of its natural. The set-piece is a keyboard you can actually play: tap, glide or tab to a key and it sounds, with the tone synthesised in the browser.

  • Dark & cinematic
  • WebGL shader
  • Template-built
  • Scroll story

Open the page ↗ built before the guides began

Screenshot of the Zero2Webmaster Blog archive — a dense sortable table of 22 articles on a near-black ground, with year bands in mono and a duotone-green lead post above it

Entry № 14 · logged 2026-08-07 — dark technical reading surface, sortable index

The Zero2Webmaster Blog — the journal family, build #2

Brand: Zero2Webmaster

Build #2 of the journal family, and the reason the family can now be parameterized at all: its job was to disagree with build #1 on all sixteen axes on purpose. True dark ground, Source Serif 4 over Space Grotesk, no rail, a split hero, accent as fill rather than underline, and an archive inverted from cursor-trailing index rows to a dense sortable table — because the blog has effectively one category and no filter row would have real data to stand on. A verbatim reproduction of a live 2,593-word post, dark by default with a hand-built light theme, and one verifier covering both builds.

  • Blog & reading
  • Dark & cinematic

Open the page ↗ Build notes · team only

Screenshot of the SAVE THE FROGS! Blog demonstration post — a two-line Rokkitt slab headline over a warm off-white reading page, with a muted deck and a mono byline row

Entry № 13 · logged 2026-08-06 — rail + measure reading surface

The SAVE THE FROGS! Blog — the journal family

Brand: SAVE THE FROGS!

The series' first reading surface and the planned future home of savethefrogs.com/blog: a blog post + archive in an asymmetric rail-and-measure grid, Rokkitt + Nunito Sans self-hosted, a 16-block body library rehearsed verbatim against a real WordPress post, a build-time TOC gate, and an archive whose featured images trail the cursor. Build #1 of 2 — parameterization waits for the Zero2Webmaster blog.

  • Blog & reading
  • Light & editorial

Open the page ↗ Build notes · team only

Screenshot of The Ashgrove Register sample page — an off-white newspaper front page with a Caslon nameplate, a single oxblood accent and two justified columns

Entry № 12 · logged 2026-08-02 — same engine, every axis reversed

The Ashgrove Register — Starter Sample D

Brand: The Ashgrove Register fictional demo brand

Sample C's opposite from the same engine: Caslon rather than DM Serif, one accent tier rather than two, two columns rather than three, a coloured first letter rather than a reversed cap, and a column-width engraving set inside the justified measure — with no set-piece, so the page ships zero JavaScript.

  • Newspaper broadsheet
  • Light & editorial
  • Template-built

Open the page ↗ Build notes · team only

Screenshot of The Willowbank Crier sample page — a pale-straw newspaper front page with a fat serif nameplate, a green edition banner and three justified columns

Entry № 11 · logged 2026-08-02 — the broadsheet family, now template-built

The Willowbank Crier — Starter Sample C

Brand: The Willowbank Crier fictional demo brand

The first broadsheet generated from a config rather than hand-built: three faces, two accent tiers, three justified columns, a reversed drop cap, a deterministic notice composer, and a full-width code-drawn engraving — plus a plate page showing the halftone and duotone raster screens side by side.

  • Newspaper broadsheet
  • Light & editorial
  • Template-built

Open the page ↗ Build notes · team only

Screenshot of The SAVE THE FROGS! Bulletin — a newspaper broadsheet masthead in DM Serif Display over a green Special Edition banner and a multi-column front page for Save The Frogs Day 2027

Entry № 10 · logged 2026-07-22 — print broadsheet · event-notice composer · code-drawn engravings

The SAVE THE FROGS! Bulletin

Brand: SAVE THE FROGS!

The second paper in the newspaper family: a Save The Frogs Day special edition on pale-straw newsprint — didone nameplate, a stippled world dot-map of 60+ countries, woodcut frog engravings drawn entirely in code, and a classified composer that typesets your own event notice for the 19th Annual.

  • Light & editorial
  • Newspaper broadsheet
  • SVG illustration

Open the page ↗ Build notes · team only

Screenshot of The Nonprofit ICU Dispatch — a newspaper broadsheet front page with a fat Caslon nameplate, multi-column lead story, and a boxed ECG vitals monitor

Entry № 09 · logged 2026-07-21 — print broadsheet · vital-signs monitor

The Nonprofit ICU Dispatch

Brand: Nonprofit ICU

A print broadsheet front page in code for Dr. Kerry Kriger’s nonprofit consultancy: Libre Caslon nameplate, ICU-chart section rubrics, verbatim launch-press-release copy, and a deterministic “check your nonprofit’s vital signs” ECG monitor — nothing on the page moves unless the reader moves it.

  • Light & editorial
  • Newspaper broadsheet

Open the page ↗ Build notes · team only

Screenshot of the VideoMigrator page — the headline 'Your videos are overpaying rent.' in huge type over a dark purple-to-cyan WebGL flow field

Entry № 08 · logged 2026-07-15 — migration flow · savings estimator

VideoMigrator — Done-For-You Video Migration

Brand: VideoMigrator

The front door of a real product: a migration-flow shader drifting purple into cyan, a play button that scroll-morphs into the two-tone wordmark, and an honest interactive estimator that runs the migration engine's own cost model in the browser.

  • Dark & cinematic
  • WebGL shader
  • Particle morph
  • Scroll story
  • Client pitch

Open the page ↗ Build notes · team only

Screenshot of the Aharon Wheels Bolsta page — a sepia photograph of the artist playing handpan dissolving into cream paper beside his name in large serif type

Entry № 07 · logged 2026-07-15 — duotone fold · teentaal wheel

Aharon Wheels Bolsta — World Music

Brand: Aharon Wheels Bolsta

How we help musicians: a magazine split fold built from the artist's own sepia photography, real recordings behind click-to-play facades, and a sixteen-beat teentaal wheel that synthesizes its own tabla strokes in the browser.

  • Photo-cinematic
  • Audio-reactive
  • Light & editorial
  • Client pitch

Open the page ↗ Build notes · team only

Screenshot of the Amphibian Field Journal — ivory paper with hand-drawn-style SVG amphibians and serif type

Entry № 06 · logged 2026-07-15 — drawn in code

The Amphibian Field Journal

Brand: SAVE THE FROGS!

A naturalist's field journal on ivory paper: every amphibian is drawn in SVG through one shared roughen filter, and a wetland root network grows across the canvas as you scroll. No shader, no particles — deliberate calm.

  • Light & editorial
  • SVG illustration
  • Calm motion

Open the page ↗ Build notes · team only

Screenshot of the Zero2Webmaster Web Craft page — 'This is what a modern website feels like' over a green aurora shader

Entry № 03 · logged 2026-07-14 — self-demonstrating pitch

Zero2Webmaster Web Craft

Brand: Zero2Webmaster

The pitch that proves itself as you read it: an aurora shader, a 0 → Zero2Webmaster particle morph, real business stats, and a speed pill that reports how fast the page loaded on your own visit.

  • Dark & cinematic
  • WebGL shader
  • Particle morph
  • Scroll story

Open the page ↗ Build notes · team only

Screenshot of the SAVE THE FROGS! Technology page — 'We build the technology that saves frogs' over a bioluminescent green shader pond

Entry № 02 · logged 2026-07-12 — shader pond · frog morph

SAVE THE FROGS! Technology

Brand: SAVE THE FROGS!

A hand-written WebGL pond — caustics, fireflies, cursor ripple — under a scroll story about the conservation tech stack, ending in ~3,200 particles that reassemble a frog into the SAVE THE FROGS! wordmark.

  • Dark & cinematic
  • WebGL shader
  • Particle morph
  • Scroll story

Open the page ↗ Build notes · team only

Screenshot of the La Carnicería Parrilla landing page — dark restaurant hero with glowing typography

Entry № 01 · logged 2026-02-27 — the original

La Carnicería Parrilla

Brand: La Carnicería

The page that started this studio: a cinematic restaurant pitch in prerendered React with a GSAP scroll story, later joined by the sitemap, analytics, and SSG baseline every page here now inherits.

  • Client pitch
  • Scroll story
  • React SSG

Open the page ↗ built before the guides began

How these get built

Every page starts as a written brief and ships as a single hand-coded file — no themes, no page builders. Each one goes through at least three screenshot-critique passes before launch: we look at the actual pixels on desktop and mobile, fix what reads badly, and add one deliberate detail per pass.

Every page also ships findable and fast: semantic HTML with one h1, per-page metadata and structured data, a sitemap entry, and text big enough to read without squinting. The repeatable parts are factored into the Cinematic Starter, a template engine that turns one JSON config into a finished page — entries № 04 and № 05 are its proof.

Want a page with this kind of range?

Zero2Webmaster builds websites for small businesses, startups, and nonprofits — pages that commit to a style and prove themselves the moment they load.

Book a time to talk zero2webmaster.com →