--- title: Colophon: How This Site Was Built description: The stack behind this site, the decisions in it and what I would change. Hand-written WebGL, no framework, no tracking, one self-contained page. canonical: https://www.hire-web-dev.com/colophon/ section: Site updated: 2026-09-11 author: SumanKumar Phuyal site: hire-web-dev.com note: >- Generated from the page of record at the canonical URL above. The four case studies are placeholder work and their metrics were never measured; imagery is AI-generated concept art. See https://www.hire-web-dev.com/disclosure/. --- # HOW THIS SITE IS BUILT No framework, no build step, no dependencies. Forty pages of hand-written HTML sharing one stylesheet and one script, with the graphics computed rather than downloaded. ## The stack, such as it is Static HTML, one shared stylesheet, one shared script. No React, no bundler, no package manager. The pages are generated from a Python script holding the content as data, which is how forty pages stay consistent without a framework — the generator runs once and produces plain files that need nothing at runtime. Typography is Space Grotesk and IBM Plex Mono from Google Fonts, with a system fallback stack sized to match so a slow font response doesn't shift the layout. Colour is a set of custom properties defined once: near-black through graphite, with electric blue, cyan and violet used sparingly as accent rather than fill. ## Where the visuals come from There are no images anywhere on this site. The film grain is generated at runtime into a canvas and reused as a repeating background. The drifting dust is a small particle field on a single canvas layer. The plates that illustrate each page are CSS — perspective-transformed grids, radial gradients for the spheres, bordered circles for the rings. The single-page build this grew out of used hand-written GLSL for its hero and its metal sphere, raymarched analytically rather than modelled. ## Deliberate constraints Every animation is transform or opacity only. The script is roughly six kilobytes unminified and the whole site works with JavaScript disabled — you lose the cursor, the dust and the reveal animations, and every word remains readable. Reduced motion is a designed path rather than a blanket disable. The point of building it this way isn't minimalism for its own sake. It's that I can hold the entire thing in my head, which means I notice when something gets slower. ## Trademarks and attribution Product and company names on this site are the trademarks of their respective owners, used here only to describe the tools I work with. React is a trademark of Meta Platforms, Inc. Next.js and GSAP are trademarks of Vercel, Inc. and Webflow, Inc. TypeScript and Playwright are trademarks of Microsoft Corporation. Node.js is a trademark of the OpenJS Foundation. WebGL, GLSL and KTX are trademarks of the Khronos Group. Tailwind CSS is a trademark of Tailwind Labs Inc. Figma, Shopify, GitHub, LinkedIn and Google are trademarks of their respective companies. IBM Plex is a trademark of IBM Corporation; Space Grotesk is a typeface by Florian Karsten. None of those companies endorses, sponsors or is affiliated with this site or my work. Naming a tool is a description of what I use, not a claim of partnership or certification. Where a vendor runs a formal partner programme, I am not in it unless a page says so explicitly. No trademark symbols are attached to those names anywhere on this site, which is deliberate: the symbols belong to the owner of the mark, and applying them on someone else’s behalf is a mistake rather than a courtesy. Naming a product accurately to describe your own work is ordinary descriptive use. ## Key facts - Pages: 40 - Dependencies: None - CSS: One file - JS: One file, ~6 KB ## Build - Pages: 40 static HTML - Stylesheet: One, ~13 KB - Script: One, ~6 KB - Images: Zero ## Topics STATIC HTML, NO DEPENDENCIES, CANVAS, CSS GRAPHICS, PROGRESSIVE ENHANCEMENT ## Image ![Figure silhouetted against a vast bloom of cyan and gold filament light, in front of the machine they built](https://www.hire-web-dev.com/assets/img/site-colophon-figure-filament-light-bloom.jpg)