Website Template for Creative Technologists

You build the interactive parts, so your site should be one. Runtime is a terminal-green console you drive from the keyboard: press a key, filter your builds and sections in a command palette, and jump straight to any of them.

**Signature interaction.** A keyboard command palette: press slash or control and K to fuzzy-filter the sections and the projects and jump to any of them, fully keyboard operable, with a persistent status bar reading the time, the section and the build count.

**Features**

- **Command palette.** Filter builds and sections and jump to them, by keyboard or mouse.

- **Status console.** A persistent bar reading the time, the current section and the build count.

- **Typed boot line.** A boot line that types on and stops instantly under reduced motion.

- **Work log and cases.** A monospace run list, a changelog, and a case page per build.

- **Progressive by design.** The palette is an enhancement; the nav and the work list do the same job with no JavaScript.

- **Terminal, done modern.** A monospace display over a clean sans, terminal green as the single accent.

**What's included**

- A home page and 8 build case pages, generated from one content file

- Every word, image, link and colour in `content.json`, so no code changes are needed to make it yours

- README and a buyer guide for editing, building and deploying

- The Studio Engine: Vite, TypeScript, smooth scrolling and animation

- Self-hosted open licence (OFL) fonts and generated placeholder images

- QA notes with the test results

**Built right**

- Lighthouse mobile 92 to 100 performance, 100 accessibility, best practices and SEO

- Keyboard accessible, works without JavaScript and respects reduced motion

- About 60 KB of JavaScript gzipped

- Deploys as static files to any host

**Requirements:** Node.js 20 or newer to edit and build.

**Tags:** website template, creative technologist, developer portfolio, web developer, portfolio template, Vite, responsive

**Images, in upload order**

1. `runtime/studio-runtime-01-cover.jpg`

2. `runtime/studio-runtime-02-whats-inside.jpg`

3. `runtime/studio-runtime-03-pages.jpg`

4. `runtime/studio-runtime-04-listing-16x9.jpg` (wide, for a banner or a rectangular layout)