How this site was made.

The Atelier edition is deliberately zero-build: hand-written HTML, CSS, and JavaScript with no framework, no bundler, and no build step. For a content site of this size, that choice buys instant loads, zero dependency rot, and total control over every byte.

• HTML5 — five static pages, semantic landmarks, one file per page.
• Modern CSS — custom properties for the design tokens, clamp() fluid type scale, grid/flexbox layout, @view-transition for cross-page fades, prefers-reduced-motion support throughout.
• Vanilla JavaScript — one shared behaviour file (~300 lines) and one hero engine, both dependency-free at their core.
• GSAP + ScrollTrigger — scroll-scrubbed parallax on portfolio imagery.
• Native scrolling — no scroll-hijacking library. The browser's own physics, exactly as your customers expect.
• A hand-rolled 3D engine — ~550 lines of raw canvas power the opening film: a monitor on a desk boots up, drafts a wireframe city of light, and the camera dives through the glass until the city fills the window — then it stays on as the living backdrop for every page of the site, orbiting and rising as you scroll beneath a blue depth-of-field veil. Perspective projection, staged assembly, data pulses, shooting stars. No Three.js — the math is simple enough to own.
• Google Fonts — Marcellus, Cormorant, Jost, JetBrains Mono.
• FormSubmit — the contact form posts JSON to a free relay; validation and the success animation are custom.

The direction is "websites built like architecture" — a night-time atelier where structures are drawn in light. Two temperatures of light carry the whole palette: tungsten amber (the craftsman's lamp) against cold screen-cyan (the monitor), both floating on midnight ink.

• Cinematic title sequences — the hero assembles like an opening credit: scattered stars resolving into a city.
• Architectural drawing — hairline rules, engraved frames, Roman numerals, and Marcellus (a typeface drawn from Roman inscriptions) give the atelier its drafting-table vocabulary.
• Award-site conventions, used sparingly — smooth scroll, line-reveal typography, and scroll-lit text are familiar from Awwwards-winning studios; here each one is tied to the story (light revealing structure) rather than stacked as effects.
• Fine-dining menus and letterpress plates — the portfolio pieces are presented as engraved "commission plates", not screenshots, so the fictional case studies read as brand artifacts.

Nothing was copied from any single site; the references are genres, not pages.

This site was built end-to-end by Claude (Fable 5) running in Claude Code — art direction, copywriting, code, accessibility review, and deployment — as a demonstration of AI-assisted craftsmanship for the MT Development portfolio.

• Claude Fable 5 — concept, design system, every line of HTML/CSS/JS, and the iteration passes (design review in a real browser at desktop and mobile sizes).
• GPT Image 2 — was planned for photographic portfolio imagery; the account hit its billing limit mid-project, so the six portfolio plates were redrawn as hand-coded SVG artwork instead. The constraint became the signature: every visual on this site is vector, drawn in code, and weighs almost nothing.
• Vercel CLI — automated production deployment.

The lesson worth stealing: let constraints redirect you toward originality. The SVG plates are more distinctive — and roughly 100× lighter — than AI photography would have been.

1. Brief → direction. Fixed the brand values (trust, premium, speed, measurable growth), then chose one metaphor — the atelier — and wrote the palette, type pairing, and signature element down before any code.
2. Design tokens first. Everything lives in CSS custom properties: five ink levels, two light temperatures, a fluid type scale. Every later decision derives from those tokens.
3. Assets before pages. The six SVG commission plates were drawn first so the pages could be composed around real artwork, not placeholders.
4. Pages in one voice. All copy written in a single sitting, in one register — quiet, assured, concrete — then trimmed.
5. Behaviour layer. Navigation, reveals, counters, the manifesto light-up, form validation, and the hero engine — each guarded so the site works fully with JavaScript disabled.
6. Three iteration passes in a real browser. Desktop and mobile screenshots reviewed critically; spacing, hierarchy, contrast, and motion tuned each pass until nothing felt accidental.
7. Deploy + verify. Vercel production deploy, then a final pass on the live URL.

site-1-atelier/
├── index.html          — Home: hero, manifesto, work, services, process
├── about.html          — About us: story, principles, why us, guarantees
├── portfolio.html      — Six commissions with SVG plates
├── contact.html        — Validated form + success animation
├── guide.html          — This page
├── vercel.json         — Clean URLs + cache headers
├── css/
│   └── main.css        — Design tokens + every component
├── js/
│   ├── common.js       — Nav, reveals, counters, form logic
│   └── hero.js         — Hand-rolled 3D constellation
└── assets/
    └── work-*.svg      — Six hand-coded brand plates

No node_modules, no build output, no config beyond one small vercel.json. The whole site is what you see.

Deployed to Vercel as a static site — no build command, no framework preset.

# from the project folder
vercel deploy --prod

vercel.json enables clean URLs (/about instead of /about.html) and long-lived caching for assets:

{
  "cleanUrls": true,
  "trailingSlash": false,
  "headers": [{
    "source": "/assets/(.*)",
    "headers": [{ "key": "Cache-Control",
                  "value": "public, max-age=31536000, immutable" }]
  }]
}

Total transfer for the home page — fonts included — is a fraction of a single stock photograph. That's the quiet advantage of the zero-build approach.

1. Choose one metaphor and write it down. Ours was "an atelier that builds with light." Every decision — palette, typeface, motion — must be defensible from that sentence.
2. Define tokens before components. Open a blank CSS file and write only custom properties: inks, accents, a clamp() type scale, one easing curve. If a value isn't a token, it doesn't exist.
3. Pick typefaces with a reason. Marcellus is drawn from Roman inscriptions — architecture in letterform. Find the equivalent logic for your subject.
4. Draw your imagery as SVG. Gradients + feTurbulence grain + one strong shape per plate. Crisp at any size, ~2 KB each, unmistakably yours.
5. Build the signature element early. A canvas point cloud needs only: an array of 3D points, a perspective divide (screen = center + world × fov / z), and a lerp from scattered to structured positions. Rotate slowly. Stop there.
6. Add motion last, and tie it to meaning. Reveals imitate light switching on; the manifesto lights word by word. If an animation has no story, cut it.
7. Respect the quiet users. Wrap every effect in a prefers-reduced-motion check, keep focus outlines visible, and make the whole site readable with JavaScript off.
8. Iterate three times in a real browser — desktop and a 375px phone — before calling it done. The third pass is where good becomes premium.