PP

StyleVault

High-fashion portfolio and private showroom for stylists

TypeScript Live

Overview

StyleVault is a digital portfolio and private showroom for celebrity stylists. The public surface showcases editorial hero carousels and collection galleries; invited clients access a password-protected vault for time-bound bookings and curated looks.

A dedicated manager experience at /pp/manager supports carousel and collection authoring, booking lifecycles, budgets, receipts, and stylist settings. The live deployment referenced from this portfolio is the stylist site at peterpapapetrou.com.

Public and client experience

Editorial presentation

Full-bleed hero carousel and collection grids with motion, scroll, and typographic treatment tuned for high-fashion presentation.

Private vault

Token-based vault URLs let approved clients review selected work in a dedicated session, separate from the public marketing site. Each vault can have a readable custom handle and an optional passphrase.

Vault templates

Thirteen storyboard templates, from the original editorial layouts to publicist-style formats such as lookbook masthead, dossier spine, pitch slide and press book. Seven named colour pairs restyle a vault in one click. The Metropolis template shows one chapter per screen with swipe, arrow-key and prev/next navigation.

Leave-behind export

Any booking's vault can be exported as a self-contained HTML file, a PDF or an MP4, built in the browser from the saved storyboard so clients keep a copy after the link expires.

Client presentations

Password-gated presentation decks for pitches and quotes, with phone swipe navigation, embedded video and print-ready PDF export of the process and quote pages.

Portfolio telemetry

Public surfaces emit events into the shared analytics model so usage can be compared alongside other KervinApps properties.

Manager console

Stylists sign in at the manager gate; authenticated users land in the console with a fixed top navigation and a dedicated mobile pattern so layout and scroll stay predictable inside the admin shell.

Primary sections

  • Carousel — Curate the public hero deck: slide picks, ordering, and timing so the home story matches seasonal campaigns.
  • Collections — Build editorial galleries: collection metadata, cover imagery, publish flags, and which grids appear on the public site.
  • Bookings — Roster of client engagements: create bookings, open the booking editor, publish or rotate vault links, preview the client-facing vault, and retire bookings when engagements end.
  • Settings — Site-wide controls such as carousel timing, hero captions, scroll behavior, upload limits, session length for vault access, and keyboard or workflow shortcuts.
  • Guide — In-product documentation hub with topics that mirror how managers actually work (see below).

Inside a booking

Each booking exposes specialized tools for money, media layout, and paperwork:

  • Summary — The default tab: storyboard and fittings first, then a financial summary with budget-versus-spent tiles, per-currency net spend, a merchant receipts table, and client activity including per-tab views and scroll depth.
  • Details — Title, client identity, template and colour pair, URL handle, passphrase, and vault link lifecycle (issue, rotate, or revoke).
  • Budget — Rates, fees, budget lines, currency, and internal notes visible only in the manager shell.
  • Storyboard — Canvas-style layout for the client vault: rows, cells, and media placement clients see when they open their link. A per-booking media rail accepts photos and video from the phone library, the computer, paste or drag-and-drop, and a rich-text drawer formats presentation notes, talking points and captions.
  • Receipts — Uploads and returns, pool imports, edits, and safe unlinking when documents move between bookings.

Additional manager flows

Storyboards and Scan surfaces support deeper asset and layout workflows outside the default hub path, with breadcrumbs reflecting the current mode (for example storyboard previews or scan utilities).

Help where you need it

Small ? helpers sit beside fields across Bookings, Collections and Settings, each linking to the matching guide. A vault templates cookbook and a bookings manual show every template with screenshots.

Faster, safer media

Fitting and receipt uploads are auto-rotated, resized and given lightweight thumbnails, so lists load quickly while lightboxes keep full resolution. Media uploaded to a booking can only be opened by a signed-in manager or that booking's vault link.

Technology stack

Next.js
TypeScript
Tailwind CSS
Framer Motion
PlanetScale (MySQL)
Netlify

Try StyleVault

Open the public stylist portfolio or return to the portfolio homepage.