For the portfolio review in person. Same brand, three sizes, on the business cards page.
RÉSUMÉS &
PORTFOLIOS!
A one-page résumé the hiring software can actually read, and a portfolio site that makes the interviewer lean in. Both from real templates, both done this weekend.
The illustrator sketchbook portfolio template, signed in. Publish in the top bar opens the Publish dialog; the address pip-hollis is typed and Publish puts Version 1 live. The published site is then opened on its own, as a visitor sees it.
HIRED!
THE BRIEF
Pip applies for the job on Monday
Meet Pip Hollis, our example. Pip paints in gouache and ink from a shed at the end of a garden in Bristol, and Pip is the illustrator inside our Illustrator sketchbook portfolio template, so that's the site we'll publish here. A picture-book publisher has posted a job: staff illustrator, apply by Monday, “CV and a link to your work”.
The usual way: a CV in a word processor that turns into soup when anyone else opens it. A portfolio on a site builder with a monthly fee and a theme that looks like a dentist's. Or a PDF of pictures so big the recruiter's email bounces it. And somewhere in between, hiring software that reads the fancy two-column CV as one long, confused sentence.
Here is the weekend in PopCraft instead: one résumé that prints and parses, one portfolio site with its own address.
2
résumé templates: A4 and Letter
13
portfolio site templates
6
of them turn pages in 3D
3
layouts each: desktop, tablet, phone
SATURDAY MORNING
One page, written once
New › File, search “résumé”. There are two. Modern résumé (A4) is one A4 page with a header, ruled sections and dated entries, which is what a UK publisher expects. Classic résumé is the US Letter one: sections and entries that reflow as you type, with the header filled from a few fields.
The header's name, title and contact line are fields you set once. Every job is an entry component with a role, the dates and what you did, so adding the bookshop mural from 2021 is one more entry that looks like the others. Copy reflows; nothing needs nudging by a pixel. The résumé page sizes have no bleed and a wide margin, because a CV goes through a desk printer, not a guillotine.
SATURDAY, 11 AM
A PDF the robots can read
⋯ › Export › Export as PDF…. Tick ATS-friendly (résumés) and the dialog explains itself: every text layer is embedded as selectable text, ordered top to bottom, with real spaces between words. On a résumé page size it's already ticked.
That matters more than it sounds. A lot of applications go through an applicant tracking system before a human sees them, and an ATS can only rank what it can read. A PDF with words drawn as shapes, or columns read straight across, gives it nonsense. This gives it Pip.
The classic résumé template on US Letter. ⋯ › Export › Export as PDF… opens the PDF export, and ATS-friendly (résumés) is ticked: every text layer is embedded as real, selectable text in reading order, which the note under it explains.
X-RAY
What the hiring software actually sees
Same résumé, two readers. On the left, the page. On the right, the text the ATS-friendly PDF hands a parser, in the order it reads it.
WHAT A PERSON SEES
PIP HOLLIS
Illustrator · Bristol · hello@piphollis.art
EXPERIENCE
Freelance illustrator — 2019 to now
Picture books, editorial, shop windows.
SKILLS
Gouache · Ink · Procreate · Lettering
WHAT THE ATS READS
- PIP HOLLIS
- Illustrator · Bristol · hello@piphollis.art
- EXPERIENCE
- Freelance illustrator — 2019 to now
- Picture books, editorial, shop windows.
- SKILLS
- Gouache · Ink · Procreate · Lettering
Real text, top to bottom, with real spaces between the words. No letters drawn as shapes, no columns read across.
No promises about any particular system: they all parse differently. Real text in a sensible order is the part a file can control, so that's the part we do.
SATURDAY AFTERNOON
Thirteen portfolios, pick a mood
Every portfolio template is a whole site: a Work page, a page per project and a Studio or About page, laid out for desktop, tablet and phone. Six of them move between pages in 3D, drawn on the GPU with WebGPU and in CSS 3D where that isn't available.
Sketchbook
Illustrator, warm paper
Photographer
Documentary photography
Editorial
Fashion photography, magazine style
Case folio
Brand and product design
Index list
Graphic design, type-led
Designer
Product designer, four case studies
Studio wall
Motion and CGI studio
Architect
Architecture monograph
3D: pages swing like a door
Card deck
Album-cover artist
3D: pages stack like cards
Cube turn
Industrial design
3D: pages are faces of a cube
Depth push
Cinematographer
3D: pages travel in depth
Flip card
Character design
3D: cards flip into pages
Carousel reel
Visual effects studio
3D: pages on a 3D ring
Pip takes Sketchbook: pictures on softly framed cards three across, a page per piece with how it was made, and an about page with commissions. A friend who shoots weddings would take Photographer; a 3D artist, Cube turn.
SATURDAY EVENING
The work is a table, not a pile of pages
Here's the trick that makes these easy to keep up. The work isn't twelve hand-made pages; it's a collection, a table with a row per project. Open Collections in the Design panel and there it is. In the clip, the photographer template's twelve series: title, place, year, kind.
The Work page repeats a card over every row. Each Project page reads one. Add a row and the site grows a card and a page. Got your list in a spreadsheet already? Import CSV. Pip's paintings went in a row each, in about the time it takes to make a cup of tea.
The photographer portfolio template with nothing selected. Collections in the Design panel opens the file’s content: the pictures as records, each with its title, place and story, which the Work page repeats over and each Project page reads.
SUNDAY
Publish, then put the link on the résumé
Click Publish in the top bar. Type an address (3 to 40 letters, digits and dashes): Pip types pip-hollis. Click Publish. The site is built, uploaded and online, and the dialog shows the link with Version 1 marked Live.
Then the clip opens the link as a stranger would: the cream page, the serif headline, the fox with the map. That address goes on the résumé's contact line, export the PDF once more, and the application is done before Sunday lunch. More on how publishing works is on publish a website.
The illustrator sketchbook portfolio template, signed in. Publish in the top bar opens the Publish dialog; the address pip-hollis is typed and Publish puts Version 1 live. The published site is then opened on its own, as a visitor sees it.
NEXT WEEK
Keeping it fresh
Every publish is a version. New painting? Add a row, Publish again, and only the files that changed upload. Regret it? Make live on the version before. Want a tidier address? Type a new one and publish again. Want your own domain? Under Also send to, the published version can deploy to a Vercel project of yours, and the domain goes there.
A website that is already published as Version 1. The headline is changed on the canvas, the Publish dialog is opened from the ⋯ menu and Publish again makes Version 2, which goes live. Make live on Version 1 puts the earlier version back; Take offline stops the site; Make live on Version 2 puts the new one online again. The site is then opened on its own and shows the new headline.
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.
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.
FROM ZERO
The weekend, in six moves
- 1
Pick a résumé
Modern résumé (A4) or Classic résumé (US Letter). One page, ruled sections, dated entries that are components. - 2
Write it
Name, title and contact are fields in the header. Each job is a row with a role, dates and what you did; add one and it matches. - 3
Export the PDF
⋯ › Export › Export as PDF… with ATS-friendly on: real text, in reading order, for hiring software and people alike. - 4
Pick a portfolio
Thirteen site templates, from a quiet photographer’s grid to pages that turn on a 3D cube. - 5
Fill the table
Your work is a collection: a row per project. The Work page repeats over it and each Project page reads one row. - 6
Publish
Publish, type an address, click. It’s online. Put the link on the résumé.
WHAT YOU'D JUGGLE
The job hunt, the old way and this way
| THE USUAL WAY | IN POPCRAFT |
|---|---|
| A CV that reflows into soup on someone else’s computer | A PDF, laid out exactly, fonts embedded |
| Fancy columns the ATS reads as one long sentence | ATS-friendly: real text, in reading order |
| A site builder subscription and a dentist’s theme | Thirteen portfolio templates, published from the same app |
| A new page built by hand for every project | A row in a collection; the site makes the page |
| A 40 MB PDF of pictures that bounces | One link |
| Fear of breaking the live site | Versions: Make live on the old one |
ALSO HANDY
While you’re at it
A PRINTED PORTFOLIO
WHIRR!For the interview, the Photography portfolio booklet: twelve A5 pages, a cover, an about page, four projects as spreads and a contact page. Export it as a booklet and it prints on three sheets of A4 to fold and staple. And ⌘P prints the résumé on your own printer.
A BIGGER STUDIO
CLICK!Photographers and studios, with moving portfolios: see photographers & creatives.
The Photography portfolio booklet template: twelve A5 pages. ⋯ › Export › Export as PDF… opens the PDF export, and Pages on the sheet is set to Booklet — folded and stapled, which imposes the twelve pages onto three sheets of A4.
An event poster. Command-P opens Print: what to print (every page), how the pages sit on the paper (single pages), and Full bleed, already on for a print page. Crop marks is turned on; the dialog says what each sheet will be.
WHERE WE STOP
We make you look good. You get the job.
PopCraft doesn't write your résumé, apply for you or promise any ATS will rank it. A published portfolio is public to anyone with the address, it lives at a PopCraft address unless you send it to your own Vercel, and your plan sets how many sites you can have. The publishing docs cover the rest.
ASKED & ANSWERED
Questions, answered
What is ATS-friendly, and is it on by default?
Applicant tracking systems read the text out of a PDF. The ATS-friendly option embeds every text layer as selectable text, top to bottom, with real spaces between words. It is on by default for files on a résumé page size, and anyone can tick it for any file. Gradient or image-filled text comes out in a solid colour.
Does it guarantee my résumé passes every ATS?
No. Each system parses differently, and none of them publish exactly how. The option gives them real text in a sensible order, which is what they need most; a single column and plain headings help too.
Where does my portfolio live?
Publish puts it online at the address you choose, as a name before PopCraft’s site domain. To use your own domain, send the published version to your own Vercel project from the Publish dialog and add the domain there.
Do the 3D page turns work on every browser?
They are drawn on the GPU with WebGPU where the browser has it, and in CSS 3D elsewhere. Every portfolio template is laid out for desktop, tablet and phone.
Can I update the site later?
Yes. Every publish is a version of its own. Publish again to put the latest online, go back to an earlier version with Make live, or take the site offline. Only the files that changed are uploaded.
Is there a printed portfolio template?
Yes: the Photography portfolio booklet, twelve A5 pages with bleed, for photographers, illustrators and designers. A cover, an about page with clients, four projects as spreads, a contact page and a back cover. In Export as PDF, Pages on the sheet: Booklet — folded and stapled imposes it onto three sheets of A4.
Is a published portfolio private?
No. Anyone with the address can see a published site. Don’t publish work a client hasn’t cleared, and leave your home address off.
THE MANUAL, FOR THE DETAILS
HIRED! YOUR TURN.
A résumé that prints, a portfolio site that wows. Free to start, in your browser or on your Mac.