Rumpus

Porto creative studio & print room

by Hanan

Repo Live site

Description

Rumpus is a six-page website for a made-up creative studio and print room in Porto. Its home page is a white sheet where small posters, pages and photos drift up a zigzag line; scroll, and the film nearest the middle grows to full screen with its credits. The same line carries the loader, the work section and the footer, and the inside pages cover work, an archive, case studies, the studio and news.

Use it for:

a portfolio for a design, film or print studio
an agency site with case studies and a searchable archive
a reference for building a whole site around one strong layout idea

Workflow

Open Claude Code
Install Claude Code, open a terminal in an empty folder and run claude. Pick Claude Opus 5.5 with the /model command.
Paste the prompt
Copy the prompt on this page and send it as your first message. Claude builds the six pages, the shared styles and scripts, and one data file with all the content.
Find photos and films on Pexels
Download candid studio photos and a few short films from Pexels into a media folder, and ask Claude to use them for the projects.
Preview and fix
Ask Claude to start a local server and open it in your browser. Click through every page on desktop and phone, then ask for one fix per message.
Publish
Upload the folder to any static host, such as GitHub Pages or Netlify, to share it.

Main prompt

Build a multi-page website for Rumpus, an independent creative studio and print room in Porto that makes campaigns, identities, film and print for festivals, labels and small brands.

Use plain HTML, CSS and JavaScript with Lenis smooth scroll and no build step. Six pages: Home, Work, Archive, a case study template, Studio and News. Keep all content in one data file.

Design: white paper, light grey boards (#ececec), black text (#111) and one grey (#9b9b9b). Instrument Sans for everything. Small pills and tabs, nearly square corners. Real candid photos and short films only, no AI images. The one mascot is the Runner: a small running figure drawn on a canvas inside an orange tile at the top left.

Home:
1. Loader: small cards are dealt one by one onto a zigzag line while a pill fills to 100%.
2. Hero: about 20 small cards (posters, pages and photos) drift up the zigzag line with four films riding along. On scroll, the film nearest the middle grows to full screen and its credits rise like a film caption.
3. Studio: one sentence about the studio and four facts that count up.
4. Work: the zigzag line turned on its side, carrying all 8 projects; the one in the middle grows and plays its film.
5. How a job runs: five steps, each with a sentence and a photo.
6. Latest news.

Every page has a pill navigation at the bottom centre, a curtain between pages showing the next page's name, and a footer with contact details, a live Porto clock and a giant "Rumpus" with project covers drifting behind it.

Inner pages:
- Work: a sentence that works as the filter, and a list where the cover follows the cursor.
- Archive: 41 pictures with a word search, sheet and list views and a lightbox.
- Case study: film, story, pictures, credits and the next case.
- Studio: who they are, the team, the presses, clients and opening hours.
- News: a dated feed with tag filters.

Support reduced motion, lazy-load WebP images and only play videos that are on screen.