DEV Community

Cover image for Developing an Interactive Résumé with HTML and CSS

Developing an Interactive Résumé with HTML and CSS

Alvaro Montoro on February 21, 2020

For a while, I toyed with the idea of creating an HTML version of my résumé that looked the same as the paper version of it. As a Web Developer, ...
Collapse
 
treyhuffine profile image
Trey Huffine

Excellent article and super thorough. The inclusion of schema.org is a great addition.

Career growth for devs is something I'm really interested in as well and built out a resume generator for developers - gitconnected.com/resume-builder

I see you're in Austin too. Let me know if you're ever interested in collaborating!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

That looks cool. Let me check it, but I'd up for collaborating :)

Collapse
 
treyhuffine profile image
Trey Huffine

Sounds great! :)

Collapse
 
splrk profile image
Splrk

Great article! It gave me some great ideas while I prep for my next career move. I'd recently began considering using schema.org and JSON-LD in an API but I didn't realize it could be embedded in an HTML document.

Collapse
 
fanchgadjo profile image
Francois K

I was recently suggested schema.org for designing a DB, but I had never heard of microdata in HTML. Thank you for sharing your process ! Your resume looks great. 👍

Collapse
 
shikkaba profile image
Me • Edited

I know you're not asking for feedback, but the way you skewed the content on your site leaves outlines on chrome (edit: took a screenshot and tried to add it to the post to show you. Did not work. Confusing.). This does not happen if you use skew instead of how you did it. To counteract the parent skewing all the inside content, you wrap the child content in a container and do a skew opposite of what the parent is (ie: parent skewX(-10), child skewX(10)).

Collapse
 
alvaromontoro profile image
Alvaro Montoro

I always welcome suggestions to help me improve the code or learn something new. I will try it and see how it works. Thanks for the feedback and the suggestion 😊

Collapse
 
kgcodes profile image
Kelvin Graddick

Super interesting article! I think having a personal/portfolio website with a 'resume' page too can help too. Since it's then fully online (and you can use JS), you could have clever interactive sections displaying your skills and showing your experience. Shouldn't replace a traditional 'offline' resume but just in addition to it.

Collapse
 
jh3y profile image
Jhey Tompkins

Nice work Alvaro 👏

Been putting something together myself for this on and off for some time 😅

That key piece is definitely print styles 👍 They're a big win!

Collapse
 
jeansmaug profile image
jean-smaug

Hey, very nice.

You could generate a PDF version of you resume using Puppeter ;)
To deal with the sites that doesn't support HTML uploads

blog.risingstack.com/pdf-from-html...

Collapse
 
besong141 profile image
Besong141

My only problem here is to connect the HTML and CSS to my data base

Collapse
 
alvaromontoro profile image
Alvaro Montoro

The idea is to have a static page, but you could do that using JavaScript and/or a server-side language.

Collapse
 
besong141 profile image
Besong141

Okay thanks

Collapse
 
ssbozy profile image
Sandilya Bhamidipati

Congratulations! This is really great stuff. I really love the layout and printing options :)

Collapse
 
corelhas profile image
Carlos Orelhas

You did an amazing job!! Congrats!

Collapse
 
clrkoko profile image
Claire K

Great job! Very instructive!

Collapse
 
pradeepradyumna profile image
Pradeep Pradyumna

This is so cool. Thanks for sharing!