Photographer portfolio website
A portrait and wedding photographer's site: work filtered by genre, how a shoot goes, about, reviews, prices and call booking. Everything hand-drawn on a paper background.
This scenario shows which blocks make up a photographer's site or any other portfolio, and in what order. Open the demo to see the whole page, then take the sections you need from the catalog one by one.
What it is made of
15 catalog blocks in page order. Each one is installed with its own command; nothing is recreated.
1. Notebook background
Notebook sheetsurface-025
Squares across the whole page; sections make their paper transparent.
2. Header
Hand-drawn navbarsketch-019
A sketched camera, stroke-underlined links, a hatched button.
3. First screen
Hand-drawn herosketch-016
A headline with a circled word and a taped photo.
4. Scroll and margins
Paper stack on scrollsketch-018
Wraps every section: sheets land on the desk, a thread and doodles in the margins.
5. Work
Hand-drawn filtered gallerysketch-017
A gallery with genre filter and a fly-out lightbox.
6. Dividers
Hand-drawn Dividersketch-013
A hand-drawn line with a caption between sections.
7. Headline mark
Hand-drawn Marksketch-009
A highlighter under one word.
8. Shoot steps
Hand-drawn Stepssketch-012
Five process steps in circles.
9. Cards
Hand-drawn Cardsketch-007
Step details and three priced packages.
10. About
Hand-drawn aboutsketch-020
A photo, circled numbers, a checkmark list.
11. Reviews
Hand-drawn Quotesketch-015
Three handwritten quotes.
12. Price buttons
Hand-drawn Buttonsketch-001
“Choose” in every package card.
13. Booking
Hand-drawn bookingsketch-021
A form: day, time, phone, consent.
14. Footer
Hand-drawn footersketch-022
The next story on a taped photo and the studio row.
15. Margin stickers
Hand-drawn stickersketch-023
Three notes: weather rescheduling, real people, free dates.
Pro
The exact composition, page source and agent link are in PRO
The demo and the block list are open to everyone. Subscribers see every block's props as in the demo, the theme rules, the image prompts and one link an AI agent uses to build the same page.
Get PROFAQ
- What is the “Photographer portfolio website” page made of?
- 15 catalog sections in order: Notebook sheet, Hand-drawn navbar, Hand-drawn hero, Paper stack on scroll, Hand-drawn filtered gallery, Hand-drawn Divider, Hand-drawn Mark, Hand-drawn Steps, Hand-drawn Card, Hand-drawn about, Hand-drawn Quote, Hand-drawn Button, Hand-drawn booking, Hand-drawn footer, Hand-drawn sticker. Each one is a separate VibeUI item.
- How do I build this page with an AI agent?
- Press “Copy the scenario for AI” and paste it into Cursor or Claude Code: the agent gets the page source, shared theme rules and image prompts, and installs every section from the registry with the shadcn CLI.
- Is the scenario free?
- The live demo and the list of sections are open to everyone. The page source and the instruction for the agent come with PRO.