💻 Coding My Way Back Into the Job Market

Feb 8, 20263 min read

I've applied to dozens of jobs in the past few months. This week, I stopped waiting for callbacks and took control of the one thing I could: my resume.

I'll walk through how I took a PDF resume template and turned it into my own editable version — one I can fully customize. For instance, I wanted to make the capital letter of my name 20% larger than the rest. Because why not?

The Original Design

I originally created my CV on resume.io. It had a clean two-column design that I really liked — elegant, modern, and perfect for all those automated screening algorithms. I even paid to download the PDF.

A few months later, still job hunting, I revisited the file. It looked fine, but I realized it completely lacked modern keywords — nothing about AI which is pretty essential these days.

First Attempt: Plain HTML

My resume saved as PDF file.
My resume saved as PDF file.

Let's get technical.

Whenever you open a web page, you can export it as a PDF using your browser. If you haven't tried it before: File → Print (Ctrl + P) → Save as PDF.

That's where I began.

I rebuilt my resume as an HTML page based on the original design I liked. It looked quite similar, but the file size nearly doubled:

  • Original: 34 KB
  • My version: 65 KB

Around that time, I landed a promising interview and paused the project — maybe I wouldn't need the CV after all.

You know how that story ends. Didn't get the job.

Back to work.

Second Attempt: Using React PDF

This time, I went looking for a code-based solution and found react-pdf. After reading through the docs and examples, I dove in.

I used AI to parse my original CV.pdf into a structured JSON object — experience, education, skills, everything. Here's what the structure looked like:

{
  "profile": {
    "name": "Edward Erlich",
    "title": "Senior Full Stack Developer",
    "summary": "Full-stack engineer with 10 years building scalable web applications..."
  },
  "experience": [...],
  "skills": ["TypeScript", "React", "Node.js", "Go"]
}

Then I built a layout to render that data in a PDF document. It was starting to come together.

The Font Problem

However, the fonts looked terrible. The AI hadn't extracted them correctly. I discovered the original used two font families, each with 400 and 700 weights. After some digging, I found the right versions online and manually loaded them into the project:

Font.register({
  family: 'Lato',
  fonts: [
    { src: './fonts/Lato-Regular.ttf', fontWeight: 400 },
    { src: './fonts/Lato-Bold.ttf', fontWeight: 700 }
  ]
});

Finally — it looked right.

Manual Fine-Tuning

At that point, only small issues remained: font sizes, letter spacing, and margins. These were beyond the AI's help, so I spent the next 4 hours adjusting 20+ different spacing values by hand.

What I Learned

React-pdf isn't just a PDF generator — it's essentially React for documents. You're not converting HTML; you're building a separate component tree with its own layout engine. That's why the font registration was necessary, and why pixel-perfect matching required manual tweaking instead of CSS copy-paste.

Final Result

After several rounds of fine-tuning, I was happy with how it turned out. I added some new "AI" and "Go" buzzwords in my profile section, and the result feels like a proper CV.

You can view the final PDF here.

I've also made the project public on GitHub — fork it to build your own, or explore how react-pdf handles complex layouts: https://github.com/eddierl/portfolio

Now I'm sending it to a few colleagues and contacts in Perth. If you're hiring and need someone who obsesses over letter-spacing and ships production code, let's talk. ✌️

erlich.dev