Supercharge your CV using developer tooling

Tue Aug 30 2022

Since I became a contractor in 2014, I have had many jobs, applied for even more, and subsequently I have had to update my CV a lot. This was always something which took longer than I wanted, and it never felt easy to do.

I really dislike using word processors for designing and editing documents. The formatting is never quite right, and it always lacks the finesse that comes with using a professional design tool, such as InDesign or Photoshop. Word processors are great for basic documents, but when you want something a little more eye catching, it becomes difficult very quickly. I don’t want to have to learn how to make something look good in Google docs or Microsoft word, it doesn’t interest me in the slightest.

I find when I am using unfamiliar software, I get easily frustrated when things don’t work the way that I expect. I’ve spent a lot of time learning and becoming efficient with my current tools, that using anything other than them seems like an arduous task.

I decided to alleviate this pain by writing my CV in good old Javascript and styling the document with CSS. Maybe it’s just using the tools you are familiar with, but I’ve found this approach to pay dividends when it comes to updating my CV.

The first thing I did was to take my cv and transform it into a data structure which I could use to create my CV with. It looks a little something like this:

export const data = {
  name: 'Simon Holmes',
  title: 'Principal Software Engineer',
  links: [
    'github.com/srsholmes',
    'linkedin.com/in/srsholmes/',
  ],
  // ...More down below.
};

I then use a little bit of Javascript to build up some HTML and insert it into an index.html page. I thought about using a templating library to do this, but in the end I just settled for using template strings with the values interpolated in. It works for this simple use case.

I have a full set history of experience from various roles defined in an array. Each item in the array has a name, a title, a period of time when I worked at the job and then a description array with brief sentences of some responsibilities I had during the role. It looks like this:

experience: [
  {
    name: 'trustshare',
    title: 'Principal Software Engineer (Permanent)',
    time: 'Nov 2020 - Present',
    desc: [
      'Instrumental in designing, developing and architecting complex payment systems powered by a powerful intent based API.',
      'Responsible for developing payment APIs in Node.js / Typescript / GraphQL.',
			// More here..
    ]
  },
  {
    name: 'The Body Coach',
    title: 'Senior Full Stack Engineer (Contract)',
    time: 'Apr 2020 - Nov 2020',
		desc: [
      'Principal Engineer of the back end systems of the new body coach app.',
      'Tech stack included Typescript, GraphQL, AWS lambda and various other AWS services.',

To keep my CV to a couple of pages, i only use the last 3 / 4 jobs by slicing the array. If I need to produce a CV with a full list of all my roles, I can simply remove the slice and the CV will display all my previous work history.

I serve the page using http-server and have a live reload script so I can quickly see the changes as I make them. The simplest solution I found for live reload I found was livejs . It doesn’t require any complicated build process, as is perfect for this use case.

In order to save the document to a pdf. I use puppeteer to visit the page and save it as a pdf using the following script:

import puppeteer from 'puppeteer';
import path from 'path';
import { fileURLToPath } from 'url';
import { dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

(async () => {
  console.log('Opening browser...');
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto('http://127.0.0.1:8080');

  await page.emulateMediaType('screen');
  const today = new Date()
    .toLocaleString('en-UK', {})
    .split(',')[0]
    .replace(///g, '-');

  await page.pdf({
    path: path.resolve(__dirname, '..', `simon-holmes-${today}-cv.pdf`), // Saves pdf to disk.
    scale: 0.75,
    margin: {
      top: '1.8cm',
      bottom: '1.8cm',
      left: '2.54cm',
      right: '2.54cm',
    },
  });
  await browser.close();
  console.log('CV saved to disk');
})();

The other huge advantage to writing your CV in code is using git to create different versions of the CV. Using git branches, you can easily create different versions of the CV which are specifically tailored to the requirements of the job you are applying for. You can incorporate your standard git workflow allowing you to have multiple versions which can easily be updated when needed. This becomes a real chore without git and managing various different versions often leads to important changes being forgotten or left.

I hope this post helps and inspires you to create an easily updatable CV that you have full control over how it looks, without having to jump through hoops in your least favourite word processor.