Grow your CSS skills. Land your dream job.

One Page Résumé Site

Published by Chris Coyier

A friend of mine recently sent me her résumé to look over. I'm definitely not a professional job hunter but I think in these situations any extra set of eyes can help fine tune the final product. As it was, the résumé was a Microsoft Word document, which in itself is fine, but it wasn't particularly well designed. I thought, we're going on 2010 here, we might as well take this thing to the web!

I created a really simple design. Then I replaced all her content with good ol' C'thulu so I have a generic template I can give out to you folks. IlLLUSTRATION CREDIT: Michael Dashow

View Demo   Download Files

Really nothing too amazing here, just a clean layout. But also:

  • Contact information using microformats
  • Main resume area using what I think is the semantically correct definition list (<dl>)
  • Literally one page (just an index.html file, with optional images)
  • Prints nicely

Print Preview

Of course feel free to do whatever you want with it.

Comments

  1. Permalink to comment#

    I believe we will be seeing more of the online based resume in 2010. Its more of a way to show your skills and expand upon the text based resume.

    Btw, there is some rogue text at the beginning of the demo. First text on the page “ch”. Doh!

  2. Guido
    Permalink to comment#

    I hope the people place more value on privacy. they give to their curriculum vitae only the people need their data. But it is nice to look at all times.

  3. I’ve changed some parts of CSS to make line a bit nicer.


    dt { font-style: italic; font-weight: bold; font-size: 18px; text-align: right; padding: 0 26px 0 0; width: 150px; float: left; height: 100px; border-right: 1px solid #999; }
    dd {width:597px ; float: left; border-left: 1px solid #999; margin:0 0 0 -1px; padding:0 0 0 26px ; }
    dd.clear { float: none; margin: 0; height: 15px; border:0 }

  4. Just found out, that my little addition runs into problems in print, have to fix that :P.

  5. AngusM
    Permalink to comment#

    Nice clean layout. Given that you’re already using the hCard microformat to mark up contact information, is there a reason that you chose not to use hResume to mark up the complete resume?

  6. Art
    Permalink to comment#

    Just a note, I wouldn’t be leaving a real phone number or plaintext email address on any website. The spambots will grab that in a heartbeat and spam you to death. I would suggest using one of the many obfuscation tools to hide this data from the ‘bots.

    • I can appreciate that thinking.

      I can also say I’ve been dumping my email address anywhere and everywhere all over the internet for years and years and years with reckless abandon. I use Gmail. I get no spam.

    • I use GMail. I ‘get’ spam but all of it is automatically caught in the ‘Spam’ box, so I never see it. Is that what you mean?

      If you mean, you’ve never received any spam at all, well, that’s quite amazing.

    • Either way, Ben, the idea point still stands. It’s not a horrible idea to use your email everywhere if you have good spam filters (like Gmail).

    • I also have been throwing my email on websites and gmail takes care of it. If you’re concerned about spam one trick from efftehspam is to encode your characters using hex or decimal characters. You can use the PHP Charset encoder to do the work. It certainly won’t stop all spam, though.

    • Permalink to comment#

      I usually print my email with javascript, I’m pretty sure the baddies can’t read it.

    • Matt
      Permalink to comment#

      I use Hivelogic Enkoder to obfuscate my emails.

  7. PA
    Permalink to comment#

    But why Cthulhu ? Are you a fond of H.P Lovecraft ? A fond of the “Call of Cthulhu” RPG ?

  8. I just got done making my resume from scratch in hResume format with some webkit transform magic. http://swy.me/resume

  9. TheDoc
    Permalink to comment#

    hahaha that intro paragraph is amazing.

  10. Tackled this beast last year, might have a few helpful tips in that old blog post.

  11. Permalink to comment#

    I love the filler copy and the slick, clean design.

  12. Permalink to comment#

    It looks the part. This isn’t the right place to use a definition list though, as you’re not actually defining anything. You’d be better off using an unordered list and headings within each list item.

  13. Permalink to comment#

    I love simplicity of this page

  14. Permalink to comment#

    Nice. Plenty will find this helpful.

  15. Permalink to comment#

    Pretty good and funny. Good design above all, light and efficient.

  16. Permalink to comment#

    This tutorial would have been especially helpful when I had to create an online resume for my Coop program. Unfortunately, they did not allow us to use images in our HTML resumes.

    While my classmates were using their Microsoft Word
    “Save as Webpage”, I came up with this – simple, but it got me a lot of interviews.

  17. Permalink to comment#

    Beautiful. Nice clean layout, clear and distinguishes from others. With lots of unemployed people out there, I’m sure we’ll start seeing many more of these.

    I’m thinking of doing the same with my comic book style resume. Would love to have your thoughts and ideas at http://onehalfamazing.com/resume

  18. http://SampleResumeTemplate.net/

    This is also a very good resume template and my company even used it for a job posting as well

    http://MadeBySquad.com/Job/

  19. Permalink to comment#

    I have been thinking about this for a little while now, thank you for the delightful tutorial – though I’d like to see hResume mf too.

    I use Google apps for my domain emails and have no problem with spam, and as for phone and fax I just use a digital service and never had an issue with spam either.

    Though I am thinking of switching to Google voice, I just like the matching numbers.

  20. Adrian
    Permalink to comment#

    Is there a reason you chose to use .clear instead of putting clear:both onto all dd’s?

    I always get confused when I see this. Is there a reason you chose this method for this page, or do you always do it that way?

    • The clear: both would have had to have been on the dt’s… but I know what you mean. I tried that and it was great for all browsers except IE 7 and lower. Not sure why, but it was messed up.

    • Adrian
      Permalink to comment#

      I should have expected IE was the reason.

  21. That’s really nice, I think in these days of CMS’s being so easy to use people forget how nice and clean a simple, single page can be. Especially for something like a resume that you don’t want all cluttered with widgets and sidebars and stuff.

  22. David
    Permalink to comment#

    Where are your old articles, I can’t find the one I was reading yesterday? Your new site is confusing to me.

  23. Thanks Chris, it’s easy to jump into and it looks, functions great.

  24. Permalink to comment#

    Happy New Year Everyone !

  25. Why you are using non-semantic
    ?

  26. Why u are using non-semantic

  27. Permalink to comment#

    Wow! What’s a brilliant idea. You think employers will find this to be creative or not what they want?

    • Permalink to comment#

      I think if an employer doesn’t like this, then I don’t really want to work for them anyway.

  28. EnfoToad
    Permalink to comment#

    Loved the example. Like always, perfection from Chris Coyier!

  29. Thank you very much for your design, it’s nice and clean, just what I was looking for.

    Happy New Year!
    Marco

  30. Showpage
    Permalink to comment#

    A so simple article and so many comments. This is the demostration of a great site with great ideas. Thanks

  31. simple and perfect – thanks for that one!

  32. Permalink to comment#

    Hello, this is fantastic. I am using it: http://www.aaronlote.com

    Would you like any credit link in the footer perhaps?

  33. Permalink to comment#

    microformats are great for all 14 people that use them

  34. Love the opening paragraph on the resume, good stuff.
    I have seen others attempt the online resume with reckless abandon and make it waaay too complicated.
    I like the simple and clean design, perfect for a resume.

  35. Love the joke in Computer Skills.

    It’s a very nice layout; the only thing I’d really change (if I need an online resume) would be to keep the image straight, and aligned. I love the ‘dropped photo’ look, but it doesn’t exactly fit in a professional resume.

  36. Permalink to comment#

    Great post. Thanks for sharing. I’ve got a site focused on helping people create resumes. We offer free resume templates for download in Word format but agree that having a searchable online version is the way to go even for the non-tech savvy. You’ve inspired me… I’m thinking I should offer HTML files for download as well. If anyone is interested you can check out my resume advice site here: Resify.com

  37. Great resume, I’d hire that alien. Very clean layout and typography.

  38. Skyrocket Labs
    Permalink to comment#

    It’s a growing trend and I expect we’ll need to still be sending PDFs of our resumes and perhaps links to the online version for the time being. The mobile resume concept is logical.

    Nice work, Chris. Have you thought of including a print.css file as well?

  39. Permalink to comment#

    Nice Design,

    but it would be better if you used the hresume microformat.

  40. Permalink to comment#

    PDF resumes are definately the way forward and the css for mobiles will be much more widely used in the future. Another cool artile chris
    andrew

  41. Permalink to comment#

    Nice clean layout, Found this helpful.

  42. Dan
    Permalink to comment#

    Consider http://www.wix.com

    While it has some “wix” ads, they are not in the way. Free and developed in flash.

    http://www.wix.com/freschi/resume

  43. Permalink to comment#

    Nice article. Thanks

  44. Hmmm, think this kind of a thing could serve as an about page replacement in specific cases?

  45. Moving everything to a more uniform access like the internet seems to be a good approach, however I wonder how the older generation that hires people like you or me view this. I know my current employer took my well formatted resume and made a playground of notes on it for reference.

  46. as simple as it is it’s actually a very nice online resume.

    From some of the resumes I’ve received I’d prefer to see something like this with appropriate links to relevant work.

  47. I really like the idea of an online one page resume especially when it looks that good. I think web professionals would benefit from it.

  48. losted
    Permalink to comment#

    I recently created myself a résumé in HTML format and did not think about using microformats but its a really great idea, I will rewrite it soon.

    And for myself to make the résumé only one file I’ve encoded my files in base64… have you think about using that? if so, why do you choose to not using it?

    Here is an example :

    http://luclapierre.com/cv_luc_lapierre.html

  49. Permalink to comment#

    I wish my resume looked like Cthulhu’s! He’s got MAD skills. ;-)

  50. Really interesting. I had this idea some time ago, first Ive made like your friend, a curriculum in word, but I felt I wanted to put some discrete images to decorate it a bit but it felt like the people from the RH wouldnt enjoy it very much.. So I put it in my web page, having a little more freedom in style.

    And good sense of humour by the way..

  51. The resume looks really slick and I love the humorous copy, but it would have been polite to ask me (the artist) permission to use that image before posting it: I would have happily said yes. Just because you found something on the internet doesn’t mean it’s fair game to take, or that the creator wouldn’t appreciate an attribution.

    In case anyone’s interested, you can see more of my humorous illustration work at my website, Your Walrus Hurt the One You Love. Thanks, and sorry to be a slightly off-topic downer – you’ve done some really nice work here.

    • shanoboy
      Permalink to comment#

      Great art and website, Michael. I enjoyed browsing your website.

    • I just tried shooting you an email about this but it bounced. Very sorry of course. We can do one of two things, I can replace it, or I can add credits to the article to you. I’ll add credits until I hear back.

    • Hmm, that’s funny (the bounce, that is.) Credit is fine, thanks! I’m certainly okay with your using it, it’s just nice to be credited for my own work. Thanks for your reply!

  52. shanoboy
    Permalink to comment#

    Great idea, great article and great site. Thanks!

  53. Permalink to comment#

    nice article, great post

  54. Nice idea. But that is a mind flayer, not the great C’thulhu ;)

  55. Permalink to comment#

    I’m dreaming of hiring this new employee, but his angles are all wrong. ;-)

  56. I was just looking for ideas on creating my online CV and came across this. it does look very clean and professional.

    I don’t really know about microformats though? Can I ask what the benefits are of using these over just a standard design layout?

    I think as a designer a CV should be completely different to the standard CV layout you see in word etc. I would like to see more colours and some kind of design aspect about it, but obviously still making it printable and easily readable.

    But still a very nice idea for an upgrade to the standard word format.

  57. Faysal Shahi
    Permalink to comment#

    Awesome resume, thanks for share.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".