Split Frame Portfolio

Keep the photography in view while readers explore the story behind it. Split Frame reserves half the wide screen for a full-height image and places a scrolling rail of quiet cards beside it. Selecting work changes the visual context, while series pages, journal entries and print enquiries give the images somewhere meaningful to lead.

What you get

  • A connected photographer site with a home carousel, work index and series case pages, journal and articles, an About page with facts and an experience timeline, Prints, Contact, Licensing and a missing-page state. The fictional reference has eighteen pages; the structure adapts to your own bodies of work rather than borrowing the sample photographer’s record.
  • A fixed photo pane and rounded content rail with labels cut into photo corners, floating header, letter-flip navigation and light/dark themes with a diagonal transition. The home page combines introduction and channel cards, series tiles, a recent commission, client strip, journal list and booking entry.
  • Work filters, search, list/grid choices and a hover-swapped cover pane. Series cases add a frame lightbox, approach steps and results. Journal search supports longer context without turning the site into a text-only publication.
  • A print picker with size/frame pricing and a wall preview, plus validated contact and newsletter forms. These are local selections and enquiries, not a connected print checkout or delivery system.
  • A standalone HTML file by default, with photos and fonts embedded for offline opening. An existing or requested framework project can use real routes and shared pane state instead; image planning, visual rules and output checks are included in the workflow.

Before you choose

Choose this when images should stay present throughout browsing, not merely decorate the opening. For every series, pick a cover that survives the tall pane and supporting frames that add context. Compared with writing-led portfolios, the split layout spends more space on visual presence and therefore demands stronger imagery on every route.

Good fit

  • Landscape, travel and editorial photographers who want images to remain dominant while visitors browse selected series.
  • You take commissions or sell prints and need context, prices and an enquiry path alongside the work.
  • A portrait or wedding photographer, illustrator, gallery or venue can map stories, packages or shows to the same detail-page structure when sufficient strong imagery is available.

Not for

  • A maximalist interface or a brand that needs colorful page chrome. Here the interface is monochrome and the photographs provide the color.
  • A text-heavy journal or documentation site with little imagery. The split pane depends on strong pictures across the page family.
  • A CMS, photo-upload service or live checkout. The provided print and contact flows confirm locally until actual services are connected.
  • Presenting generated or sample photographs as your commissioned work, or implying edition, licensing and exhibition facts that were not supplied.

How to use

You say/split-frame-portfolio Build a portfolio site for Aster Field, a landscape photographer in Edinburgh, using my photos.
  1. Prepare name, role, base, biography and public contacts, then select eight to twelve of your own photographs grouped into series. Include a strong vertical cover, supporting frames, portrait and process image where available. Supply accurate series descriptions, credits, locations and years and any print/licensing terms.

  2. Map the collection to the site before editing its opening. The package describes three to twelve bodies of work and a home carousel of selected frames. Keep filters and list/grid data tied to the actual series, and make each case explain its approach and result rather than repeat a caption.

  3. Use supplied work first. Missing pictures can be generated with the agent’s image tool, which may charge, or temporarily filled with clearly labeled sample assets. Generated portraits are stand-ins, and generated photography should not be passed off as your captured work.

  4. Build the default embedded file or adapt the design into the existing framework’s components, routes and shared photo-pane state. Align print sizes, framing choices, prices and contact prefill with the actual offer; remove print sales where they do not apply. The offline build needs Node.js 18 or newer and internet access once to embed fonts; the finished file makes no network requests.

  5. Inspect the whole site at wide and phone widths. Try work hover and a usable touch path, both themes, lightbox navigation, journal search and the print picker. Check dark/light notch colors, supported diagonal transitions and reduced motion, then test local form errors and confirmation and connect real delivery separately.

Requirements and costs

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.
Publisher testing
v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT

FAQ

User reviews

—0 reviews

Select a star to share your experience.

No reviews yet. Ratings appear once readers share real experiences.

Similar Skills

View all skills