The Exhibition

Summary

DEPO presented as a contemporary photography show. An entrance wall gives the title "The speed of your vision", a short intro and a floor plan of the rooms; Room 1 is a salon hang of ten community portraits; Room 2 a deep green corridor of twelve magazine covers walked sideways; Room 3 a charcoal room where each value is a curator's wall text beside one work; the exit lists everyone on show and ends on "The next room is yours" with Join DEPO and the five roles. Each work has a small museum label. One of eleven parallel home-page concepts (home10–home20) made after the owner picked home3.

Prompt

The brief this page was built from.

Build a new home page for DEPO, a community where photographers, models, stylists, make-up
artists and magazines meet, shoot together and get published. Keep the real DEPO site header and
footer. Use real content only: the sections With your eyes, Connect, Locals, Depo Magazine,
Awards, Blog; the five roles; the six values (Collaboration, Responsibility, Inclusivity,
Empowerment, Tolerance, Innovation); the magazines Lucid, Palisade, ALAÏS, Delorian, VOÍD, DUSK,
Kaleido, Persona.Code; the shared covers and portraits. The bar is the home3 page (demo5):
premium, photo-led, editorial, rich but tasteful motion. Vanilla JS, self-hosted assets,
360–1920 px without horizontal scroll, visible focus, reduced motion respected.

Concept — "The Exhibition": the home page is a walk through a contemporary photography
exhibition of the DEPO community. Calm stone/warm-grey gallery walls (not cream), works hung at
different sizes with generous space and small museum wall labels (name, magazine), soft parallax
depth between works and walls as you scroll, rooms changing wall tone (e.g. stone → deep green
room → charcoal room). An elegant serif for titles + refined sans. Sections: entrance wall text
(what DEPO is), Room of portraits (people), Room of covers (magazines), the six values as the
curator's wall texts, exit with Join DEPO. Live thing: click any work to open a full-screen
detail view with zoom and its label, arrow keys/swipe between works.

Look

• Type: Newsreader (optical size 6–72, weights 300/400/500, display set at 300) for titles and the curator's statements; Hanken Grotesk 400/500/600 for text and labels.
• Palette: stone wall #d2cec7 with ink #1d1c1f and soft ink #4d4943; gallery green #1e3a2d with #e9ede6 / #b4c5b8; charcoal #252427 with #e6e5e3 / #b2ada5; mat white #f4f3f0; brand green #3f8c50 for hover and focus on stone, brand yellow #ffb500 for focus in the dark rooms. The site header sits on solid ink.
• Layout: entrance — big light serif title left, three works hung at different heights right, a four-door floor plan (Room 1 Portraits, Room 2 Covers, Room 3 Six values, Exit Join DEPO) below. Portraits — a salon hang: works of different sizes, some with a white mat, each with a soft hanging shadow and a label (name, "Portrait, DEPO community"). Covers — a long green wall of covers in a row. Six values — wall text plus one work per value. Exit — credits, call to action, roles.
• Motion: the room crossing the middle of the screen paints <main> stone, green or charcoal with a 700 ms colour transition (wall, text and labels together). Works and wall texts marked data-depth drift at their own rate. At 760 px and wider the covers corridor pins and scroll walks you sideways; each cover shifts slightly inside its frame. The opening title rises line by line and the entrance works are hung one after another; staggered fade-ups; frames lift on hover and press. Reduced motion: static, the corridor is a plain sideways row.
• Live thing: click any of the 31 works to open a full-screen viewer with its label, room and "n of 31"; zoom by click or tap (at that point) or a button, pan by pointer or drag, arrow keys and swipe between works, Escape zooms out then closes; focus is trapped and returned. Without JS every work is a plain link to its image.

Built with

Borrowed

• The real DEPO site header and footer markup, styled by the /demo9/css/* snapshot of the DEPO front (taken at commit 43a7a8b^), with the site's own /demo9/js/* scripts.
• The real DEPO copy (values, roles, magazines, people) from the shared builder data of the home10–20 session; the wall-text lines ("The next room is yours" …) were written by the builder.
• Google Fonts (Newsreader, Hanken Grotesk); DEPO's magazine covers and community portraits.
• Skills: frontend-design and taste-skill (house rules and inspector), as the brief required.
• No third-party code.

Config

None — static page.

Notes

• The six works in the values room are first-page images labelled with magazine names from the live home template (Silk&City MAG, StyleIt, En Vogue Essence, GlamHub, Muse MAG, Chic Odyssey); that pairing was flagged for the owner to confirm.
• On phones the corridor is swiped sideways ("Swipe along the wall"), on purpose.