Split Frame Portfolio — Storefront Guide

This Skill turns a folder of photographs into a gallery-grade portfolio site: your best shot fills the whole left half of the screen while a quiet rail of rounded cards scrolls beside it. It looks like a design studio built it, and it ships as one file you can open, host, or hand to a client.

What you get

• A split-frame layout with real presence — a fixed full-height photo pane with a fading carousel on the left, profile, contact, and series cards scrolling on the right, collapsing gracefully on phones.
• The signature notch detail — place names and page labels sit in little pills carved out of the page corner with inverted curves, in both themes, so chrome never covers your photos with boxes.
• Three connected views — Home with the carousel and a 3:4 series grid, Journeys where hovering a place row swaps the giant cover photo beside it, and About with a backdrop image, your story, and a gear list.
• Small, physical motion everywhere — nav letters flip one by one, contact icons roll over into arrows, tiles blur softly under the cursor, and the light/dark switch sweeps diagonally across the page.
• A monochrome system that stays out of the way — near-black on white, soft gray cards, light type; the only color on the page comes from your photography.

How a site gets made

1. Tell the Skill who the portfolio is for and point it at your photos — around 8 to 12 images covers everything. No photos yet? It fills the layout with credited free-license photography you can swap later.
2. It builds the split frame, places your images into the carousel, series grid, and About backdrop, and writes clean labels and alt text for each.
3. It wires the interactions and both themes, then runs its own validator to catch broken accessibility, stray external requests, or emoji icons.
4. Working inside your codebase? It detects your stack and generates proper components in your project's own conventions instead of one big file.

What you need to prepare

• A name, a one-line role, a two-sentence bio, and your contact channels.
• Your photographs, ideally with the places they were taken.

What this Skill does not do

• No CMS, uploads, or admin dashboard — it generates the front-end only.
• No colorful branding: the system is strictly monochrome by design.
• No real-brand logos; camera gear is listed as plain text.