A responsive CV template with HTML/CSS (Hermione Granger's CV)

I’ve been going through the job application cycle recently, which meant updating my CV. You can write a CV with Microsoft Word, but I find it exceptionally frustrating to do any sort of fancy formatting in Word, and more imporantly, I want my CV to be a page on my website (not just a downloadable file), that has the responsiveness expected of any modern webpage. I found this excellent HTML/CSS template from Thomas Hardy, and decided it was the aesthetic I was going for.

I adapted this template by incorporating a couple of changes made to the CSS by Leslie Myint, and adding several changes of my own. Many of these were small stylistic changes, but the main updates were re-coding the key skills section to work better with skills that are longer than a couple words, and adding a references section that uses vcard formatting for reference information and puts these inside a CSS flex-flow grid.

For funsies, I made the HTML template as Hermione Granger’s CV. You can preview it here, and get the code on my GitHub.

This template is very easy to adapt. For example, you could add sections on teaching, presentations, or outreach by just adding new sections using the combination of selectors [.sectionTitle, .sectionContent, .contentHeader, .contentDate, .mainDetails, .subDetails.]. There are excellent examples of this on Leslie Myint’s GitHub. For tips on how to format the vcard references section, see here.

I use Blogdown/Hugo with the Academic theme to build this website, so it was easy to make a page for my CV. I made a simple widget for the CV page (which you can copy from my github), and put this widget in my /content/home folder. You also need to edit your config.toml file to include the CV widget as a page like this: CV_page

Then, you can make a folder in your /content directory called “cv” and name your HTML CV file index.html and put it in the new /content/cv folder. Finally you will need to make a new folder in /static called “css” and put the CSS file (named cv.css) in /static/css. If you want to include a PDF version (or download your CV as a PDF), just open the HTML version in chrome, go to print page (ctrl+P), and choose the destination as “save as PDF”. Call your PDF version “cv.pdf” and place in your content/cv directory.

I really like this CV template–I think it’s stylish, but not too flashy to distract from the material. I worked out some bugs with the responsiveness and tested on all viewports, but let me know if there are any problems there. Big credit to Thomas Hardy for building the majority of this template, and Leslie Myint for helpful tips and edits. I hope you guys find some use for this, and feel free to take it and make it your own!


comments powered by Disqus