Skip to content
VELTEINStart a project

~/veltein/studio/process

From brief to edge.

Three diagrams, drawn by hand in SVG: the method every project follows, the path a deploy takes to a visitor, and the shape of a larger platform. Each one reads as text for screen readers.

The method

Five steps, one loop back: browser QA sends work back to the build until it passes.

How a VELTEIN site gets builtFlowchart: a brief leads to a design direction, then the build, then browser QA; pages that fail QA go back to the build, and pages that pass go to launch.PASSFIX + RETESTBriefDesign directiontype · palette · layoutBuildUX-STING · staticBrowser QApasses?LaunchLEGENDfocal stepreturn pathdecisionHow a VELTEIN site gets builtFlowchart: a brief leads to a design direction, then the build, then browser QA; pages that fail QA go back to the build, and pages that pass go to launch.PASSRETESTBriefDesign directiontype · palette · layoutBuildUX-STING · staticBrowser QApasses?LaunchLEGENDfocal stepreturn pathdecision
  1. 01Brief Who the site is for, what it must do, and the search terms it has to keep or win.
  2. 02Design direction One deliberate direction (type, palette, composition, one signature element) instead of a re-skinned template.
  3. 03Build UX-STING components and tokens, static output, and 3D or motion only where it earns its weight.
  4. 04Browser QA Real renders at phone and desktop widths, accessibility and performance checks. Anything that fails goes back to Build.
  5. 05Launch Domain, redirects, analytics, Search Console and Bing, then monitoring after go-live.

Deploy to first visit

A static build goes to Cloudflare Pages; visitors are answered from the edge cache. The heavy 3D code arrives only after the page is usable.

From deploy to first visitSequence diagram: the developer builds static files and deploys them to Cloudflare Pages; a visitor's request is answered by the edge from cache, or fetched once from Pages on a miss; three.js loads later, after the page.ALT[cache hit][miss]PNPM BUILDSTATIC OUT/PAGES DEPLOYLIVE ON EDGEGET /FROM CACHEFETCH ONCEHTMLHTML + HEADERSLAZY 3D CHUNKDeveloperterminalBuildnext buildCloudflare PagesoriginEdgeCDN cacheBrowservisitorLEGENDcallreturnHTTP requestheadline responseasync, after load
Sequence diagram. On narrow screens, scroll it sideways.

A platform, CityBook

The public shape of a larger build: a Next.js frontend over a Go service, PostgreSQL for listings and cloud storage for media. Read the case study.

CityBook architecture, public referenceArchitecture diagram: visitors reach a Next.js frontend, which calls a Go service; the service stores listings in PostgreSQL and uploads media to cloud storage, and the frontend serves images from that storage.APPLICATIONDATAHTTPSAPISQLUPLOADSIMAGESVisitorbrowserNext.js frontendReact · TypeScriptGo serviceAPIPostgreSQLlistings · contentMedia storagecloud bucketLEGENDcore servicestoreexternal HTTPread path
Architecture diagram, public reference only: no hosts, keys or internal names.