How it's built
The map you see first is a plain SVG generated at build time: every pin is projected from its coordinates in the project markdown. It costs zero JavaScript and works with JS turned off.
A React island then loads MapLibre only when the map scrolls into view and fades in over the SVG once tiles are ready. If WebGL or the tile server fails, it never appears and the SVG stays.
Cooperative gestures mean the map never hijacks page scrolling. You need two fingers or Ctrl + scroll to move it.
src/pages/index.astro
<MapStatic projects={projects}>
<!-- Hydrates only when visible; fades in over the SVG -->
<MapLive client:visible pins={pins} />
</MapStatic>MapLibre 6 finds its web worker relative to its own file. Once Vite bundles it, that path no longer exists and the map silently fails to load.
The fix is to let Vite bundle the worker and its shared chunk as a separate entry, and hand MapLibre the resulting URL.
src/components/MapLive.tsx
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
const maplibre = await import('maplibre-gl');
maplibre.setWorkerUrl(workerUrl);Every heading size is a clamp() between a mobile minimum and a desktop maximum, so type scales smoothly with the viewport instead of jumping at breakpoints.
src/styles/global.css
--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
--step-2: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
--step-4: clamp(2.4rem, 1.6rem + 3.2vw, 4.4rem);
h1 { font-size: var(--step-4); text-wrap: balance; }These counts aren’t typed in. They are derived from the project content collection at build time, so adding a project updates them automatically.
src/pages/index.astro
const projects = await getProjects();
const suburbs = new Set(
projects.map((p) => p.data.location).filter((l) => l !== 'Online store'),
);
const industries = new Set(projects.map((p) => p.data.industry));A Playwright script visits every client site and captures desktop and mobile screenshots with reduced motion on, so animations don’t blur the capture.
Astro’s <Image> turns each PNG into responsive WebP at build time. The largest went from 962 kB to about 100 kB, and smaller sizes are served to smaller screens.
scripts/screenshot.mjs
const context = await browser.newContext({
viewport: { width, height }, ...rest, reducedMotion: 'reduce',
});
await page.goto(url, { waitUntil: 'networkidle', timeout: 30_000 })
// WebGL sites never go network-idle
.catch(() => page.waitForLoadState('load'));
await page.screenshot({ path: `${slug}-${name}.png` });Every 5 minutes a Cloudflare cron trigger runs the Worker, which requests every client site in parallel, times the response to first byte and writes the results to D1 in one batch.
/api/status aggregates uptime and medians and is edge-cached for 60 seconds. This board is a Svelte island that polls it once a minute.
worker/index.ts
async scheduled(_controller, env, ctx) {
ctx.waitUntil(runChecks(env));
}
// runChecks:
const results = await Promise.all(sites.map(checkSite));
await env.DB.batch([
...results.map((r) => insert.bind(r.site, r.checked_at, r.status, r.ms, r.ok)),
env.DB.prepare('DELETE FROM checks WHERE checked_at < ?').bind(Date.now() - RETENTION_MS),
]);Skill bars and percentages mean nothing to a reviewer. Each tool here is cross-referenced against the stack listed in every project, so it links straight to live sites that use it.
src/pages/index.astro
const usedBy = (tool: string) =>
projects.filter((p) => p.data.stack.includes(tool));position: sticky keeps the header in normal flow, so no layout shift and no JavaScript scroll listeners. color-mix() derives the translucent background from the theme token, so it works in both themes.
src/components/Header.astro
.site-header {
position: sticky;
top: 0;
background: color-mix(in oklab, var(--bg) 82%, transparent);
backdrop-filter: blur(12px);
}Each project is a markdown file validated by a Zod schema. A typo in a field fails the build instead of shipping a broken page.
The same files generate these case-study pages, the homepage cards, the map pins and the list of sites the status monitor checks.
src/content.config.ts
const projects = defineCollection({
loader: glob({ pattern: '*.md', base: './src/content/projects' }),
schema: z.object({
name: z.string(),
url: z.url(),
coords: z.tuple([z.number(), z.number()]),
stack: z.array(z.string()),
// ...
}),
});Every page is prerendered HTML served straight from Cloudflare’s asset cache. The Worker script only runs for /api routes, so static pages never pay for compute.
A pre-deploy check refuses to upload a build that is missing its homepage.
wrangler.jsonc
"assets": {
"directory": "./dist",
"binding": "ASSETS",
"run_worker_first": ["/api/*"]
},
"triggers": { "crons": ["*/5 * * * *"] }No framework. The panel uses the native Popover API, so it closes on Escape or an outside click and returns focus without any custom code.
Code samples are syntax-highlighted at build time with Shiki and shipped as inert <template> elements, so highlighting adds no JavaScript.
src/components/XRay.astro
toggle.addEventListener('click', () => setEnabled(!enabled()));
document.addEventListener('keydown', (e) => {
if (e.key.toLowerCase() === 'x' && !isTyping(e)) setEnabled(!enabled());
});
// Tag click → fill the panel from its <template> and open it
panel.showPopover();Automotive · Clayton South
Large WooCommerce catalogue for Honda performance parts and tuning.
Visit elusiveracing.com.au ↗
Elusive Racing sells Honda performance parts and tuning, both online and from its base in Clayton South.
It has the largest catalogue of these projects: a WooCommerce store with Stripe payments covering components for motorsport and car enthusiasts.