Photographer, Editorial or Index list: the pictures first, the words a click away.
PHOTOGRAPHERS
& CREATIVES!
A portfolio that turns, flips or just gets out of the way of the pictures. Your work as a table, every screen size already drawn, published at a link you choose, and a printed booklet for the meeting.
The cube turn portfolio template zoomed out to every page and breakpoint: the work, a page per product and the studio. Then the camera moves in on the desktop Work page.
CLICK!
THE BRIEF
Lena needs a link by Thursday
Lena Moreau is a documentary photographer in Marseille who photographs people at work. She is also the sample photographer inside the Photographer portfolio template, which makes her our example: everything below is what she would do, in files you can open.
Thursday she meets a magazine's photo editor. The editor will ask for a link. Lena has a folder of JPEGs called FINAL final, a portfolio site she stopped paying for in 2023, and no wish to learn a website builder. She has an evening.
13
portfolio templates
6
that move in 3D
3
screen sizes, already drawn
1
link to send
STEP 1
Pick the way your work wants to be seen
There are thirteen portfolio templates. Each was drawn for a particular kind of maker, but that is a costume, not a rule. A wedding photographer might want the quiet three-across grid; a motion designer might want pages that travel in depth. Here is most of the roll:
POPCRAFT · PORTFOLIOSROLL 01 · 9 OF 13 FRAMES
Photographer
Pictures first, three across
Cube turn
Each page is a face of a cube
Depth push
Pages travel in depth
Flip card
Cards flip over into pages
Carousel reel
Panels on a 3D ring
Card deck
Slides up over the deck
Architect monograph
Pages swing open like a door
Illustrator sketchbook
Soft cards on warm paper
Designer portfolio
Case studies and results
Also on the roll: Editorial, Case study folio, Index list and Studio wall.
The cube turn portfolio template zoomed out to every page and breakpoint: the work, a page per product and the studio. Then the camera moves in on the desktop Work page.
The flip card portfolio template zoomed out to every page and breakpoint. Then the camera moves in on the desktop Work page, square renders four across on a pastel ground.
STEP 2
Your name on it, your type in it
Lena took the Photographer template: a light page, pictures three across and close together, each opening its story, and an about page with commissions. She opened ⋯ › Brand kit…, typed her name and email, picked her two fonts and a single ink colour, and clicked Apply to document. In the clip it is the Creative studio example kit, so the change shows.
The pictures do not move. The kit changes type, colour and text fields; the layout is the template's until you change it. Want to go further? It is an ordinary PopCraft file. The design basics page covers layout, auto layout and components.
The photographer portfolio template, its Work page in view: pictures three across on a light page. From ⋯, Brand kit… opens; the Creative studio example kit is applied, and the type, colours and name change while the pictures stay.
STEP 3
Your work, as a table
Twelve of the thirteen portfolios keep their work as a collection: a table with a row per series, film or product, and fields for the title, the client, the year, the kind, a summary, the story and the credits. The grid on the home page repeats over the rows; the page per project is built from one row.
So Lena does not duplicate pages. She opens the table, clicks Add record, types the cells and drops her pictures in. If her series already live in a spreadsheet, Import CSV brings them in, first row as the field names. Ten series, ten pages, one evening.
The website template with nothing selected. Collections in the Design panel opens the file's content: a Posts collection with a title and a reading time for each record, and under each field's name the token a text says it with. A record is added and its title typed into the new row.
STEP 4
Look at it on a phone
The photo editor will open the link on a phone, between two other meetings. Every portfolio template is drawn at desktop, tablet and phone sizes: switch between them at the top of the canvas and change each one on its own. A grid that is three across on desktop stacks on the phone. A caption that wraps badly gets fixed on the phone frame only.
The website template with its row of three feature cards selected. Phone is picked on the breakpoint bar over the canvas, and the page is laid out again at a phone's width. In the Design panel the row's flow is set to vertical: the cards stack, and an "At Phone" section lists the layout mode as what the row sets differently there. Back on Desktop the cards sit side by side as before.
The website template on the canvas. From the ⋯ menu, Web preview docks the page beside the canvas as a real website. The screen picker goes to another of the site's pages, and the width picker narrows the window to a phone's, where the page reflows.
STEP 5
Published at your own link
Click Publish, type an address (3 to 40 letters, digits and dashes), and the portfolio is online. That is the link Lena sends. Every publish is a version you can open, go back to or take offline, so a bad Tuesday edit is one click from undone.
The domain on her business card is hers, though. Under Also send to, a published site can go to a new GitHub repository or a Vercel project; add the domain to the Vercel project and it answers there. The publishing page and the integrations page have the details.
The website template in the editor, signed in. The Publish button in the top bar opens the Publish dialog. An address is typed, Publish is clicked, the files upload, and the dialog shows the site's link with Version 1 marked Live. The published site is then opened on its own: the landing page shows, and clicking Pricing in its navigation goes to the pricing page.
STEP 5, CONTINUED
Change the address, roll back, take it down
The Terminal SaaS landing page, already published as Version 1 at launch-day. The Publish dialog is opened from the command palette, the address is changed to terminal-hq and Publish again makes Version 2 live at the new address. Both versions stay in the list.
A website that is published as Version 1, with a Vercel account connected. In the Publish dialog, under Also send to, the search field lists every project the connected accounts hold; typing brightside-site narrows it to one, and clicking it adds the project and deploys the site at once. The row shows a link to the deployment, marked Building.
STEP 6
The leave-behind
The meeting runs over; the editor has a pile of cards on her desk. Lena leaves a book instead: the Photography portfolio booklet, twelve A5 pages. A cover, a page about her and who she shoots for, four projects (each a page with one picture to the edge, and a page with the story and a second picture), a contact page and a back cover. Every picture is an image layer to replace, and every one that meets the trim already runs into the bleed. Twelve pages is a multiple of four, so Export as PDF with Booklet — folded and stapled under Pages on the sheet imposes it onto three sheets of A4: print double-sided, fold, staple. For a lighter touch, the 4×6 Postcard carries one photograph and the portfolio address.
A photo to the edge means bleed: stretch the picture past the trim to the bleed line, run Preflight (it flags an image below your dpi, which matters for a photographer), and export a PDF with bleed and crop marks for the print shop. The print and PDF page has the whole run. A résumé to go with it? See résumés and portfolios.
The Photography portfolio booklet template in Design. All twelve A5 pages are in view, laid out as facing pages, then the camera moves to the cover, to the first project's picture page, The Salt Road, whose photograph runs into the bleed, and to its story page with a second picture.
The bold business card template. The Preflight tab opens in the right panel and Run checks both sides: image resolution, safe margins, bleed, hairlines, overflowing text, fonts and transparency, each issue listed with where it is.
AND THEN
Make the work move
A cinematographer's still is a lie by omission. Any frame in the file can be animated: key a slow push-in on a photograph, export an MP4 for Instagram, or a looping GIF for the newsletter. The motion studio has the toolkit, and the 3D and shaders page has the rest of the flourishes.
FILM & MOTION
ROLL!Depth push and carousel reel: wide frames on black, pages that travel.
MAKERS
TA-DA!Cube turn, flip card, card deck, sketchbook: products, characters, covers and drawings.
WHAT YOU SKIP
A portfolio site, before and after
| THE USUAL PORTFOLIO | IN POPCRAFT |
|---|---|
| A portfolio builder subscription and its theme | Thirteen templates, published from the file |
| A new page per project, copied by hand | A row per project, a page built from each row |
| A mobile layout you hope looks fine | Desktop, tablet and phone, each one yours to change |
| A separate tool for the printed book | The portfolio booklet template, imposed for folding |
| A developer for anything that moves | 3D page turns already in the template |
FROM ZERO
Six moves to a link you can send
- 1
Pick a portfolio
Thirteen web-portfolio templates. Pick by how your work wants to be seen, not by the sample job. - 2
Make it yours
A brand kit for the type and colours; your name and email in the kit's fields. - 3
Fill the table
Your work is a collection (in twelve of the thirteen): one row per series, film or project, edited like a spreadsheet, or imported from a CSV. - 4
Check every size
Desktop, tablet and phone are already drawn. Look at each one with your real pictures. - 5
Publish
Publish, type an address, send the link. Your own domain through a Vercel project. - 6
Print the leave-behind
The twelve-page A5 portfolio booklet, folded and stapled, or a postcard with one picture and the link.
BEING HONEST
Your domain goes through Vercel.
A published site has a PopCraft address; a domain of your own means sending it to Vercel. There is no client proofing, and no print sales. The sample work in each template belongs to fictional makers, so replace every picture before you send the link. Especially the cube.
ASKED & ANSWERED
Questions, answered
Can I use my own domain?
A site published from PopCraft lives at a PopCraft address you choose. For your own domain, send the published site to a Vercel project (a one-click integration) and add the domain there. You can also push it to a GitHub repository.
Do the 3D portfolios work on every browser?
The turn, flip and travel are drawn on the GPU with WebGPU where the browser has it, and with CSS 3D elsewhere, so the move plays either way. The pages under it are ordinary, readable web pages.
How do I add a new project?
Every portfolio except the original Designer portfolio keeps its work as a collection: open it, add a record and fill its title, client, year, summary, story, credits and pictures. The grid and the page per project are built from the records, so a new row is a new page.
Is there a print portfolio template?
Yes: the Photography portfolio booklet. Twelve A5 pages: a cover, an about page with clients, four projects, each a full-bleed picture page and a story page with a second picture, a contact page and a back cover. Pictures run into the 3 mm bleed, and because twelve is a multiple of four, in Export as PDF, Pages on the sheet: Booklet — folded and stapled imposes it onto three sheets of A4. For something lighter, the 4×6 and 5×7 postcards are two-sided.
Will it compress my photos?
We have not written down a compression promise here, so we will not make one. Use pictures sized for the web, and look at the published page before you send it to an art buyer.
Can I take the site down?
Yes. Take offline stops the address answering and keeps every version. Make live on any version brings it back.
THE MANUAL, FOR THE DETAILS
CLICK! YOUR TURN.
Portfolios that move, published at your own link. Free to start, in your browser or on your Mac.