Resume Builder for Web Developers

Sean Lennaerts — Thu, 04 Jun 2020 00:12:02 +0000

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.html file

<html>

<body>
  <h1>Your Name</h1>
</body>

</html>

Run parcel index.html and 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.css and script.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 your index.html should 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.js you need to import content.json and 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 sass

To 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 🔖!

DEV Community: Sean Lennaerts

Resume Builder for Web Developers

seanlennaerts / resume

👷‍♀️ Build your resume your way!

Goals

Tools

Instructions

seanlennaerts / resume

👷‍♀️ Build your resume your way!

Conclusion

seanlennaerts / resume

👷‍♀️ Build your resume your way!