The Wallet CV: a creative CV by Harrison Greener

The idea

Graduates send hundreds of CVs and hear nothing back. I wanted mine to be something you'd keep.

This is my final-year Digital Media Project at Manchester Metropolitan University. The question behind it is a simple one: how do you stand out in the creative industry when everyone is sending the same PDF?

My answer was a wallet. Everything you'd want to know about me fits in the things you'd find in one. A licence says who I am. Business cards hold my projects. The receipt is my CV. A scratchcard gives you reasons to hire me. And a phone on the desk is how you get in touch.

I made it twice: once for real, in leather and paper, and once on the web, where you can open the wallet and pull out each item. The project's main output is a short film about making it, inspired by a series of increasingly ridiculous CVs made to avoid being ghosted by companies.

What's in the wallet

Who I amDesigner Licence

A driving licence redesigned as a design licence: my photo, my skills as categories and a signature. The real one is an NFC card, so tapping it with a phone opens this site.

My workProject cards

Eight business cards stepped in the pocket, one per project. Each has its own front and back, and opens that project's page.

My CVThe receipt

My CV printed on till roll, folded concertina-style, with "CV" scribbled across it in Sharpie. It unfolds as it comes to you.

Why hire meInstant Hire

A scratchcard in a hidden slot by the fold. Scratch the silver for three reasons to hire me.

Get in touchThe phone

Lying on the desk with the real time on its lock screen. Pick it up, unlock it, and you're in a message thread with me.

For realismThe fiver

Tucked in the money slot, because a wallet with nothing in it doesn't look like anyone's wallet.

Making the real thing

I didn't want the website to be a picture of something that doesn't exist, so every item on it is a real object I've designed and printed. The receipts, the project cards and the licence are made. The leather wallet itself is on its way, and so is the scratch-off sticker for the scratchcard.

The receipts are printed on till roll, the same width as a shop receipt, and I wrote "CV" across each one by hand. I couldn't find a red Sharpie, so they're green, and the scribble on the website is green to match.

The project cards are printed at business-card size so they fit the wallet's card slots. The licence is an NFC card with a printed sticker on top, and the chip links straight to this site.

Photo to come:
the real wallet, open, once it arrives

Photo to come:
printed receipts with the green "CV"

Photo to come:
business cards and NFC licence

The Designer Licence, front. My photo, my name and my disciplines listed like vehicle categories.

The Designer Licence, back, with a QR code — The back, with a QR code to the site for phones that don't read NFC.

Instant Hire, the scratchcard

I wanted one thing in the wallet that wasn't a project, something you'd actually want to play with. A scratchcard was perfect: everyone knows what to do with one.

I designed it like a classic UK lottery card rather than in my own colours: a yellow sunburst, chunky outlined lettering, and a cartoon of me holding the very card you're looking at, with a coin ready. Under the silver are three reasons to hire me. The back has the small print, done as a light wink rather than a hard sell.

It's printed at business-card size, 85 × 55 mm, so it fits the hidden slot. The silver is a separate layer, printed onto scratch-off sticker paper (on order as I write this), with the panel outlines and my G monogram in the pattern, the way real cards have the lottery logo in theirs.

Instant Hire scratchcard, front — The front, as printed. The panels on the right are where the silver goes.

Instant Hire scratchcard, back — The back: how to play, what you win, and the terms.

The silver scratch layer with three numbered panels — The scratch layer, printed separately and cut to fit.

Cartoon of me holding the scratchcard and a coin — The cartoon. The card in my hand is a tiny copy of the real one, baked in.

Photo to come:
the printed card, half scratched, once the scratch-off stickers arrive

The scratchcard on the website, partly scratched — On the site, a £1 coin scratches the first panel for you, then it's your turn. The scratches are rough and uneven like a real coin, and silver shavings flick off as you go.

Building the 3D wallet

The website is the wallet again, built in three.js. I didn't download a 3D model. Every layer of leather, every card and every stitch is built in code, measured from a photo of the real wallet at about 47 pixels to the centimetre, so everything is the right size.

A real wallet has layers, and so does this one: the lining, a hidden slot by the fold, a backing, eight cards stepped behind the pocket front, and saddle stitching that sits on whichever layer is on top. Where cards slide over the thread, the stitches are pressed flat, the way they are in real leather.

There are no buttons. The wallet is the navigation: open it, hover over an item to see its name, and pull it out. Cards come up to you so you can turn them over. The receipt unfolds on its way. Hovering over the keys, mug or pen makes them wobble a little, but only the wallet opens.

The closed wallet on a desk with keys, a phone, a mug and a pen — The desk when you arrive. The phone shows the real time.

The CV receipt pulled out of the wallet and unfolded — The receipt CV, unfolded and scrollable, crumples included.

The small details

Most of the time on this project went into things you might not notice on the first visit. These are my favourites.

The cartoon me as the portrait in the menu

The cartoon me as the runner in the mini game

The cartoon me on the Instant Hire scratchcard

A character for the whole portfolio

I wanted the portfolio to have a face, so the cartoon version of me works almost like a mascot. He looks the same everywhere: the curly hair, the grey T-shirt, the navy trousers and the black and white trainers. He watches you in the menu, runs in the mini game and holds up the scratchcard. Alongside him is my actual GREENER logo, which carries through the site, the receipt and the scratchcard, down to the G monogram hidden in the silver. It's all one brand, so every piece feels like it came from the same person, because it did.

Four photos of me: walking, mid-step, crouching and jumping, cut out on white

The same four poses redrawn as cartoon sprites

A photoshoot for a mini game

At the bottom of the menu there's a little runner game, and the runner is me. I did a photoshoot walking, stepping, crouching and jumping, then turned each pose into a drawn sprite. There are two sets, smiling and straight-faced, and every now and then he switches between them.

Photo of my hand pointing, with my ring and chain bracelet — Pointing

Photo of my hand curled to grab — Grabbing

My hand is your cursor

I photographed my own hand pointing and grabbing, then turned each photo into a tiny pixel cursor, keeping the chain bracelet. It points by default and switches to the grab hand over anything you can pick up. Look closely at your cursor on the site: that's me.

Jump the blocks, duck the bars

Space, the up arrow or a click to jump, the down arrow to duck. It speeds up the longer you last, and keeps your best score for the visit.

Half cartoon, half photo: the drawing of me lined up exactly with the real photo it was drawn from

A drawing that watches you

The cartoon is drawn from a real photo of me, and the two line up exactly: eyes, smile, hair and shoulders. In the menu he follows your cursor with his eyes and blinks now and then. Hover over him and he breaks into pixels that flip to the real photo underneath, without my face moving at all.

Close-up of the faint Greener crest on the licence — The Greener crest

Close-up of the licence's wavy-line security background — The custom background

A licence down to the security print

The Designer Licence copies the details of a real UK driving licence. The blue-to-pink background is custom, built from fine wavy lines and rosettes like the security print on the real card, with a small ghost photo and my signature. Faint in the corner, where a hologram would be, is the Greener crest: a coat of arms I drew as a secondary brand element, with a knight's helmet, a shield and a tree. Most people won't spot it, and that's the point.

My real keys: a deadlock key, a door key, a fob, a white Lego piece and an AirTag, on a strap — My actual keys

The same keys modelled in 3D on the website's desk — The keys on the desk

Those are my real keys

The keys on the desk are modelled on my own: the long deadlock key for the bottom lock, a key for the top lock, the fob, a Lego piece I use to hang them up, and an AirTag, because I lose my keys. Hover over them and they give a little wobble.

A cup of tea that sloshes

Hover over the mug and it wobbles, and the tea inside sloshes from side to side and settles, the way it would if you knocked the desk. The surface even catches the light as it moves.

The receipt CV with CV scribbled on it in green

The green Sharpie

I couldn't find a red Sharpie when I wrote on the printed receipts, so they're green. Rather than fake red online, the website's receipt is green too, so both versions match.

Every project dresses as itself

Each project page takes its colours and fonts from that project's own code, so Stack looks like Stack and Big Brother Inc. is in pixels. Some pages run the live project right there.

A CV you scroll through

The CV section plays my timeline from 2012 to now as you scroll. Jobs are dark, education is white, and a counter in the corner keeps the year.

The contact orbs and the mini game at the foot of the menu

Contact you can push around

Email, GitHub and LinkedIn are orbs with real physics. They nudge away from your cursor, get knocked by a fast swipe, and hop now and then.

Green
#73956F

Ink
#1F1F1F

Paper
#F2F2F0

No pure black, no pure white

My brand is green with a very dark grey and a very light grey, never pure black or white. It's softer on the eye and runs through everything, from the site to the print files.

Little touches everywhere

A scrollbar down the left edge that flips colour over the footer. A note for phone visitors that it's best on a computer, with a button to copy the link for later. A fresh scratchcard every time you pull it out.

The Greener brand

The GREENER wordmark is older than this project. I first made it when I was 14 or 15: a striped, multi-line green logo where the G flowed into the R. For this portfolio I reimagined it, redrew it from scratch and turned it into a clean vector.

The details are deliberate. The two Es in GREENER stack into one tall E. A thin cut where the G meets the R sets the G apart, so it works on its own as a monogram, which turns up as the favicon, in the scratchcard's silver and debossed on the wallet. Just under that join, the little triangle of space between the G and the R's leg is shaped like the tip of a pen nib, a small nod to being a designer if you look for it. And GR sits on a higher baseline than EENER, a bit of movement kept from the original.

I put it all into a short brand handbook, in the same style as the one I made for Stack: the logo's story and anatomy, how to use it, the colours and contrast pairs, and the type.

1 / 11Open full size ↗Download PDF ↓

How it's put together

The whole site is one hand-written HTML file with three.js for the 3D, no framework and no build step. Most textures, like the crumpled paper and the scratch foil, are drawn in code. The print files come from the same HTML, exported to PDF at print resolution, so the screen and the paper are the same design.

It's hosted for free on GitHub Pages under my own domain, harrisongreener.co.uk.

3Dthree.js, built from code, no models

Front endHTML, CSS and JavaScript

PrintTill roll, card, NFC cards, scratch-off sticker

HostingGitHub Pages, custom domain