Skip to main content

Writing a web-first resumé

Describing myself by telling my story

3 min read

I hate writing resumés. There’s always been something about the format that never really sat right with me; each entry presents work I’ve done, sometimes representing many multiple years of my life, without explaining the “why” or the through-line of how I got there. It’s always felt to me like they’re missing the fundamentals of the human being behind them — the values and mindsets of the living, breathing person you’d actually be hiring.

On top of that, mine was stuck in a document, when all of my work is on the web.

So I set out to rewrite mine, make it web-first, and turn it into something that I feel like actually represents me and my career. You can check it out here: I gave it its own subdomain at

The default version now displays my career in chronological order, each life event building on the next, and includes things that, while not technically being work, informed the work I’ve subsequently done. You’ll find stuff like the electronic hypertext magazine I built as a teenager and the popular meme site I built at university, which wouldn’t normally find their way into a standard resumé, but do help define my expertise and how I approach projects.

From that page, you can flip to a more traditional reverse-chronological resumé that omits the non-employment content and removes unnecessary description. Because it’s an edited-down version of my story, rather than a collection of bullet points, it’s probably better than any resumé I’ve had in the past. It’s web-first but there are a few print-only CSS rules in there to make sure it prints or turns into a PDF really nicely. It’s also nicely responsive, so it displays well on both a laptop / desktop and a phone.

Behind the scenes, here’s how it works:

  • Each element of my experience is a standalone HTML snippet file of the form startyear-endyear.html. Some are annotated to be “narrative-only”, which means that they won’t show up in the traditional view. The engine I wrote for this will also omit any entries marked “traditional-only” from the narrative view, but in practice I didn’t use that.
  • In narrative view, the engine reads the files in alphabetical order. In traditional view, the engine reads them in reverse-alphabetical order. The effect is to order the entries chronologically or reverse-chronologically as described.
  • Educational entries are marked as such. In narrative view they’re placed into the main flow; in traditional view they’re displayed at the end of the document.
  • In narrative view, any HTML element with a class traditional is marked as display:none in order to hide it; in traditional view, any HTML element with a class narrative is hidden. This allows me to mix narrative content in with more traditional resumé content and only display them in one view.
  • Everything is marked up with the h-resume microformat.

The most important thing for me was being able to write my story as a story, and then edit down accordingly. I’m pretty happy with it! Let me know what you think.


Syndicated to IndieNews

· Asides · Share this post