How to make PortalPortfolio yours.

Everything on the walks comes from the Worlds collection. Change a world there and every frame, word and caption that uses it follows.

1 · Your worlds

Open CMS › Worlds. Each item is one project: World (the big word), Project, Client, Discipline, Year, Place, Brief, Story, Image (2880×1800, the full world) and Card image (1600×1000). The order field decides the walk order.

2 · The walks

Home has five walks. Walk 1 shows world 1 with world 2 inside the frame, walk 2 shows world 2 with world 3, and so on. They read the CMS by position (offset), so reordering the collection reorders the walks.

3 · Photos that work

Use landscape photos with open ground in the lower middle: the frame stands there. Keep the horizon around the middle and avoid faces near the centre. Grade them as one family (similar contrast) so the walk feels continuous.

4 · The frame

The bronze frames are images (Frame layers inside each Stage). Swap them for your own transparent WebP if you like; keep the opening in the same place, because the code clips the next world to it.

5 · Motion

PortalMotion.tsx (Assets › Code) runs the walk: add withStage to a tall section with a sticky Stage inside it. Layer names matter: Host, Portal, Portal Image, Frame, Word A, Word B, Intro, Arrival. Without JavaScript the page still shows each world, frame and title.

6 · Colours and type

Colours live in the styles panel (Ink, Night, Bone, Mist, Dim, Line, Signal, Paper). Type uses Clash Display, General Sans and JetBrains Mono presets with tablet and phone sizes set.

7 · Contact form

The form on /contact sends to Framer’s form inbox by default. Connect it to email, Slack or a webhook in the form’s settings.

8 · Pages

Worlds and World (detail), Studio, Services and Service (detail), Journal and Post, Contact, Legal, 404 and this page. Delete this page before you publish.