Zero2Webmaster How this page was built

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 and the build guide that shows exactly how it was made.

The ledger

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

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 ↗ Read the build guide →

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 ↗ Read the build guide →

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 build guide →

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 ↗ Read the build guide →

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 ↗ Read the build guide →

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 ↗ Read the build guide →

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 ↗ Read the build guide →

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 ↗ Read the build guide →

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 ↗ Read the build guide →

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 ↗ Read the build guide →

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 ↗ Read the build guide →

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 ↗ Read the build guide →

Screenshot of the Quill & Meadow sample page — cream paper hero with large serif editorial type

Entry № 05 · logged 2026-07-14 — same engine, opposite mood

Quill & Meadow — Starter Sample B

Brand: Quill & Meadow fictional demo brand

The same template engine as Sample A with a different config: cream paper, serif editorial type, and a kinetic-type set-piece — proof that one engine can swing between opposite moods.

  • Light & editorial
  • Kinetic type
  • Template-built

Open the page ↗ Read the build guide →

Screenshot of the Ursa Observatory sample page — dark indigo hero with an aurora shader

Entry № 04 · logged 2026-07-14 — one config → dark indigo

Ursa Observatory — Starter Sample A

Brand: Ursa Observatory fictional demo brand

Built by the Cinematic Starter template engine from a single JSON config: dark indigo palette, aurora shader, and a moon-to-wordmark particle morph — no hand-written page code at all.

  • Dark & cinematic
  • WebGL shader
  • Particle morph
  • Template-built

Open the page ↗ Read the build guide →

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 ↗ Read the build guide →

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 ↗ Read the build guide →

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 →