Kairos Darkroom
Photographer profile on DEPO for Kairos Levander. A fixed identity column stays beside one large picture per screen, with a filter, a running count, and lists of where the work was published and who it was shot with.
Summary
A photographer's public DEPO profile (@kairos.levander), where the pictures come first. The idea is viewing prints one at a time, with the person's details always within reach. Profile data follows the shape of the site's profile page (front/src/Core/Demo/ProfileDemo.php); the numbers, credits and story text are invented demo content.
Prompt
The brief this page was built from.
Build one page of the DEPO demo album: the public DEPO profile "Kairos Darkroom".
Goal: A photographer's public DEPO profile (@kairos.levander), where the pictures come first.
The idea is viewing prints one at a time, with the person's details always within reach.
Content, using the fields of a DEPO profile: name, handle, location, role, about, links,
followers, following, photos
and for a member also credits and collaborators.
Function: Sticky identity column, filter by kind, picture counter, fade-in per picture, Follow
toggle.
Design: Instrument Serif (name, captions), DM Mono (details). Palette: #111110 near-black,
#ecebe6 white, #a3a29b dim. Layout: Identity column + works column, then Published in and Shot
with. Motion: IntersectionObserver fades and counts each picture.
Keep the real DEPO site header and footer. Use only images from the shared set. Plain HTML, CSS
and vanilla JS, working from 360 px to 1920 px, with reduced motion honoured.Look
- Type: Instrument Serif (name, captions), DM Mono (details) (Google Fonts).
- Palette: #111110 near-black, #ecebe6 white, #a3a29b dim.
- Layout: Identity column + works column, then Published in and Shot with.
- Motion: IntersectionObserver fades and counts each picture.
Built with
| Part | What |
|---|---|
| HTML | public/demo57/index.html |
| CSS | public/demo57/css/demo57.css + the site CSS copies in the same folder |
| JS | public/demo57/js/demo57.js, vanilla; site scripts copied beside it |
| Libraries | none |
| Fonts | Google Fonts as above; site fonts in public/demo57/fonts/ |
| Images | Monochrome covers from /_img/photos/; portrait from /_img/site/first-page/. |
Borrowed
Header, footer and site CSS copied from demo5. Otherwise nothing borrowed.
Config
None — static page.
Suits a site for…
What kind of website would this design fit? Agree with a tag by clicking it, or add your own — a tag can be several words.
No tags yet — be the first.
Comments 0
No comments yet — be the first.