Building a Responsive Resume Part 3: Interactivity & The PDF


  1. The Case of the Responsive Resume
  2. The Skeleton
  3. Interactivity and the PDF

So, in the last two episodes we looked at why we might want to create a responsive resume, and we set up a basic one with an easy to use framework and HTML5 and CSS3 for a simple semantic layout.


Now, in part one I talked about why we would want to make an HTML resume in the first place, and for me the big draw is the interactivity of the web. We can make our website do things! The first thing I want to do is make your work experience searchable.

This is something I’d been planning to do, but when I saw Michael Kelly’s resume I knew he had chosen the right interface. Check it out, we’re going to do basically the same thing.


The first place to get started is in the HTML. Remember this?

We did this for two reasons:

  1. It makes sense to use list elements to represent data that is a list
  2. Lists are easy to search and grab data from in javascript

If you did this, then we can dive into the Javascript. If you didn’t, go back and do it!

The jQuery

Now that you’re done, let’s look at what we’re going to do. We’re going to use javascript (jQuery) to grab all the different skills by selecting the LIs in the footers and add in ones we don’t have already.

Alright, good start, now we need to actually make the skills list and buttons. BUT WAIT, where does the skills list go? We need a div for that! Let’s add it dynamically with jQuery so that it degrades nicely and users with JS off don’t get an empty div with just a header.

Add this inside your existing $(function(){}) you just created. In fact, everything from here will go in there.

Now, we need to think about the actual showing and hiding of articles. We are showing and hiding based on skills. It’s easy to get the list of all the skills, but finding which article has which skills is kind of a pain in the ass. So, instead, let’s go back and add a hook class to our articles to make them easy to find.

Edit your first function that grabs all the skills so it looks like this:

Now it’s easy to find the .work articles which are associated to which skills by just calling $(“.skillName”).

Next, add the code to show/hide the articles:

If you were looking closely you may have noticed that there is also code to uncheck checkboxes of other skills that are in the same list as an item you choose to hide. This way a box will only be checked if all its members are visible.

JS: Done! It should look something like this.


Final thing, some styling. I’ll let you work it out on your own, but I recommend hiding the #skillSection div for mobile browsers using the mobile queries in Skeleton’s layout.css file.

Remember another we talked about back in the first article, that the resume should be easy to maintain? Well, look what we’ve done here, we’ve made it self-generate a list of skills so we don’t need to worry about them! Nifty!

Speaking of “easy to maintain”, there’s one more thing I want to talk about here.


I’m a big fan of the PDF when it comes to resumes and CVs. I think it has a lot to offer; it’s portable, readable on a wide array of devices, easily storable. Everything a website is not (including inflexible). Remember that I said something at the beginning about keeping all the advantages of PDFs along with advantages of an easy to maintain website? Well, I recommend adding a “Download PDF” link to your online resume.

“No shit” I can hear you saying.

Yeah it’s obvious, but why not take the “easy to maintain” criterion along with you and have your website generate the PDF on the fly, so whenever you edit your website, your PDF gets updated as well? I installed wkhtmltopdf which converts HTML to PDFs using the webkit browser engine. That’s right, it will look the same as in your webkit browser. Just point it to the site, prepare a print stylesheet (like at the bottom of this one) and enjoy!

I used a PHP wrapper for wkhtmltopdf and the following code is all it took to generate a PDF file every time the resume is edited:

When you’re all done, it should look something like this. Try it out and let me know how it goes.

This entry was posted in Tutorials, Web Development and tagged , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">