DEV Community

Maksim Vasilyev
Maksim Vasilyev

Posted on • Updated on

Build your resume in React + SSG!

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:

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

Here is an example 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:

@media print {
  html {
    font-size: 10.3px;
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Compare job description in 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>
Enter fullscreen mode Exit fullscreen mode

and in React:

<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",
    ],
    ...
  ]}
/>
Enter fullscreen mode Exit fullscreen mode

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 (SSG).
At first I wanted to use Gatsby.js or Next.js, but in the end I found simpler solution using ReactDOMServer API. This implementation only requires a few lines of code:

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 />)
);
Enter fullscreen mode Exit fullscreen mode

In the end I was happy with the solution I found and how my 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 as a template: Template Name the repo "resume" and press the green button: Naming repo
  2. Go to the "Actions" tab and press the green button to enable the actions: Enable GitHub Actions
  3. Go to "Settings", then to the "Pages" section and select "GitHub Actions" as a source: Change source of Pages
  4. Select the "Deploy static content to Pages" action and press the "Run workflow" button: Run deploy action
  5. Wait for the action to complete, return to "Settings" => "Pages" and press the "Visit site" button: Visit Github Page
  6. 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
  7. Wait a minute for YOUR resume to be deployed automatically.
  8. Go to your GitHub Page and try to "print" it to PDF.
  9. PROFIT 😎

Hope this article helped you πŸ’›
Maksim.

Top comments (9)

Collapse
 
sandeepbansal_2 profile image
Sandeep Bansal - 2/100

Wow, great idea to build your resume using React!

I really like the idea of using React components to separate the template and data, it makes it much more efficient to make changes. And the added bonus of being able to deploy it to GitHub Pages and having a direct link to share with recruiters is a great feature.

Question for you - Did you consider the use of server-side rendering (SSR) to improve the performance.

With SSR, you could possibly improve the initial load time for users.

Keep up the good work, and best of luck with your job search!

Collapse
 
jeckhummer profile image
Maksim Vasilyev

Thanks for your interest!

I think SSG is more performant than SSR (which potentially has overhead for each request).

In terms of rendering, SSG and SSR are nearly the same. The one big difference is that SSG does all of its rendering before the user requests a page. Instead, it does it at build time and fully ready files are served from a CDN. SSG builds fetched data and HTML into a page once and then reuses the output from that build for all requests to that page until the next rebuild of the site.

Source: prismic.io/blog/nextjs-ssr-vs-ssg

Collapse
 
lazizli profile image
Lala Azizli • Edited

Hey there!
I followed your step-by-step guide and created my own resume (first draft version) πŸ€“

Check it out: lazizli.github.io/resume/

Collapse
 
jeckhummer profile image
Maksim Vasilyev

Wow, looks amazing 🀩!
I suggest you to change font size in the media query associated with printing to 10.5px. It will make your resume fit a PDF page better πŸ‘Œ

Collapse
 
lala_azizli_32617063b480e profile image
Lala Azizli

Thanks for sharing! πŸ‘πŸ½

Collapse
 
jeckhummer profile image
Maksim Vasilyev

Thanks for reading!

Collapse
 
tomkotlar profile image
tom kotlar

Awesome πŸ‘πŸ»

Collapse
 
jeckhummer profile image
Maksim Vasilyev

Thanks!

Collapse
 
superpugn0 profile image
Mattia Ruberto

Good job!