Grafio is a complete portfolio website for creative developers, freelancers, and small studios who get judged on how their own site looks. It ships 17 prerendered pages, three content collections, and a three-layer token system you can rebrand by editing one block of CSS.
Built to win the brief
- The work collection is a case-study structure, not a project gallery. Each entry carries a discipline, a year, a stack, a role, an explicit display order, a standfirst, and a chapters array of image-and-copy rows that alternate sides down the page
- The entry body is deliberately unrendered, which is what stops a case study drifting into a blog post
- A home page with services, a process ladder, a clients strip, a testimonial slider and an FAQ, plus an about page with an experience timeline
- MDX blog with hero images, categories, RSS, and author records the build resolves. Work and blog both grow by adding a folder rather than wiring a route, and the folder name is the slug
A signature effect that survives being turned off
- Images across the heroes, article cards and case-study chapters resolve out of a ripple and stay reactive to the pointer. It's a WebGL 1 fragment shader written here rather than pulled from a package
- <DistortImage> is a wrapper, not an image component. You pass your own <Image> or <Picture> into the slot, and the canvas is revealed only once WebGL is actually running
- No JavaScript, no WebGL, a decode failure, or a visitor who asked for reduced motion each leave the plain image in place, with its alt text, its lazy loading and its position in the crawler's index
- The one real constraint is documented instead of discovered: the home page mounts 15 WebGL contexts against a browser ceiling of roughly 16 per page
Everything is source you own
- 44 UI primitives and 4 content-aware cards, all tailwind-variants recipes, plus 30 section components across 10 page groups
- 571 icons in a typed registry inlined into the HTML at build time, so a wrong name fails type-checking instead of rendering nothing
- 91 animate-* utilities over 89 keyframes, ported with no animation library, plus an owned scroll-driven extension and a global reduced-motion guard the upstream doesn't ship
- No SEO package, no component kit, no icon set, and no React, Preact, Vue or Svelte runtime. Even tailwind-variants and tailwind-merge compute class strings during the build and never reach the browser
Accessible and fast by default
- 44 KB of JavaScript across the entire site, 29 KB of it on the home page, roughly half of which is Astro's own view-transitions router and one config flag from zero
- Native first: real <dialog> elements for dialogs and sheets, the Popover API for dropdowns and the mega menu, CSS scroll timelines behind a @supports guard for reveals
- The contact form posts to an Astro action with accept: "form", so it works with JavaScript disabled, with a honeypot, a three-second time gate and optional Turnstile
- Dark-first, with the theme class set before first paint, so there's no flash of the wrong palette. Set defaultTheme to "system" to follow the device instead
SEO ready
Dynamic robots.txt, llms.txt for AI crawlers, an RSS feed, and a sitemap that filters noindex routes so it cannot contradict the markup. Every meta and Open Graph tag emitted natively, plus typed JSON-LD builders for Organization, WebSite, Article and CreativeWork sharing a stable @id graph. One trailing-slash URL shape enforced in config, and a production build that fails outright if SITE_URL is missing or still the placeholder.
Astro 7, Tailwind CSS v4 with CSS-first @theme tokens, TypeScript 6 in strict mode, and 11 assert-based self-checks that run on Node's own type stripping with no framework and no fixtures. Wired for Cloudflare Workers with Netlify a documented two-line swap, and sharp optimizing every image at build. AGENTS.md, CLAUDE.md, five coding-rule files and a subsystem wiki ship at the root, so Claude Code or Cursor extends the site in the house style.
