Javascript/CSS enhanced Resume

When I was looking for research projects to participate in a few years ago, I decided the best way to find them would be by emailing various professors and sharing my interests with them. However, I figured a resume would be useful to share with them as well, and I only had it in MS word format. So I put it into HTML format.

However, the biggest problem with my resume is I tend to put a lot of stuff in my ‘master copy’ of my resume, and change it according to my targeted audience. So, by putting everything on the web, printing it out results in around 3 pages at this writing. Common resume advice always says to keep it under a page.

My solution: use javascript and CSS to create a resume that can serve multiple purposes! On the top of the resume, is a listbox that when switched, switches between a ‘full’ and ‘condensed’ version of my resume. The condensed version is designed to be printed out in only one page.

Heres how it works: The elements/categories that will be in all versions of my resume are present without any CSS tags. Then, all the elements that would only be present in the ‘full’ version are tagged with the class ‘full_content’, which the javascript code hides and unhides with the help of a function I obtained from here.

Elements that aren’t meant to be printed are tagged with CSS using the ‘noprint’ selector from my print-only stylesheet, using display: none. The resume elements are not tagged with CSS elements mentioned in the print stylesheet, however. The only annoying part I haven’t been able to solve is automatically getting rid of the header/footer information that browsers put on pages you print out. I mean, you can get rid of it in the print options when you print, but as far as I know there is no way to specify to turn those off. Other than that caveat, my resume prints out nicely in either condensed or full mode in any modern standards compliant browser.

Additionally, the entire thing is squeezed onto one page with no external javascript references, stylesheets, or whatever. Though this is generally bad form, I did it this way primarily because of I wanted it to be in a form where if I sent it to someone, then it would just be one file.

Of course, you can expand the concept by adding more categories and CSS tags to make a large number of different resumes! I haven’t gotten around to it, but in the future I’m planning on adding descriptors to each element of the resume describing a job type or category. If you’ve used CSS before and have a basic understanding of javascript, it should be trivial for you to do this too!

You can view my resume here: It is licensed under a creative commons Attribution-NonCommercial-ShareAlike 3.0 license.

Leave a Reply