Chapter: Website Template for Art Directors

Art directors pitch in treatments, so Chapter reads like one. Each project is a full-screen slide, and one key pulls back to show every slide at once.

**Signature interaction.** A zooming slide sorter: the slide on screen scales down into a grid of every chapter, and the one you choose zooms back up to fill the window. Number keys jump straight to a chapter.

**Features**

- **Slide sorter.** Open with the button or the O key, choose with a click or Enter, close with Escape.

- **Chapters.** One full-screen slide per project, words and picture changing sides.

- **Chapter rail.** Numbers down the edge that mark the chapter on screen and jump to any other.

- **Credits table.** Year, title, client and role.

- **About.** Two paragraphs in the display face and four facts.

- **Long page fallback.** With no JavaScript the deck reads top to bottom.

**What's included**

- A home page and 8 chapter 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 93 to 99 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, art director, creative director, personal portfolio, portfolio template, presentation style, Vite, responsive

**Files**

- Product file: `../studio-chapter.zip`

- Listing cover, 1920x1080: `../covers/studio-chapter-cover.jpg`

- Feed cover, 1080x1350: `../covers/studio-chapter-cover-feed.jpg`

- Reel, 10 seconds: `../reels/studio-chapter-reel.mp4`