VIOLTOWN

An Admin the Staff Actually Run

• · Members, concerts, news, notices, FAQ and the YouTube address are all in the database, with registration, editing, ordering and visibility controlled from the admin. Nobody has to be contacted to fix one line of copy.
• · Saving revalidates the matching public paths through a route table, so a correction is live immediately instead of waiting for a deploy.

Permission in One Layer

• · Authorisation is a Postgres Row Level Security policy rather than a re-check inside each server action. Two copies of permission logic means the day one of them is edited alone becomes an incident.
• · The admin sits on a non-obvious path instead of /admin, and is kept out of search with per-page noindex rather than a robots.txt line that would publish the path it hides.
• · Login accepts an admin ID, not an email address; the conversion happens internally. There is no reason to make a staff member memorise a mailbox to edit a concert listing.

Intro and Scroll

• · Over a dark performance photograph, VIOLTOWN rises one letter at a time and the screen splits top and bottom to reveal the page. It is CSS only, plays once per session and can be dismissed with a click.
• · Lenis gives the scroll weight, and is locked for the duration of the intro so the reveal cannot be scrolled past halfway through.

Hover as Three Things at Once

• · Image scale, a violet dot at the centre of the image, and a label that types itself out one character at a time following the cursor — the three move as a single unit.
• · Bound together, hover reads as one gesture. Run separately they would read as three effects competing on the same element.

Static Public, Dynamic Admin

• · Public pages are read through a client that never touches cookies, which keeps the static cache intact; only the admin renders dynamically.
• · Cross-browser verification (Chrome · Safari · Firefox × desktop/tablet/mobile) and form submission were re-tested in production, not only in preview.

A Five-state Intake Pipeline

• · Booking and story submissions move through new · in review · held · complete · declined, with anonymous insert plus a bot trap on the public side.
• · The intake list paginates at 15, supports checkbox multi-select for bulk delete and bulk state change, and filters by date range, type and state — because an inbox nobody can triage is a form that nobody answers.

Four Colours

White, black, paper (#dcd9d2) and brand violet (#5D1A84) — the violet extracted from the VIOLTOWN logo rather than chosen. On dark planes it switches automatically to a lighter violet so the accent survives its own background.

6px Gutters

The images sit almost against each other, and that mosaic is half the impression the layout makes. Closing the gutter is what makes photography read like a printed page instead of a gallery of cards.

The Header Follows the Plane Beneath It

The first screen is a dark photograph, so the header's text colour tracks the brightness behind it. Fixed white would erase the logo on every light subpage — which is exactly what happens on most sites with a photographic hero.

A Footer Signature

The slogan is laid across the full width as a single line, the first clause in outline and the second in solid violet. The size is measured rather than guessed, so it lands exactly at any resolution.

Real Copy, Real Photography

No lorem ipsum and no stock: only confirmed copy and the client's own shoot. Seventeen members, three programme names and the history all arrived as final text, which is why the layout could be tuned to real line lengths.