Talinda Comp Card

Summary

A model's public DEPO profile (@talinda.colman). A comp card is what a model actually hands to a team, so it is the centre of the page, next to the name and availability. 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 "Talinda Comp Card".

Goal: A model's public DEPO profile (@talinda.colman). A comp card is what a model actually
hands to a team, so it is the centre of the page, next to the name and availability.

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: 3D flip by click or keyboard, offset book with light parallax, day buttons that show a
request message, Follow toggle.

Design: Schibsted Grotesk (everything; 900 for display). Palette: #f5935f coral from her
portrait, #0f2a1a deep green, #f7f1e6 cream, #2f7d43 green. Layout: Coral hero: card, name,
identity; offset book; availability on deep green; credits list. Motion: Card rotateY, parallax
with rAF, scale on day hover.
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: Schibsted Grotesk (everything; 900 for display) (Google Fonts).
• Palette: #f5935f coral from her portrait, #0f2a1a deep green, #f7f1e6 cream, #2f7d43 green.
• Layout: Coral hero: card, name, identity; offset book; availability on deep green; credits list.
• Motion: Card rotateY, parallax with rAF, scale on day hover.

Built with

Borrowed

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

Config

None — static page.