Palette
The CSS custom properties that define the site's aesthetic: colours, typography, spacing, easing. These values are the system; everything else is derived from them.
--accent
--bg
--bg-card
--text
--text-muted
--border
--accent-soft
--surface
The Lab
Experiments and design tokens.
A place for things that don't belong to any specific project, made for the pleasure of making them.
Try the phishing URL scannerTypography
Outfit 300The quick brown fox
Outfit 400The quick brown fox
Outfit 500The quick brown fox
Outfit 600The quick brown fox
Outfit 700The quick brown fox
JetBrains Mono 400const x = () => {}
JetBrains Mono 600const x = () => {}
Fluid typography
The heading uses CSS clamp() to scale between mobile and desktop viewports without breakpoints. Drag the slider to see the curve in action.
Easing curves
The four timing curves defined as CSS custom properties across the site. Each block shows the CSS curve and an animation that uses it, hover to restart.
Spacing scale
The spacing system is built on an 8px grid. Smaller values are 4px (half step) and 6px (three-quarter). Everything else is a multiple of 8.
Liquid Glass
A glass morphism effect built with backdrop-filter, compositing context isolation, and a CSS variable system that works across both themes without duplicating rules. The toggle at top-right activates it, and it works on any page of the site.
glass morphism
Pre-paint theme boot
This IIFE runs inline in every page's <head>, before the browser parses any external CSS or JS, to set theme and glass state with no flash of wrong content. html-minifier-terser compresses it as part of the normal HTML pass.
(function () {
var t = localStorage.getItem('wg-theme') || (
window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
);
document.documentElement.setAttribute('data-theme', t);
if (t === 'dark') document.documentElement.classList.add('dark');
var g = localStorage.getItem('wg-glass') || 'off';
document.documentElement.setAttribute('data-glass', g);
})();Colophon
This site is a React 19 single-page application written in TypeScript, built with Vite, and styled with a combination of Tailwind utility classes and CSS custom properties. Every route is lazy-loaded; there is no SSR. The design system lives in CSS — not in JavaScript.
The edge layer is a single unified Cloudflare Worker. It handles the SPA fallback (serving index.html for every non-asset request), all /api routes (commits, analytics, Discord presence, uptime), scheduled cron jobs for the uptime monitor, and OG meta injection for social crawlers — all in one script, no microservice overhead.
Data persistence uses Cloudflare D1, SQLite at the edge. One database for analytics events with a 30-day rolling window, opt-in only, privacy-first. A second for project data. Static assets live on Cloudflare Pages, served with immutable cache headers and zero origin requests for known paths.
The build pipeline is deliberately manual: npm run build produces the dist/ folder, wrangler deploy ships the Worker. No CI/CD. Not every project needs a pipeline — knowing what you're deploying and when is its own form of discipline.
Both typefaces are self-hosted as variable WOFF2 files: Outfit (48 KB) for display and body, JetBrains Mono (31 KB) for code and monospaced labels. Zero external font requests. prefers-reduced-motion and prefers-color-scheme are respected across every animation and theme switch.