Maybe you're looking for a new way to write your resume. You're tired of Microsoft Word or Google Docs; you've tried LaTeX and the various online resume builders. You're a web developer! Do it your way!
🧙♂️ Pssst. Want to skip the tutorial? Go straight to the repo
seanlennaerts / resume
👷♀️ Build your resume your way!
Goals
- export to PDF
- fully customizable
- consistent styling
- easily update contents
Tools
- npm or yarn
- parcel (install with
npm install -g parcel-bundler)
Instructions
- Make a new directory and
npm init -y -
Create an
index.htmlfile
<html> <body> <h1>Your Name</h1> </body> </html> -
Run
parcel index.htmland go to localhost:1234 to see your work!☝ Keep this tab open to see your changes every time you save!
Create two more files:
style.cssandscript.js. Link your stylesheet in<head>and your js before the closing</body>tag.-
Add a
<div id="root"></div>in the body. We will use this later. Now yourindex.htmlshould look like this
<html> <head> <link rel="stylesheet" href="./style.css"> </head> <body> <h1>Your Name</h1> <div id="root"></div> <script src="script.js"></script> </body> </html> -
Create one more file
content.json. This is where you will write the bulk of your resume. You can start filling it in now. This is the structure I chose
[ { "heading": "skills", "children": [ { "bullets": [ "TypeScript/JavaScript", "HTML/CSS", "Node.js", "React" ] } ] }, { "heading": "projects", "children": [ { "title": "Project 1", "link": "projectwebsite.com", "bullets": [ "Achieved X with Y", "Did X to get 50% increase in Y" ] }, ] }, { "heading": "experience", "children": [ { "title": "Google", "subtitle": "Junior Software Developer", "bullets": [ "Collaborated with X to achieve Y", "Refactored X with Y results" ] } ] }, { "heading": "education", "children": [ { "title": "University of British Columbia", "subtitle": "BSc Computer Science" } ] } ] -
Now for the fun. We need to get our contents to render. In
script.jsyou need to importcontent.jsonand use it to build new elements and add it to the DOM. This code will depend on what structure you decided on in Step 6.
import content from './content.json'; const root = document.querySelector('#root'); // Helper function to create element with class function createElem(tag, className) { const elem = document.createElement(tag); if (className) { elem.className = className; } return elem; } function buildChild(child) { const childElem = createElem('div', 'item'); const titleContainer = createElem('div', 'title-container'); if (child.title) { const titleElem = createElem('div', 'title'); titleElem.innerText = child.title; titleContainer.appendChild(titleElem); childElem.appendChild(titleContainer); } if (child.link) { const linkElem = createElem('a', 'link'); linkElem.href = `https://${child.link}`; linkElem.target = '_blank'; linkElem.innerText = child.link; titleContainer.appendChild(linkElem); } if (child.subtitle) { const subTitleElem = createElem('div', 'subtitle'); subTitleElem.innerText = child.subtitle; childElem.appendChild(subTitleElem); } if (child.bullets) { const listElem = createElem('ul'); for (const bullet of child.bullets) { const itemElem = createElem('li'); itemElem.innerText = bullet; listElem.appendChild(itemElem); } childElem.appendChild(listElem); } return childElem; } for (const section of content) { const sectionElem = createElem('section'); const headingElem = createElem('h2'); headingElem.innerText = section.heading; sectionElem.appendChild(headingElem); if (section.children) { for (const child of section.children) { sectionElem.appendChild(buildChild(child)); } } root.appendChild(sectionElem); } -
Now style it as you like! Some important styling tips
body { font-size: 12pt; /* use pt to scale the font just like you would on Word */ margin: 1in; /* use in to set page margins like you would on Word */ }☝ To use a CSS preprocessor like Sass
npm install -D sassTo see how I styled it check out the repo
seanlennaerts
/
resume
👷♀️ Build your resume your way!
-
Finally in your browser (I used Google Chrome ) open the Print dialogue and Save as PDF. It is important that you set the margins to "None".
☝ If you're using Chrome on Windows, select Save as PDF and not Microsoft Print to PDF for better results
☝ If you find that the colors are a darker than you expect make sure "Background graphics" is checked
Conclusion
And just like that you got to practice web development and make your resume at the same time. Hopefully you learned a bit on the way. If you did please consider ❤️, 🦄, and 🔖!
Top comments (0)