Resume update 2022

My resume was boring. I know resumes aren't meant to be a thrilling adventure but they are meant to stand out and not just be a list of things. I've read a bunch of resumes in my time as team leader and token-other-team-rep-on-panel, and eyecatching resumes do stand out of the pack. My resume was not one of them.

Yup, uninspiring big ol' list. When I upgraded my blog-generation tool from my home-built PHP nonsense to home-built Go nonsense I updated how my resume was generated. And, you guessed it, I generated it as a list.

Generation was using a standard Markdown and Frontmatter parser, so it was nice and quick and easy, but it was also pretty boring. So I started experimenting with what I could change my resume sections to.

Basic introduction

Inspiration for changing the top bit was very obvious, a business card. This took a lot of playing with as I wanted it fun and entertaining, so a flipping card. Coding this was pretty easy as I've already played with card flipping before with other HTML things, and I combined it with my css-only-gallery using labels and inputs. My big struggle was how to get people to understand the business card could be interacted with to flip it. What I've ended up with is a big ol' link coloured spinny arrow at the bottom right to try and drag the attention, as well as having the card slightly twist when that link is hovered, and over-curving that end of the card to show a difference.

If you've got a better idea, I'm all ears. I tried a simple black arrow, I tried [flip] and other methods but this is screaming click me.


Now skills was the ultimate list. First was +5 years experience, then 1-4 years experience, then <1 year experience. That makes sense but is pretty uninspiring. So I played with visual schemes.

Attempt 1: Radar

A good radar indicates near and far, so could be used for skills right?

OK, so visually it's ok but functionally? How am I going to put skills in there without making it a list. Bleh

Attempt 2: Concentric circles

Let's make it a rounded circle to give me more space.

Which is the important end, close showing importance, or far showing how far to go? Again this muddled what I wanted. So I looked further.

Attempt 3: Gartner® Magic Quadrant™

The Gartner® Magic Quadrant™ is known by people in our industry. Gartner prepares a Magic Quadrant for industries, techs, etc. that provides a good visual model for joining two axises of comparison and making it very easy to see what's going on.

This blog, however, is scientific. So I created the Scientific Hextant - six sections rather than plotting individual things against each other. A bit of a joke for people who are familiar with Gartner (which is the sort of people I'd expect would look at my resume), but also works as a way of showing my skills without it being just a table. Now it's a... different sort of table.

OK, fine. It was fun to put together using grids and icons and lists - also making it work on mobiles by converting to single column and removing the explanation of the two column view.


This is the new resume. It's got a fun attention grab at the top, and interesting information presentation, and a link to my LinkedIn as a call to action. It auto-regenerates every time I adjust my markdown.

Some minor tweaks - I removed a lot of old information and changed my Experience to be "This Job" and "Summary of Previous Experience" because why go into explicit detail job by job when it all can be related and communicated more easily? Big thanks to my work colleagues who gave me some excellent feedback on things to change, and slightly less thanks to the friend who compared my basic template to HTML written in frontpage.

Let me know what you think.