Saria Looks

Summary

A stylist's public DEPO profile (@saria.casadi). A stylist is judged by looks, not single frames, so each look gets a name, a story and a colour. 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 "Saria Looks".

Goal: A stylist's public DEPO profile (@saria.casadi). A stylist is judged by looks, not single
frames, so each look gets a name, a story and a colour.

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: Widening panels on hover, focus and tap; sticky stacked cards that shrink back; Follow
toggle.

Design: Bricolage Grotesque (everything). Palette: #efe6d4 sand, #0b2a33 ink, #0d4b5c teal,
#c9522a rust, one field colour per look. Layout: Panels; name and identity; five stacked looks;
kit tags; worked with list. Motion: flex-grow transition, sticky stack with rAF scale.
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: Bricolage Grotesque (everything) (Google Fonts).
• Palette: #efe6d4 sand, #0b2a33 ink, #0d4b5c teal, #c9522a rust, one field colour per look.
• Layout: Panels; name and identity; five stacked looks; kit tags; worked with list.
• Motion: flex-grow transition, sticky stack with rAF scale.

Built with

Borrowed

Header, footer and site CSS copied from demo5. Otherwise nothing borrowed.

Config

None — static page.