Rerun

Rerun is a portfolio for a developer with a sense of humour: freelancers, indie makers, creative coders. Your work is an animated sitcom in a 1950s limited-animation style: flat, textured illustrations in coral, deep teal and mustard on the cream of a title card (or a late-night rerun in the dark theme), a retro display face for titles and a typewriter for credits. The home page is short: the opening titles, three episodes, the cast, a newsletter sign-up and the end credits. The demo is a fictional developer, Ida Castellano, and Biscuit, her cat, who appears in every episode.

Rerun comes in two variants, chosen when you create the site: files/Sanity (static pages, any host) and EmDash (--cms emdash, rendered on request on Cloudflare). The pages are the same in both.

Pages and their content

Page	Edit it in
Home	Pages → Home page (a list of sections)
Episodes (every episode, a filter by season)	Pages → Episodes page
An episode (previously on…, the episode in acts, scenes, how it ended, a guest star, the crew)	Content → Episodes
Shop (services with price tags, a paid hour, questions)	Pages → Shop page and Content → Services
Contact (the enquiry form, a call, questions)	Pages → Contact page
Name, role, availability, navigation, profiles	Pages → Site settings
Buttons, labels, chat, emails, game texts and cue cards	Content → Interface texts
Privacy, terms	Pages → Legal

In titles, words wrapped in *stars* are set in the accent with a painted swoosh under them, as in “Every project is a *pilot*”.

The opening titles

The hero is the site’s signature. Two pictures (Pages → Home page → Hero):

1. The town, a tall picture (9:16) from the sky down a hill to your house. The show’s title card, the headline, one line, Hire and Watch the episodes sit over the sky from the first frame. As you scroll, the camera cranes down the hill and flies in through the lit window. Set Window to where that window is in the picture (left, top, width and height in % of the picture).
2. The living room (16:9), where the camera lands: a lower-third names you, and a sticky note on the fridge carries one of your gags, picked at random on every visit (Hero → Sticky note gags). Set Note to where the note should be pinned.

The room loads after the page, so it never slows the first frame. With reduced motion, or in a browser without scroll-driven animations, the hero is one still: the living room with the title card over it.

All the pictures in the demo were drawn in one style from one reference picture, so the characters stay the same. When you replace them, keep one style throughout.

Episodes

Each episode is a project: a season and an episode number (the episodes page filters by season without any JavaScript), the client, kind and year, a logline, “previously on…” (the brief), a 16:9 still, more scenes with captions, how it ended (results before and after; the first one is shown on the card), a guest star (the client and a quote), the crew (the stack, with logos from Simple Icons) and links. The body is the episode itself, written in acts. Search engines get each one as a schema.org CreativeWork.

The shop

Every service is a box on the shelf with a price tag: a line, the price and a note, how long it takes and what’s in the box. The paid hour is a one-time payment with Stripe (a Price id) or Lemon Squeezy (a variant id) in Pages → Shop page → A paid hour. Without keys the button explains how to switch it on.

Enquiries and the call

The contact page’s enquiry form asks for a name, email, an optional company, what’s needed, a budget and when it should air, each picked from a short list you set in Pages → Contact page → Enquiry form, and a message. The choices are written above the message in the email you receive (Resend, to the email in Site settings). The call books through Cal.com; until it’s connected the page shows a preview of the calendar with your times.

Integrations

Everything works without keys; each feature switches on with its variables in .env.example.

Feature	Where	Service
Book a call	Contact page, loads on click; a preview of the calendar until connected	Cal.com
A paid hour	Shop page (one-time payment)	Stripe or Lemon Squeezy
Newsletter (“next season”)	Home page, with a welcome email	Supabase or Mailchimp
Enquiries	Contact page; to the email in Site settings	Resend
AI chat	Every page; answers about services, prices, episodes and availability	Claude or OpenAI
Search	⌘K or the search button: episodes, the shop, contact	built in, or Algolia
Analytics	Every page; Google Analytics only after consent	Plausible, Umami, Google Analytics, PostHog
Pictures	Production builds	Cloudinary (optional)

Sections

The home page is built from these sections, in any order: Hero (the opening titles), Now streaming (episodes, their stills in old TVs that switch on as they scroll in), The cast (pictures in tilted frames with lower-thirds), Newsletter (a mustard card with a turning starburst) and End credits (the credits roll up beside the closing call, over a picture of the empty room at night, dark in both themes).

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (coral: buttons, marks and swooshes), the second (deep teal: the night sky, the dark theme, small capitals) and the third (mustard: lower-thirds, the sticky note, the newsletter card). Buttons are darkened until their cream text reads; every color is adjusted for each theme, and one that can’t get there stops the build with a message. Brand also sets the fonts (text, titles and credits) and the corners (rounded like an old TV by default, or square). The site opens in its light theme; the toggle switches to the late-night rerun and the browser remembers it.

Availability

Site settings → Availability turns the “on air” light in the header and the footer on (taking on work) or off, with your line next to it.

Languages

Rerun is ready for more languages: see Languages.

The 404 page

A small game, Cue cards: the letters of a line fell off the cue card and went back in the wrong order. Tap one letter, then another, to swap them (or use the arrow keys and Enter) until the line reads right; a hint helps and letters in their place turn teal. The fewest swaps is worked out for every card, and you score 100 × that ÷ your swaps. Five cards; the lines and hints are yours to write (Interface texts → 404 game → Cue cards). The best score is kept in the visitor’s browser.

AI assistants and search engines

• AGENTS.md describes the project for coding assistants (Claude Code reads it through CLAUDE.md, Cursor through .cursor/rules/).
• /llms.txt lists your pages, episodes and services for AI assistants, in every language.
• Pages carry JSON-LD: you as a Person (your role, your profiles, your services as offers), episodes as CreativeWorks and questions as a FAQPage.

Commands

pnpm dev                     # local site, editor at /keystatic
pnpm build                   # production build
pnpm cms sanity schema|seed  # move content to Sanity (see Content → Sanity)

In the EmDash variant: npm run dev, npm run deploy (Cloudflare) and npm run emdash:schema (after changing the content model).