> ## Content Index
> Fetch the complete content index at: https://werd.io/llms.txt
> Use this file to discover other available public pages before exploring further.

# Writing a web-first resumé
- URL: https://werd.io/writing-a-web-first-resum-c3-a9/
- Published: 2024-04-09T15:46:45.000Z
- Updated: 2024-04-09T15:46:45.000Z
- Author: Ben Werdmuller
- Tags: #Import 2025-06-13 09:20

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](https://resume.werd.io): I gave it its own subdomain at [resume.werd.io](https://resume.werd.io).

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é](https://resume.werd.io/?traditional=1) 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](https://microformats.org/wiki/h-resume).

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.](https://resume.werd.io)

[Syndicated to IndieNews](https://news.indieweb.org/en)