Building a resume website with eleventy

November 19, 2024 eleventy web dev front-end feature

• preview site
• code on github.

okay, so it’s that time i’ve been dreading: i need to brush off my resume and start applying to jobs. i was waiting to see how the election turned out before deciding on my next career moves, but… well… you saw what happened 💀. so here we are, time to dust off the resume and fill in the last few years like a proper grown-up.

i went digging into the archives and pulled out my trusty “resume-final-2.pdf” from my last job hunt (back in 2019!). turns out, i didn’t save the original editable file, so i couldn’t just tweak it. love that for me.

so what does a developer who wants to do literally anything but work on their resume do? build a website, obviously 😎. inspired by michael engen and max böck, i spun up a small eleventy site that makes a nice, clean resume website and generates a pdf. you can see the final result at eleventy-basic-resume.keith.is and check out the code on github.

the output is just a simple index.html file, which you can host pretty much anywhere.

this thing is incredibly basic, but it got the job done for me and might be a great starting point if you want to build your own.

why bother with a website?

you own it

sure, there are about a billion resume generators out there. canva templates, figma guides, you name it. but none of those are truly yours. with your own website, you control the code, the look, and everything else. it’s all yours.

eleventy makes something like this super easy to throw together in an afternoon. i’m using the shiny new webc templating language, but you could just as easily use liquid.

fully customizable

i put the basics into a resume.json file (check it out here), but it’s easy to extend. the css for each component lives inside the components themselves, so tweaking styles is a breeze.

in the index.webc template, i’ve set up css custom properties, so you can tweak things like page layout and colors without much hassle.

:root {
  --page-width: 60rem;
  --page-margin: 2rem;
  --section-spacing: 2.5rem;
  --grid-left-column: 12rem;

  --text-primary: lch(20 0 0);
  --text-secondary: lch(35 0 0);
  --text-muted: lch(55 0 0);
  --border-color: lch(92 0 0);
  --background-color: lch(100 0 0);
  --accent-color: lch(45 35 250);
  --surface-color: lch(98 0 0);

  --breakpoint-sm: 20rem;
  --breakpoint-md: 40rem;
  --breakpoint-lg: 60rem;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  font-feature-settings:
    'liga' 1,
    'calt' 1;
  font-size: 14pt;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--background-color);
}

write it once

once you’ve set up your resume.json, you’ve basically built a reusable block of data. make a microsite every year, theme it for different jobs, whatever. the hard part—writing about yourself—is done. from there, it’s just building fun websites on top of it.

seo and discoverability

your resume should help people find you. hosting it on your own website means it’ll show up in search engines and crawlers. i’ve baked in the h-resume microformat, as well as meta tags and json-ld schema for the resume. the robots will love you.

pdf generation

obviously, some job forms won’t let you just link a website (rude!). but don’t worry—this github repo comes with a small script, print.js, that uses playwright to turn your site into a proper print-ready pdf.

import {chromium} from 'playwright';

async function printPDF() {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:8080/', {waitUntil: 'networkidle'});
  await page.pdf({format: 'Letter', path: './resume.pdf'});
  await browser.close();
}

await printPDF();

run that with npm run start && node print.js and 💥 you’ve got a new resume.pdf in the same folder.

the print styles remove most of the styling to keep it simple

Shoutouts

big thanks to michael engen for inspiring this with his blog post, and to max böck for the idea a few years back.

Links

• preview site
• code on github.