Website Template for Illustration Agencies

An illustration roster is a wall of work, so Parade makes the portfolio a board you roam. Drag it with inertia, read your place on a minimap, and click a drawing to bring it into focus, the way you would wander a studio.

**Signature interaction.** A pannable canvas of work: drag to roam a board larger than its window with inertia, a live minimap with a pin per piece, and a click that zooms the board to frame a piece.

**Features**

- **Pannable canvas.** Drag the board to roam it, nudge it with the arrow keys, click a piece to zoom to it.

- **Live minimap.** A scaled map of the board with your current view and a clickable pin per piece.

- **Grid fallback.** On phones and with no JavaScript the board becomes a responsive grid, so every project is reachable.

- **Case pages.** A page per project with a hero, a brief and a gallery, from one content file.

- **Clients ticker.** A single, smooth ticker of client names that pauses on hover.

- **Loud, friendly type.** A characterful display over a clean geometric sans, a deep lime as the single accent.

**What's included**

- A home page and 10 project 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, illustration agency, illustrator portfolio, illustration website, portfolio template, Vite, responsive

**Images, in upload order**

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

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

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

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