Resume Revamp

Current Resume Flow

I essentially maintain 3 resumes.

1. The “real” resume that I would submit to places, which is in Google Documents that I export as pdf.
2. My Linkedin experience.
3. The resume page on this site.

This took a bit of effort to keep them all updated and in sync; which was partially the reason it’s fallen to the wayside.

Ideally, I would like a single place I can update and use. But I know I wont be able to automate the LinkedIn resume. I would still like to somehow combine the resume on this site and my “real” resume, with the idea of being to just print the resume page to pdf and having it look good.

Current Resume Page

This is what the resume page on the site looked like. Not great. Immediately hit with a giant bullet point list with no apparent organization and wasted space.

And a lot worse when we try to print.

So having it “just work” wont be an option unfortunetly and will need a whole revamp.

Research

While I like the general theme of the site, its not really a good theme for a resume. I would like the resume page to appear like a paper resume, just on the web.

The one great thing about using Hugo as a website framework is that is has a lot of community driven themes, including resume themes. The one theme that caught my eye as a good starting point was a theme called Resume A4.

It wasn’t exactly what I wanted, but like I said was a very good starting point.

Hugo Resume Theme Intial Setup

I installed the theme along side the main theme. The one catch of using Hugo is that it doesnt really support multiple themes for a site. To get around this I am compiling essentailly 2 sites, with their own configs, and packaging them together.

./bin/hugo --config=config.yaml --minify
./bin/hugo --config=config_resume.yaml --minify

Ensuring their config baseURL options are set correctly.

config.yaml

baseURL: '/'

config_resume.yaml

baseURL: "https://tchilderhose.ca/resume/"

This now allows me to have the main theme on all of the website except for /resume.

Data and Styling

Now that I had the theme running along side the main theme, the next thing was to work on organizing some of the data into files that I could easily manage. I settled on 4 yaml files that I will use to populate the resume.

features.yaml - Mostly general non-professional information about me.

experience.yaml - All of my work experience in a very easy and flexible way to maintain.

education.yaml - Education information.

projects.yaml - Any non-professional projects that I work on.

Very happy with how the structure turned out.

Next was styling; which was really just a lot of playing around with css and adding different elements to personal taste. I wont go over everything I did but I really enjoy the “Tag Box” of the tech I added for certain projects. One of the resumes I reviewed at work had this for their general skills and I was really drawn to it.

After all the tweaking I was very happy how the new site resume was looking.

Printing

Now to focus on the main reason of this switch, printing.

Luckily there is a css tag to style specific things for print and really not a lot was needed to get it looking good.

1. Need to set the page size.
2. Need to hide the header and footer information from being printed. (current date, page name, page numbet, etc)
3. Make sure different elements are not being clipped on one page and then printed on the next.

This is the entirety of the css file for print css.

@media print {  
  @page {
    width: 8.5in;
    height: 11in;
    margin: 0.3in 0;
  }

  @page :first {
    margin-top: 0;
  }

  #paper {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
  }

  .item {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  footer {
    display: none;
  }
}

There is still a few minor tweaks I would like to make when I have more time, but I think for now it does a really good job.

New Resume Flow

So now the new flow for my resume is to:

1. Update the yaml files.
2. Deploy the site.
3. Copy and paste sections from the new resume page into LinkedIn.
4. When needed, open the new resume page in a browser and save it as a pdf.

Managing my resume in a more technical way in yaml files has really pleased the techy in me. I know its not for everyone, but it makes a lot of sense in my head and I’m very happy with the new style and streamlined flow of my resume.