{ "$schema": "https://json-schema.org/draft/2020-12/schema", "name": "hire-web-dev.com", "canonical": "https://www.hire-web-dev.com/", "generated": "2026-09-11", "license": "Content readable and quotable with attribution to https://www.hire-web-dev.com/", "disclosure": { "aiGeneratedImagery": true, "placeholderCaseStudies": true, "detail": "https://www.hire-web-dev.com/disclosure/" }, "endpoints": { "index": "https://www.hire-web-dev.com/api/site.json", "profile": "https://www.hire-web-dev.com/api/profile.json", "llms": "https://www.hire-web-dev.com/llms.txt", "llmsFull": "https://www.hire-web-dev.com/llms-full.txt", "feed": "https://www.hire-web-dev.com/feed.xml", "sitemap": "https://www.hire-web-dev.com/sitemap.xml" }, "pageCount": 44, "pages": [ { "url": "https://www.hire-web-dev.com/", "markdown": "https://www.hire-web-dev.com/index.md", "title": "AI-Native Digital Architect · AI & Automation Builds", "description": "SumanKumar Phuyal designs and builds AI-powered products, autonomous agents and automation systems. 12+ years, clients in 21+ countries.", "section": "Home", "topics": [ "REACT", "TYPESCRIPT", "NEXT.JS", "WEBGL", "GLSL", "NODE.JS", "MOTION", "DESIGN SYSTEMS" ], "updated": "2026-09-11", "wordCount": 284, "sections": [] }, { "url": "https://www.hire-web-dev.com/about/", "markdown": "https://www.hire-web-dev.com/about/index.md", "title": "About SumanKumar Phuyal — AI Digital Architect", "description": "Twelve years from web design and digital marketing into AI, software architecture and intelligent systems, and what that route taught me.", "section": "About", "topics": [ "INTERFACE ENGINEERING", "REALTIME GRAPHICS", "MOTION DESIGN", "PERFORMANCE" ], "updated": "2026-09-11", "wordCount": 395, "sections": [ { "heading": "The short version", "url": "https://www.hire-web-dev.com/about/#the-short-version" }, { "heading": "What I work on", "url": "https://www.hire-web-dev.com/about/#what-i-work-on" }, { "heading": "What changed along the way", "url": "https://www.hire-web-dev.com/about/#what-changed-along-the-way" }, { "heading": "What I'm looking for", "url": "https://www.hire-web-dev.com/about/#what-i-m-looking-for" } ] }, { "url": "https://www.hire-web-dev.com/work/", "markdown": "https://www.hire-web-dev.com/work/index.md", "title": "Frontend Development Portfolio: Case Studies", "description": "Four projects documented properly: the constraint, what I built, what it cost and what I would do differently. Real numbers, no screenshots of dashboards.", "section": "Site", "topics": [ "CASE STUDIES", "REALTIME", "COMMERCE", "WEBGL", "DATA VISUALISATION" ], "updated": "2026-09-11", "wordCount": 283, "sections": [ { "heading": "How to read these", "url": "https://www.hire-web-dev.com/work/#how-to-read-these" }, { "heading": "A note on stack variety", "url": "https://www.hire-web-dev.com/work/#a-note-on-stack-variety" } ] }, { "url": "https://www.hire-web-dev.com/work/nexus/", "markdown": "https://www.hire-web-dev.com/work/nexus/index.md", "title": "Case Study: Realtime WebGL Graph, 40,000 Nodes", "description": "An observability platform needed a live dependency graph of forty thousand nodes that stays readable at sixty frames per second while data moves.", "section": "Case studies", "topics": [ "NEXT.JS", "TYPESCRIPT", "WEBGL", "WEB WORKERS", "WEBSOCKETS", "INSTANCING" ], "updated": "2026-09-11", "wordCount": 299, "sections": [ { "heading": "The constraint", "url": "https://www.hire-web-dev.com/work/nexus/#the-constraint" }, { "heading": "What I built", "url": "https://www.hire-web-dev.com/work/nexus/#what-i-built" }, { "heading": "Result and regrets", "url": "https://www.hire-web-dev.com/work/nexus/#result-and-regrets" } ] }, { "url": "https://www.hire-web-dev.com/work/aether/", "markdown": "https://www.hire-web-dev.com/work/aether/index.md", "title": "Case Study: Three.js Product Launch Experience", "description": "A hardware launch site built as one continuous 3D scene, with the hard requirement that it still run acceptably on a four-year-old Android phone.", "section": "Case studies", "topics": [ "THREE.JS", "GLSL", "GSAP", "REACT", "SHADERS", "SCROLL CHOREOGRAPHY" ], "updated": "2026-09-11", "wordCount": 294, "sections": [ { "heading": "The constraint", "url": "https://www.hire-web-dev.com/work/aether/#the-constraint" }, { "heading": "What I built", "url": "https://www.hire-web-dev.com/work/aether/#what-i-built" }, { "heading": "Result and regrets", "url": "https://www.hire-web-dev.com/work/aether/#result-and-regrets" } ] }, { "url": "https://www.hire-web-dev.com/work/velocity/", "markdown": "https://www.hire-web-dev.com/work/velocity/index.md", "title": "Case Study: Next.js Commerce Rebuild, 9s to 1.2s", "description": "A storefront with eleven thousand products took nine seconds to become interactive on mobile. That single number was the entire brief for the replatform.", "section": "Case studies", "topics": [ "NEXT.JS", "EDGE RUNTIME", "TAILWIND", "SHOPIFY", "CORE WEB VITALS" ], "updated": "2026-09-11", "wordCount": 282, "sections": [ { "heading": "The constraint", "url": "https://www.hire-web-dev.com/work/velocity/#the-constraint" }, { "heading": "What I built", "url": "https://www.hire-web-dev.com/work/velocity/#what-i-built" }, { "heading": "Result and regrets", "url": "https://www.hire-web-dev.com/work/velocity/#result-and-regrets" } ] }, { "url": "https://www.hire-web-dev.com/work/orbit/", "markdown": "https://www.hire-web-dev.com/work/orbit/index.md", "title": "Case Study: Interactive Data Report in React Three", "description": "An annual report rebuilt as an interactive document: twenty-two datasets, a mandatory print edition, and readers on screen readers and decade-old hardware.", "section": "Case studies", "topics": [ "REACT THREE FIBER", "TYPESCRIPT", "GSAP", "ACCESSIBILITY", "DATA VIZ", "PRINT CSS" ], "updated": "2026-09-11", "wordCount": 285, "sections": [ { "heading": "The constraint", "url": "https://www.hire-web-dev.com/work/orbit/#the-constraint" }, { "heading": "What I built", "url": "https://www.hire-web-dev.com/work/orbit/#what-i-built" }, { "heading": "Result and regrets", "url": "https://www.hire-web-dev.com/work/orbit/#result-and-regrets" } ] }, { "url": "https://www.hire-web-dev.com/experience/", "markdown": "https://www.hire-web-dev.com/experience/index.md", "title": "Experience: Four Years of Production Interfaces", "description": "Four chapters from foundation work to immersive builds, with what each role actually involved and what I learned that changed how I work now.", "section": "Site", "topics": [ "PRODUCT STUDIO", "APPLICATION WORK", "FRONTEND LEAD", "INDEPENDENT" ], "updated": "2026-09-11", "wordCount": 287, "sections": [ { "heading": "2022 — Foundation", "url": "https://www.hire-web-dev.com/experience/#2022-foundation" }, { "heading": "2023 — Engineering", "url": "https://www.hire-web-dev.com/experience/#2023-engineering" }, { "heading": "2024 — Interaction", "url": "https://www.hire-web-dev.com/experience/#2024-interaction" }, { "heading": "2025 — Immersion", "url": "https://www.hire-web-dev.com/experience/#2025-immersion" } ] }, { "url": "https://www.hire-web-dev.com/contact/", "markdown": "https://www.hire-web-dev.com/contact/index.md", "title": "Contact: Start an AI or Automation Project", "description": "Tell me the constraint that makes your project hard and you get a useful answer, not a brochure. Remote worldwide, reply in two working days.", "section": "Contact", "topics": [ "AVAILABLE Q4 2026", "REMOTE", "CET OVERLAP", "SELECT PROJECTS" ], "updated": "2026-09-11", "wordCount": 289, "sections": [ { "heading": "What to send", "url": "https://www.hire-web-dev.com/contact/#what-to-send" }, { "heading": "What happens next", "url": "https://www.hire-web-dev.com/contact/#what-happens-next" }, { "heading": "Elsewhere", "url": "https://www.hire-web-dev.com/contact/#elsewhere" } ] }, { "url": "https://www.hire-web-dev.com/availability/", "markdown": "https://www.hire-web-dev.com/availability/index.md", "title": "Availability, Rates & Engagement Terms", "description": "Current capacity, how AI and automation engagements are scoped and priced, minimum project size and a realistic start date. Kept current.", "section": "Site", "topics": [ "ENGAGEMENT", "PHASED PRICING", "ASYNC", "ONE PROJECT AT A TIME" ], "updated": "2026-09-11", "wordCount": 285, "sections": [ { "heading": "Engagement shapes", "url": "https://www.hire-web-dev.com/availability/#engagement-shapes" }, { "heading": "How a week works", "url": "https://www.hire-web-dev.com/availability/#how-a-week-works" }, { "heading": "What I don't take", "url": "https://www.hire-web-dev.com/availability/#what-i-don-t-take" } ] }, { "url": "https://www.hire-web-dev.com/services/", "markdown": "https://www.hire-web-dev.com/services/index.md", "title": "Web Development Services: React, Next.js, WebGL", "description": "Five areas of work described in enough detail to tell whether your project is one of them, from interface engineering to performance work.", "section": "Site", "topics": [ "INTERFACE", "CREATIVE DEV", "WEBGL", "PERFORMANCE", "DESIGN SYSTEMS" ], "updated": "2026-09-11", "wordCount": 240, "sections": [ { "heading": "Why these five", "url": "https://www.hire-web-dev.com/services/#why-these-five" }, { "heading": "What's constant across all five", "url": "https://www.hire-web-dev.com/services/#what-s-constant-across-all-five" } ] }, { "url": "https://www.hire-web-dev.com/services/interface-engineering/", "markdown": "https://www.hire-web-dev.com/services/interface-engineering/index.md", "title": "Interface Engineering: Design to Production React", "description": "Turning a design you believe in into a production build without the quiet compromises that usually happen between the design file and the merged branch.", "section": "Services", "topics": [ "REACT", "TYPESCRIPT", "STATE MACHINES", "ACCESSIBILITY", "COMPONENT ARCHITECTURE" ], "updated": "2026-09-11", "wordCount": 272, "sections": [ { "heading": "The problem this solves", "url": "https://www.hire-web-dev.com/services/interface-engineering/#the-problem-this-solves" }, { "heading": "How I work through it", "url": "https://www.hire-web-dev.com/services/interface-engineering/#how-i-work-through-it" }, { "heading": "What you get", "url": "https://www.hire-web-dev.com/services/interface-engineering/#what-you-get" } ] }, { "url": "https://www.hire-web-dev.com/services/creative-development/", "markdown": "https://www.hire-web-dev.com/services/creative-development/index.md", "title": "Creative Development: Interactive & 3D Web Builds", "description": "Scroll-driven storytelling, 3D product scenes and interactive documents, built to hold up on a mid-range phone rather than only in a showreel.", "section": "Services", "topics": [ "SCROLL CHOREOGRAPHY", "THREE.JS", "GSAP", "CANVAS", "ART DIRECTION" ], "updated": "2026-09-11", "wordCount": 257, "sections": [ { "heading": "The problem this solves", "url": "https://www.hire-web-dev.com/services/creative-development/#the-problem-this-solves" }, { "heading": "How I work through it", "url": "https://www.hire-web-dev.com/services/creative-development/#how-i-work-through-it" }, { "heading": "What you get", "url": "https://www.hire-web-dev.com/services/creative-development/#what-you-get" } ] }, { "url": "https://www.hire-web-dev.com/services/webgl-shaders/", "markdown": "https://www.hire-web-dev.com/services/webgl-shaders/index.md", "title": "WebGL & GLSL Shader Development Services", "description": "Procedural environments, instanced geometry at scale and custom materials, written as shaders rather than assembled from an off-the-shelf library.", "section": "Services", "topics": [ "GLSL", "WEBGL2", "RAYMARCHING", "INSTANCING", "FBM NOISE", "MOBILE GPU" ], "updated": "2026-09-11", "wordCount": 266, "sections": [ { "heading": "When a shader is the cheap option", "url": "https://www.hire-web-dev.com/services/webgl-shaders/#when-a-shader-is-the-cheap-option" }, { "heading": "What I actually do", "url": "https://www.hire-web-dev.com/services/webgl-shaders/#what-i-actually-do" }, { "heading": "Constraints I work to", "url": "https://www.hire-web-dev.com/services/webgl-shaders/#constraints-i-work-to" } ] }, { "url": "https://www.hire-web-dev.com/services/performance/", "markdown": "https://www.hire-web-dev.com/services/performance/index.md", "title": "Web Performance & Core Web Vitals Optimisation", "description": "Finding what actually makes a site slow, fixing it, and proving the difference with numbers. Usually LCP, layout shift and excess JavaScript.", "section": "Services", "topics": [ "CORE WEB VITALS", "RUM", "LONG TASKS", "BUNDLE ANALYSIS", "CI BUDGETS" ], "updated": "2026-09-11", "wordCount": 298, "sections": [ { "heading": "Why performance work goes wrong", "url": "https://www.hire-web-dev.com/services/performance/#why-performance-work-goes-wrong" }, { "heading": "How I approach it", "url": "https://www.hire-web-dev.com/services/performance/#how-i-approach-it" }, { "heading": "What you get", "url": "https://www.hire-web-dev.com/services/performance/#what-you-get" } ] }, { "url": "https://www.hire-web-dev.com/services/design-systems/", "markdown": "https://www.hire-web-dev.com/services/design-systems/index.md", "title": "Design System Development for React & Tailwind", "description": "Component libraries and token systems built so they survive handoff, onboarding and the third designer who joins after you, instead of rotting in a side repo.", "section": "Services", "topics": [ "TOKENS", "COMPONENT API", "DOCUMENTATION", "GOVERNANCE", "CONTRAST" ], "updated": "2026-09-11", "wordCount": 261, "sections": [ { "heading": "Why systems get abandoned", "url": "https://www.hire-web-dev.com/services/design-systems/#why-systems-get-abandoned" }, { "heading": "How I build them", "url": "https://www.hire-web-dev.com/services/design-systems/#how-i-build-them" }, { "heading": "What you get", "url": "https://www.hire-web-dev.com/services/design-systems/#what-you-get" } ] }, { "url": "https://www.hire-web-dev.com/process/", "markdown": "https://www.hire-web-dev.com/process/index.md", "title": "How I Work: Discovery, Build and Launch", "description": "Three phases, what happens in each, and what I need from you at every stage. Written so you can tell whether this way of working fits how your team operates.", "section": "Site", "topics": [ "DISCOVERY", "BUILD", "LAUNCH", "PHASED ESTIMATES", "SINGLE DECISION MAKER" ], "updated": "2026-09-11", "wordCount": 247, "sections": [ { "heading": "Three phases, priced separately", "url": "https://www.hire-web-dev.com/process/#three-phases-priced-separately" }, { "heading": "What I need from you", "url": "https://www.hire-web-dev.com/process/#what-i-need-from-you" }, { "heading": "Where my estimates go wrong", "url": "https://www.hire-web-dev.com/process/#where-my-estimates-go-wrong" } ] }, { "url": "https://www.hire-web-dev.com/process/discovery/", "markdown": "https://www.hire-web-dev.com/process/discovery/index.md", "title": "Discovery: Scoping a Web Project Properly", "description": "What gets decided before any code is written, why the constraint matters more than the feature list, and how a fixed scope gets agreed without guesswork.", "section": "Process", "topics": [ "PROTOTYPE", "CODE READ", "CONSTRAINT DISCOVERY", "ASSUMPTION LOG" ], "updated": "2026-09-11", "wordCount": 304, "sections": [ { "heading": "What happens", "url": "https://www.hire-web-dev.com/process/discovery/#what-happens" }, { "heading": "What comes out", "url": "https://www.hire-web-dev.com/process/discovery/#what-comes-out" }, { "heading": "Why it's paid", "url": "https://www.hire-web-dev.com/process/discovery/#why-it-s-paid" } ] }, { "url": "https://www.hire-web-dev.com/process/build/", "markdown": "https://www.hire-web-dev.com/process/build/index.md", "title": "Build Phase: Shipping in Reviewable Slices", "description": "Why work ships in slices you can review rather than one reveal at the end, and how performance budgets get enforced during the build, not after it.", "section": "Process", "topics": [ "VERTICAL SLICES", "PREVIEW DEPLOYS", "ASYNC", "SCOPE TRADES" ], "updated": "2026-09-11", "wordCount": 264, "sections": [ { "heading": "Vertical slices", "url": "https://www.hire-web-dev.com/process/build/#vertical-slices" }, { "heading": "Visibility", "url": "https://www.hire-web-dev.com/process/build/#visibility" }, { "heading": "Scope changes", "url": "https://www.hire-web-dev.com/process/build/#scope-changes" } ] }, { "url": "https://www.hire-web-dev.com/process/launch/", "markdown": "https://www.hire-web-dev.com/process/launch/index.md", "title": "Launch: Measuring a Release Before and After", "description": "What gets measured before launch, what gets watched after it, and the handover that means your team can maintain the thing without calling me every week.", "section": "Process", "topics": [ "MONITORING", "CI BUDGETS", "ERROR TRACKING", "HANDOVER", "POST-LAUNCH" ], "updated": "2026-09-11", "wordCount": 241, "sections": [ { "heading": "Before the switch", "url": "https://www.hire-web-dev.com/process/launch/#before-the-switch" }, { "heading": "Handover", "url": "https://www.hire-web-dev.com/process/launch/#handover" }, { "heading": "The two weeks after", "url": "https://www.hire-web-dev.com/process/launch/#the-two-weeks-after" } ] }, { "url": "https://www.hire-web-dev.com/stack/", "markdown": "https://www.hire-web-dev.com/stack/index.md", "title": "Frontend Stack: React, Next.js, TypeScript, WebGL", "description": "Thirteen tools I actually ship with, each with a note on what I use it for and where I think it stops being the right answer. No logo grid.", "section": "Site", "topics": [ "HTML", "CSS", "JAVASCRIPT", "TYPESCRIPT", "REACT", "NEXT.JS", "NODE.JS", "THREE.JS", "WEBGL", "GLSL", "GSAP", "TAILWIND", "GIT", "FIGMA" ], "updated": "2026-09-11", "wordCount": 260, "sections": [ { "heading": "Why write this down", "url": "https://www.hire-web-dev.com/stack/#why-write-this-down" }, { "heading": "How the pieces fit", "url": "https://www.hire-web-dev.com/stack/#how-the-pieces-fit" } ] }, { "url": "https://www.hire-web-dev.com/stack/react/", "markdown": "https://www.hire-web-dev.com/stack/react/index.md", "title": "React in Production: Structure and Composition", "description": "How I structure React so state stays findable, components stay composable, and the render path does not quietly become the performance problem.", "section": "Stack", "topics": [ "HOOKS", "DERIVED STATE", "RECONCILIATION", "SERVER COMPONENTS", "MEMOISATION" ], "updated": "2026-09-11", "wordCount": 296, "sections": [ { "heading": "What I use it for", "url": "https://www.hire-web-dev.com/stack/react/#what-i-use-it-for" }, { "heading": "The mistake I see most", "url": "https://www.hire-web-dev.com/stack/react/#the-mistake-i-see-most" }, { "heading": "Where I'd use something else", "url": "https://www.hire-web-dev.com/stack/react/#where-i-d-use-something-else" } ] }, { "url": "https://www.hire-web-dev.com/stack/nextjs/", "markdown": "https://www.hire-web-dev.com/stack/nextjs/index.md", "title": "Next.js: Server Components and Edge Delivery", "description": "Where server components genuinely help, where they add ceremony for nothing, and how edge caching changed the way I build catalogue and content pages.", "section": "Stack", "topics": [ "APP ROUTER", "EDGE RUNTIME", "ISR", "STREAMING", "SERVER COMPONENTS" ], "updated": "2026-09-11", "wordCount": 279, "sections": [ { "heading": "What it's genuinely good at", "url": "https://www.hire-web-dev.com/stack/nextjs/#what-it-s-genuinely-good-at" }, { "heading": "What bites people", "url": "https://www.hire-web-dev.com/stack/nextjs/#what-bites-people" }, { "heading": "When I don't reach for it", "url": "https://www.hire-web-dev.com/stack/nextjs/#when-i-don-t-reach-for-it" } ] }, { "url": "https://www.hire-web-dev.com/stack/typescript/", "markdown": "https://www.hire-web-dev.com/stack/typescript/index.md", "title": "TypeScript: Types as a Design Constraint", "description": "Using the type system to make the wrong state impossible to express, rather than as documentation bolted onto JavaScript after the fact.", "section": "Stack", "topics": [ "STRICT MODE", "DISCRIMINATED UNIONS", "RUNTIME VALIDATION", "DOMAIN MODELLING" ], "updated": "2026-09-11", "wordCount": 317, "sections": [ { "heading": "What types are actually for", "url": "https://www.hire-web-dev.com/stack/typescript/#what-types-are-actually-for" }, { "heading": "Where it gets misused", "url": "https://www.hire-web-dev.com/stack/typescript/#where-it-gets-misused" }, { "heading": "Settings", "url": "https://www.hire-web-dev.com/stack/typescript/#settings" } ] }, { "url": "https://www.hire-web-dev.com/stack/webgl-glsl/", "markdown": "https://www.hire-web-dev.com/stack/webgl-glsl/index.md", "title": "WebGL and GLSL: Writing Shaders for the Web", "description": "What writing your own shaders buys you over a library, what it costs in maintenance, and the point where reaching for Three.js is clearly the better decision.", "section": "Stack", "topics": [ "FRAGMENT SHADERS", "FBM NOISE", "RAYMARCHING", "INSTANCING", "BRANCHLESS MATH" ], "updated": "2026-09-11", "wordCount": 289, "sections": [ { "heading": "Why it's a different discipline", "url": "https://www.hire-web-dev.com/stack/webgl-glsl/#why-it-s-a-different-discipline" }, { "heading": "What I use it for", "url": "https://www.hire-web-dev.com/stack/webgl-glsl/#what-i-use-it-for" }, { "heading": "Where I'm still weak", "url": "https://www.hire-web-dev.com/stack/webgl-glsl/#where-i-m-still-weak" } ] }, { "url": "https://www.hire-web-dev.com/stack/motion/", "markdown": "https://www.hire-web-dev.com/stack/motion/index.md", "title": "Motion and Animation: Timing, GSAP, Scroll", "description": "Easing, duration and choreography treated as engineering decisions, because motion that does not explain something is just latency with a curve on it.", "section": "Stack", "topics": [ "GSAP", "REQUESTANIMATIONFRAME", "CSS TRANSITIONS", "EASING", "PREFERS-REDUCED-MOTION" ], "updated": "2026-09-11", "wordCount": 322, "sections": [ { "heading": "What library to use", "url": "https://www.hire-web-dev.com/stack/motion/#what-library-to-use" }, { "heading": "Timing is the actual craft", "url": "https://www.hire-web-dev.com/stack/motion/#timing-is-the-actual-craft" }, { "heading": "Reduced motion", "url": "https://www.hire-web-dev.com/stack/motion/#reduced-motion" } ] }, { "url": "https://www.hire-web-dev.com/stack/nodejs/", "markdown": "https://www.hire-web-dev.com/stack/nodejs/index.md", "title": "Node.js: The Server Half of a Frontend Build", "description": "Build tooling, edge functions and the small amount of backend a frontend project genuinely needs, kept small enough to stay maintainable.", "section": "Stack", "topics": [ "HTTP APIS", "WEBSOCKETS", "STREAMS", "WORKERS", "WEBHOOKS", "EDGE RUNTIMES" ], "updated": "2026-09-11", "wordCount": 312, "sections": [ { "heading": "What I'm comfortable building", "url": "https://www.hire-web-dev.com/stack/nodejs/#what-i-m-comfortable-building" }, { "heading": "What I've learned the hard way", "url": "https://www.hire-web-dev.com/stack/nodejs/#what-i-ve-learned-the-hard-way" }, { "heading": "The honest boundary", "url": "https://www.hire-web-dev.com/stack/nodejs/#the-honest-boundary" } ] }, { "url": "https://www.hire-web-dev.com/stack/tailwind/", "markdown": "https://www.hire-web-dev.com/stack/tailwind/index.md", "title": "Tailwind CSS: Tokens That Survive Handoff", "description": "Using Tailwind as a token layer rather than a shortcut, so design decisions stay legible in the markup instead of scattering into a stylesheet.", "section": "Stack", "topics": [ "UTILITY CSS", "DESIGN TOKENS", "CUSTOM PROPERTIES", "SPACING SCALE" ], "updated": "2026-09-11", "wordCount": 281, "sections": [ { "heading": "The actual benefit", "url": "https://www.hire-web-dev.com/stack/tailwind/#the-actual-benefit" }, { "heading": "The objection, addressed", "url": "https://www.hire-web-dev.com/stack/tailwind/#the-objection-addressed" }, { "heading": "Where it stops helping", "url": "https://www.hire-web-dev.com/stack/tailwind/#where-it-stops-helping" } ] }, { "url": "https://www.hire-web-dev.com/journal/", "markdown": "https://www.hire-web-dev.com/journal/index.md", "title": "Frontend Engineering Journal: WebGL & Performance", "description": "Field notes on scroll-driven animation, shaders, render budgets, accessible motion and state that survives a bad network. Written from shipped work.", "section": "Site", "topics": [ "WRITING", "NOTES", "TECHNIQUE", "OPINIONATED" ], "updated": "2026-09-11", "wordCount": 242, "sections": [ { "heading": "What's here", "url": "https://www.hire-web-dev.com/journal/#what-s-here" }, { "heading": "Why write at all", "url": "https://www.hire-web-dev.com/journal/#why-write-at-all" }, { "heading": "What you won't find", "url": "https://www.hire-web-dev.com/journal/#what-you-won-t-find" } ] }, { "url": "https://www.hire-web-dev.com/journal/scroll-driven-animation/", "markdown": "https://www.hire-web-dev.com/journal/scroll-driven-animation/index.md", "title": "Scroll-Driven Animation Without a Library", "description": "Mapping scroll position to animation progress in one requestAnimationFrame loop, why read and write phases must stay separate, and the frame cost.", "section": "Journal", "topics": [ "SCROLL", "RAF", "LAYOUT THRASH", "PURE FUNCTIONS", "STATE" ], "updated": "2026-09-11", "wordCount": 313, "sections": [ { "heading": "The bug everyone ships", "url": "https://www.hire-web-dev.com/journal/scroll-driven-animation/#the-bug-everyone-ships" }, { "heading": "The reframe", "url": "https://www.hire-web-dev.com/journal/scroll-driven-animation/#the-reframe" }, { "heading": "The cost", "url": "https://www.hire-web-dev.com/journal/scroll-driven-animation/#the-cost" } ] }, { "url": "https://www.hire-web-dev.com/journal/shaders-for-app-developers/", "markdown": "https://www.hire-web-dev.com/journal/shaders-for-app-developers/index.md", "title": "Fragment Shaders for App Developers", "description": "A working introduction to shaders for people who build interfaces: what the GPU does per pixel, and why that changes how you think about a background.", "section": "Journal", "topics": [ "GLSL", "FRAGMENT SHADER", "SDF", "BRANCHLESS", "PRECISION" ], "updated": "2026-09-11", "wordCount": 334, "sections": [ { "heading": "You're writing one pixel's worth of code", "url": "https://www.hire-web-dev.com/journal/shaders-for-app-developers/#you-re-writing-one-pixel-s-worth-of-code" }, { "heading": "Branches are not free", "url": "https://www.hire-web-dev.com/journal/shaders-for-app-developers/#branches-are-not-free" }, { "heading": "There is no debugger", "url": "https://www.hire-web-dev.com/journal/shaders-for-app-developers/#there-is-no-debugger" } ] }, { "url": "https://www.hire-web-dev.com/journal/render-budgets/", "markdown": "https://www.hire-web-dev.com/journal/render-budgets/index.md", "title": "Render Budgets as a Design Material", "description": "Treating the 16.6ms frame budget as a constraint you design within, the way you would a grid or a colour palette, instead of a problem discovered at the end.", "section": "Journal", "topics": [ "FRAME BUDGET", "COMPOSITOR", "PAINT", "BACKDROP-FILTER", "DEVICE TESTING" ], "updated": "2026-09-11", "wordCount": 323, "sections": [ { "heading": "The number", "url": "https://www.hire-web-dev.com/journal/render-budgets/#the-number" }, { "heading": "Why it belongs in the design phase", "url": "https://www.hire-web-dev.com/journal/render-budgets/#why-it-belongs-in-the-design-phase" }, { "heading": "Spending it well", "url": "https://www.hire-web-dev.com/journal/render-budgets/#spending-it-well" } ] }, { "url": "https://www.hire-web-dev.com/journal/motion-with-meaning/", "markdown": "https://www.hire-web-dev.com/journal/motion-with-meaning/index.md", "title": "Motion That Means Something in Interfaces", "description": "The difference between animation that answers a question the user already has, and animation that photographs well but exhausts daily users.", "section": "Journal", "topics": [ "MOTION DESIGN", "INTERACTION", "RESTRAINT", "USER TESTING" ], "updated": "2026-09-11", "wordCount": 314, "sections": [ { "heading": "The test", "url": "https://www.hire-web-dev.com/journal/motion-with-meaning/#the-test" }, { "heading": "What motion is good at", "url": "https://www.hire-web-dev.com/journal/motion-with-meaning/#what-motion-is-good-at" }, { "heading": "What I got wrong", "url": "https://www.hire-web-dev.com/journal/motion-with-meaning/#what-i-got-wrong" } ] }, { "url": "https://www.hire-web-dev.com/journal/accessible-motion/", "markdown": "https://www.hire-web-dev.com/journal/accessible-motion/index.md", "title": "Accessible Motion Is a Design Problem", "description": "Why prefers-reduced-motion cannot be an afterthought, what a proper reduced variant looks like, and how to make motion degrade coherently.", "section": "Journal", "topics": [ "PREFERS-REDUCED-MOTION", "VESTIBULAR", "WCAG", "SUBSTITUTION", "TESTING" ], "updated": "2026-09-11", "wordCount": 295, "sections": [ { "heading": "What the preference actually means", "url": "https://www.hire-web-dev.com/journal/accessible-motion/#what-the-preference-actually-means" }, { "heading": "Why disabling isn't enough", "url": "https://www.hire-web-dev.com/journal/accessible-motion/#why-disabling-isn-t-enough" }, { "heading": "Doing it properly", "url": "https://www.hire-web-dev.com/journal/accessible-motion/#doing-it-properly" } ] }, { "url": "https://www.hire-web-dev.com/journal/state-on-bad-networks/", "markdown": "https://www.hire-web-dev.com/journal/state-on-bad-networks/index.md", "title": "Building State That Survives a Bad Network", "description": "Optimistic updates, retry semantics and recovery after a dropped connection, designed for the train tunnel rather than the office wifi you develop on.", "section": "Journal", "topics": [ "STATE MACHINES", "OFFLINE", "RETRY", "IDEMPOTENCY", "THROTTLING" ], "updated": "2026-09-11", "wordCount": 292, "sections": [ { "heading": "The assumption to abandon", "url": "https://www.hire-web-dev.com/journal/state-on-bad-networks/#the-assumption-to-abandon" }, { "heading": "Three patterns that help", "url": "https://www.hire-web-dev.com/journal/state-on-bad-networks/#three-patterns-that-help" }, { "heading": "How to actually find these", "url": "https://www.hire-web-dev.com/journal/state-on-bad-networks/#how-to-actually-find-these" } ] }, { "url": "https://www.hire-web-dev.com/journal/web-typography/", "markdown": "https://www.hire-web-dev.com/journal/web-typography/index.md", "title": "Web Typography: Loading, Scale and Metrics", "description": "Font loading strategy, variable fonts, fallback metric matching and a clamp-based scale that holds up without shifting the layout when the webfont arrives.", "section": "Journal", "topics": [ "MEASURE", "LINE HEIGHT", "FONT-DISPLAY", "SIZE-ADJUST", "TABULAR FIGURES", "CLS" ], "updated": "2026-09-11", "wordCount": 305, "sections": [ { "heading": "Line length and line height", "url": "https://www.hire-web-dev.com/journal/web-typography/#line-length-and-line-height" }, { "heading": "Loading without the jump", "url": "https://www.hire-web-dev.com/journal/web-typography/#loading-without-the-jump" }, { "heading": "Small details worth the time", "url": "https://www.hire-web-dev.com/journal/web-typography/#small-details-worth-the-time" } ] }, { "url": "https://www.hire-web-dev.com/colophon/", "markdown": "https://www.hire-web-dev.com/colophon/index.md", "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.", "section": "Site", "topics": [ "STATIC HTML", "NO DEPENDENCIES", "CANVAS", "CSS GRAPHICS", "PROGRESSIVE ENHANCEMENT" ], "updated": "2026-09-11", "wordCount": 515, "sections": [ { "heading": "The stack, such as it is", "url": "https://www.hire-web-dev.com/colophon/#the-stack-such-as-it-is" }, { "heading": "Where the visuals come from", "url": "https://www.hire-web-dev.com/colophon/#where-the-visuals-come-from" }, { "heading": "Deliberate constraints", "url": "https://www.hire-web-dev.com/colophon/#deliberate-constraints" }, { "heading": "Trademarks and attribution", "url": "https://www.hire-web-dev.com/colophon/#trademarks-and-attribution" } ] }, { "url": "https://www.hire-web-dev.com/faq/", "markdown": "https://www.hire-web-dev.com/faq/index.md", "title": "FAQ: Hiring an AI & Automation Architect", "description": "Straight answers on agencies, inheriting a codebase, NDAs, pricing, post-launch maintenance and how soon a project can realistically start.", "section": "Site", "topics": [ "FAQ", "AGENCIES", "PRICING", "NDA", "MAINTENANCE" ], "updated": "2026-09-11", "wordCount": 312, "sections": [ { "heading": "Do you work with agencies?", "url": "https://www.hire-web-dev.com/faq/#do-you-work-with-agencies" }, { "heading": "Can you work with our existing codebase?", "url": "https://www.hire-web-dev.com/faq/#can-you-work-with-our-existing-codebase" }, { "heading": "Will you use our framework?", "url": "https://www.hire-web-dev.com/faq/#will-you-use-our-framework" }, { "heading": "Do you do design as well?", "url": "https://www.hire-web-dev.com/faq/#do-you-do-design-as-well" }, { "heading": "How do you charge?", "url": "https://www.hire-web-dev.com/faq/#how-do-you-charge" }, { "heading": "What about ongoing maintenance?", "url": "https://www.hire-web-dev.com/faq/#what-about-ongoing-maintenance" }, { "heading": "Can you start next week?", "url": "https://www.hire-web-dev.com/faq/#can-you-start-next-week" }, { "heading": "Will you sign an NDA?", "url": "https://www.hire-web-dev.com/faq/#will-you-sign-an-nda" } ] }, { "url": "https://www.hire-web-dev.com/privacy/", "markdown": "https://www.hire-web-dev.com/privacy/index.md", "title": "Privacy Notice: No Cookies, No Tracking", "description": "This site sets no cookies, runs no analytics and makes no third-party requests. What little data exists, its legal basis, and your GDPR rights.", "section": "Site", "topics": [ "GDPR", "NO COOKIES", "NO TRACKING", "ARTICLE 13" ], "updated": "2026-09-11", "wordCount": 583, "sections": [ { "heading": "Who is responsible", "url": "https://www.hire-web-dev.com/privacy/#who-is-responsible" }, { "heading": "What this site collects", "url": "https://www.hire-web-dev.com/privacy/#what-this-site-collects" }, { "heading": "What the server necessarily sees", "url": "https://www.hire-web-dev.com/privacy/#what-the-server-necessarily-sees" }, { "heading": "If you email me", "url": "https://www.hire-web-dev.com/privacy/#if-you-email-me" }, { "heading": "Your rights", "url": "https://www.hire-web-dev.com/privacy/#your-rights" }, { "heading": "No automated decisions", "url": "https://www.hire-web-dev.com/privacy/#no-automated-decisions" }, { "heading": "Changes", "url": "https://www.hire-web-dev.com/privacy/#changes" } ] }, { "url": "https://www.hire-web-dev.com/terms/", "markdown": "https://www.hire-web-dev.com/terms/index.md", "title": "Terms of Use & Content Licence", "description": "The rules for using this website: what you may reuse, who owns what, the limits of what is promised, and why an enquiry is not yet an engagement.", "section": "Site", "topics": [ "TERMS OF USE", "LICENCE", "LIABILITY", "PLAIN LANGUAGE" ], "updated": "2026-09-11", "wordCount": 439, "sections": [ { "heading": "Using this site", "url": "https://www.hire-web-dev.com/terms/#using-this-site" }, { "heading": "Who owns what", "url": "https://www.hire-web-dev.com/terms/#who-owns-what" }, { "heading": "What I do not promise", "url": "https://www.hire-web-dev.com/terms/#what-i-do-not-promise" }, { "heading": "Enquiries are not engagements", "url": "https://www.hire-web-dev.com/terms/#enquiries-are-not-engagements" }, { "heading": "Law and changes", "url": "https://www.hire-web-dev.com/terms/#law-and-changes" } ] }, { "url": "https://www.hire-web-dev.com/disclaimer/", "markdown": "https://www.hire-web-dev.com/disclaimer/index.md", "title": "Disclaimer: Scope of the Technical Writing", "description": "The journal is field notes rather than professional advice, case study metrics are project-specific, and code samples are illustrative not audited.", "section": "Site", "topics": [ "DISCLAIMER", "NO WARRANTY", "AS-IS", "LIMITS" ], "updated": "2026-09-11", "wordCount": 303, "sections": [ { "heading": "The writing is experience, not instruction", "url": "https://www.hire-web-dev.com/disclaimer/#the-writing-is-experience-not-instruction" }, { "heading": "Performance numbers are specific", "url": "https://www.hire-web-dev.com/disclaimer/#performance-numbers-are-specific" }, { "heading": "Code is provided as-is", "url": "https://www.hire-web-dev.com/disclaimer/#code-is-provided-as-is" }, { "heading": "External links", "url": "https://www.hire-web-dev.com/disclaimer/#external-links" }, { "heading": "Availability", "url": "https://www.hire-web-dev.com/disclaimer/#availability" } ] }, { "url": "https://www.hire-web-dev.com/disclosure/", "markdown": "https://www.hire-web-dev.com/disclosure/index.md", "title": "Disclosure: No Affiliates, No Sponsorship", "description": "No affiliate links, no sponsored posts, no paid placement and no referral fees. Includes how the imagery on this site was produced and what it is not.", "section": "Site", "topics": [ "DISCLOSURE", "NO AFFILIATES", "TRANSPARENCY", "AI IMAGERY" ], "updated": "2026-09-11", "wordCount": 337, "sections": [ { "heading": "Nobody pays for a mention", "url": "https://www.hire-web-dev.com/disclosure/#nobody-pays-for-a-mention" }, { "heading": "If that ever changes", "url": "https://www.hire-web-dev.com/disclosure/#if-that-ever-changes" }, { "heading": "Client relationships", "url": "https://www.hire-web-dev.com/disclosure/#client-relationships" }, { "heading": "How the imagery was made", "url": "https://www.hire-web-dev.com/disclosure/#how-the-imagery-was-made" }, { "heading": "Tooling", "url": "https://www.hire-web-dev.com/disclosure/#tooling" } ] }, { "url": "https://www.hire-web-dev.com/impressum/", "markdown": "https://www.hire-web-dev.com/impressum/index.md", "title": "Provider Details — Freelance Web Designer", "description": "Who operates this site and how to reach them. A one-person independent practice contracted with directly, so there is no corporate layer in between.", "section": "Site", "topics": [ "PROVIDER DETAILS", "FREELANCE", "LEGAL NOTICE", "CONTACT" ], "updated": "2026-09-11", "wordCount": 309, "sections": [ { "heading": "Who runs this site", "url": "https://www.hire-web-dev.com/impressum/#who-runs-this-site" }, { "heading": "Contact", "url": "https://www.hire-web-dev.com/impressum/#contact" }, { "heading": "Tax and registration", "url": "https://www.hire-web-dev.com/impressum/#tax-and-registration" }, { "heading": "If you are in the EU and need more than this", "url": "https://www.hire-web-dev.com/impressum/#if-you-are-in-the-eu-and-need-more-than-this" }, { "heading": "Liability for links", "url": "https://www.hire-web-dev.com/impressum/#liability-for-links" } ] }, { "url": "https://www.hire-web-dev.com/accessibility/", "markdown": "https://www.hire-web-dev.com/accessibility/index.md", "title": "Accessibility Statement: WCAG 2.1 AA", "description": "Measured contrast, keyboard and screen reader support, reduced motion handling, and an honest list of the places this site still falls short of the standard.", "section": "Site", "topics": [ "ACCESSIBILITY", "WCAG 2.1 AA", "EAA", "SELF-ASSESSMENT" ], "updated": "2026-09-11", "wordCount": 478, "sections": [ { "heading": "Commitment", "url": "https://www.hire-web-dev.com/accessibility/#commitment" }, { "heading": "What has been done", "url": "https://www.hire-web-dev.com/accessibility/#what-has-been-done" }, { "heading": "Known shortfalls", "url": "https://www.hire-web-dev.com/accessibility/#known-shortfalls" }, { "heading": "Telling me about a problem", "url": "https://www.hire-web-dev.com/accessibility/#telling-me-about-a-problem" }, { "heading": "Scope", "url": "https://www.hire-web-dev.com/accessibility/#scope" } ] } ] }