
Split Frame Portfoliov1.0.3
Use this Skill to build website page.
Build a photography portfolio where the work fills half the screen: a fixed full-height photo pane on the left, a scrolling rail of quiet rounded cards on the right, and labels carved into the photo corners with small inverted-curve notches. Hovering a project swaps the pane to its cover. Home, a work index with a case study per series, a journal, about with a timeline, a print shop with a wall preview, contact and licensing come in light and dark themes, as one self-contained file that works offline.
Picked most often by
Updated Oct 3, 2026
Preview gallery
Runs in
Generates with
Similar Skills
View all skillsWhat you get
- A full photographer site: home carousel, work index with filters and hover-swapped covers, a case study per series, journal articles, about, prints, contact, licensing and a not-found page
- The split-frame look: fixed photo pane, rounded card rail, notched labels carved from the page, a floating header pill, letter-flip nav and a diagonal light and dark theme switch
- Working parts: case-study lightbox, journal search, a print picker with live price and wall preview, a validated contact form and a newsletter sign-up, in one offline file
Good fit
- Landscape, travel and editorial photographers who want an image-first site with quiet, gallery-like chrome
- Photographers who sell prints or take commissions and want case studies, prices and an enquiry form in one place
- Wedding or portrait photographers, illustrators, lodges or galleries that can map stories, packages or shows onto the same pages
Not for
- Colourful or maximalist brands: the chrome is strictly monochrome and all colour comes from the photographs
- Text-heavy blogs or docs with little imagery: the layout depends on strong photographs in every pane
- Sites that need a CMS, uploads or live checkout: print enquiries and forms confirm on the page only
About this Skill

Split Frame Portfolio builds a photography site where your best shot fills the left half of the screen while a rail of quiet rounded cards scrolls beside it. Colour comes only from the photographs, and every label that touches a photo is carved out of the page with two small notches. The example is Aster Field, a fictional landscape and travel photographer, with 18 connected pages.

What you get
- A home page with a quiet carousel, intro card, channel cards, series tiles, a recent commission, a clients marquee, a journal list and a booking card
- A work index with filter chips, search and a list or grid view, plus a case study per series with a frame lightbox, approach steps and results
- Journal articles, about with facts and an experience timeline, a print shop with a framed wall preview, contact with a validated form, licensing and a not-found page
- Light and dark themes with a diagonal switch, letter-flip nav, and one file that opens in any browser and works offline

How to use it
- Share your name, role, city, a short bio, contact details and 8 to 12 photographs grouped by series.
- Your agent maps the photos to the pane, tiles and case studies, writes the series pages and generates anything missing.
- Open the file, hover the work list, try both themes and the print picker, and ask for changes in plain words.

Your own photographs work best. Generated images are stand-ins and may carry your agent's image tool usage charges.
What you need before you start
- You bring
- Name, one-line role, base city, a short bio and contact details · 8 to 12 photographs grouped into series, with places and years · Series briefs and results, print sizes and prices, and licensing terms (optional; gaps become listed placeholders)
- Dependencies
- Node.js 18 or newer on your agent's machine, to run the bundled script that builds the single offline file · Internet access while the file is built, so the fonts can be downloaded once and embedded · An image tool in your agent, only for photos you do not supply (otherwise the template photos serve as temporary placeholders)
- Outside costs
- If you do not supply every photo, the missing ones are generated with your agent's own image tool, which may incur that tool's usage charges; otherwise the template photos stay as temporary placeholders. Nothing else uses a paid service.
- Last tested
- v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
User reviews
Loading reviews…









