Build your resume in React + SSG!
Tags: resume, react, ssg, frontend
Published: 2023-01-22 22:56:11

Hello everyone 👋

I recently left my job and I'm looking for a new one. So I had to update my resume. To be honest, I get stressed every time it comes up.

I rarely update my resume, so I couldn't even remember which online service I used (nor the account password 😄). I also had to pay for a monthly subscription. "Monthly subscription" sounds a little strange in this context because I only need to use the service once or twice within a few days.

At the same time my friend was working on her resume in Google Docs, which has 5 ready-designed templates. But he wasn't happy as he encountered the limitations of these templates. They didn't allow him to fit all the content on one page, which is what most guides on the internet recommend.

I decided to try Google Docs too. Here's how the template sometimes behaves when trying to change the spacing:

<img width="100%" style="width: 100%" src="https://media.giphy.com/media/5qgrckb74AE88LTT09/giphy.gif" alt="whaaat" />

---

Eventually, I started thinking of an alternative way to create (and update) my resume and an idea popped into my head: "I'm a front-end developer after all and I know HTML and CSS! 😎" 

An hour later I had an exact copy of my resume from Google Docs and uploaded it to [GitHub](https://github.com/vasilyev-maksim/resume). Now I'm sure I won't forget where my resume is and I can see all the history of changes.

Next, I set up deployment to [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site#creating-your-site) and made the resume mobile-friendly. Now I could give recruiters a direct link to my resume, rather than messing around with a PDF file.

If I still need a PDF, I can just "print" it in Chrome at any time:

![Chrome's built-in export to PDF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8sfot79x9tczxu0ycubh.png)

Here is an [example](https://vasilyev-maksim.github.io/resume-template/resume.pdf) of a "printed" PDF.

By the way, the problem of fitting the resume on a single page can be solved by specifying a custom scale (as in the screenshot above) and by reducing the size of the text with a "print" [media query](https://css-tricks.com/a-complete-guide-to-css-media-queries/):

```css
@media print {
  html {
    font-size: 10.3px;
  }
}
```

---

I didn't stop there, though, and decided to use React.

Compare job description in HTML:

```html
<section class="subsection">
  <header>
    <a 
      target="_blank" 
      href="https://www.pashabank.az/lang,en/" 
      class="company-name"
    >
      PASHA Bank
    </a>,
    Azerbaijan — Senior Frontend Engineer &amp; TechLead
  </header>
  <div class="dates">August 2018 - October 2021</div>
  <ul>
    <li>Micro-Frontends architecture design and implementation</li>
    <li>Developed and maintained bank products:</li>
    <ul>
      <li>
        <a target="_blank" href="https://www.pashabank.digital/">
          Online bank platform
        </a>
      </li>
      <li>Factoring</li>
      <li>SME Loans</li>
      <li>Cross-sell</li>
    </ul>
    ...
</section>
```

and in React:

```tsx
<JobSection
  company={{
    name: "PASHA Bank",
    link: "https://www.pashabank.az/lang,en/",
  }}
  location="Azerbaijan"
  position="Senior Frontend Engineer & TechLead"
  dates={{
    from: "August 2018",
    to: "October 2021",
  }}
  bullets={[
    "Micro-Frontends architecture design and implementation",
    "Developed and maintained bank products:",
    [
      {
        label: "Online bank platform",
        href: "https://www.pashabank.digital/",
      },
      "Factoring",
      "SME Loans",
      "Cross-sell",
    ],
    ...
  ]}
/>
```

In my opinion, using a React component is more concise and declarative than HTML. React allows us to separate the template (visual design and behavior) from the data itself. For example, if we want to change the design of the job description section, we only need to change the React component in one place, whereas the HTML has to be modified in several places at once.

But the React variant has some disadvantages: 
- one HTML file is faster to load than the whole react SPA
- React SPA is not SEO-friendly, in contrast to pure HTML.

So I decided to implement [Static Site Generation](https://www.cloudflare.com/learning/performance/static-site-generator/) (SSG).
At first I wanted to use Gatsby.js or Next.js, but in the end I found simpler solution using [ReactDOMServer](https://reactjs.org/docs/react-dom-server.html) API. This implementation only requires a few lines of code:

```ts
import React from "react";
import * as ReactDOMServer from "react-dom/server";
import { Resume } from "./Resume";
import { writeFileSync } from "fs";

writeFileSync(
  "index.html",
  "<!DOCTYPE html>"
  + ReactDOMServer.renderToStaticMarkup(<Resume />)
);
```

--- 

In the end I was happy with the solution I found and how [my resume](https://vasilyev-maksim.github.io/resume/) looked.

If you want to build your resume on React too, here is a detailed guide on how to do it:

1. Use this [repo](https://github.com/vasilyev-maksim/resume-template) as a template:
![Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9lssgxjs5khwb8yvue2.png)
Name the repo "resume" and press the green button:
![Naming repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80c442e6i8wrwu0e71u5.png)
2. Go to the "Actions" tab and press the green button to enable the actions:
![Enable GitHub Actions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/luk40ulk0fhv4mfsxlj7.png)
3. Go to "Settings", then to the "Pages" section and select "GitHub Actions" as a source:
![Change source of Pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s3qhodhf5o6qdpt48y5w.png)
4. Select the "Deploy static content to Pages" action and press the "Run workflow" button:
![Run deploy action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/llscqs5o6y0r8dyadcc9.png)
5. Wait for the action to complete, return to "Settings" => "Pages" and press the "Visit site" button:
![Visit Github Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/591pqh83bw1voftjco1a.png)
7. Change the `Resume.tsx`, `Experience.tsx`, `Skills.tsx`, etc. as you wish and commit.
You can do it on Github without cloning to your local system:
![Edit Resume.tsx on Github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0mi7ajiajkw6juiq5kh.png)
8. Wait a minute for YOUR resume to be deployed automatically. 
9. Go to your GitHub Page and try to "print" it to PDF.
10. PROFIT 😎

---

Hope this article helped you 💛
Maksim.