Resume Builder for Web Developers
Tags: career, resume, tutorial, webdev
Published: 2020-06-04 00:12:02

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 {% github seanlennaerts/resume no-readme %}

## Goals
- export to PDF
- fully customizable
- consistent styling
- easily update contents

## Tools
- npm or yarn
- parcel (install with `npm install -g parcel-bundler`)

## Instructions
1. Make a new directory and `npm init -y`
1. Create an `index.html` file
    ```html
    <html>
    
    <body>
      <h1>Your Name</h1>
    </body>
    
    </html>
    ```
1. Run `parcel index.html` and go to [localhost:1234](http://localhost:1234/) to see your work! 

    > ☝ Keep this tab open to see your changes every time you save!

1. Create two more files: `style.css` and `script.js`. Link your stylesheet in `<head>` and your js before the closing `</body>` tag.

1. Add a `<div id="root"></div>` in the body. We will use this later. Now your `index.html` should look like this
    ```html
    <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>
    ```

1. 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
    ```json
    [
      {
        "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"
          }
        ]
      }
    ]
    ```

1. 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.
    ```javascript
    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);
    }
    ```

1. Now style it as you like! Some important styling tips
    ```css
    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 {% github seanlennaerts/resume no-readme %}

1. 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 🔖!

{% github seanlennaerts/resume no-readme %}