How I made my resume with react-ultimate-resume
Tags: react, resume
Published: 2020-05-06 11:58:08

I had a problem with how I wrote and put together my resume/CV which was: it's not very customizable. I used a tool that does a lot in terms of visuals, organization and it's easy to use, but I wanted to organize my skills by sections, like front end, back end, VCS, etc. I had a handy button to convert to PDF, but it was hard modifying to enable skill sections.

Recently I discovered this awesome GitHub repo called [react-ultimate-resume](https://github.com/welovedevs/react-ultimate-resume) through this [dev post](https://dev.to/thedamfr/react-ultimate-resume-a-modern-software-developer-resume-built-with-react-and-jsonresume-1pbj). Then it hit me, "I'm a dev, if I have a problem I can just use code to solve it 😎".

<center>
  <img style="width: 100px;margin: auto;" src="https://dev-to-uploads.s3.amazonaws.com/i/qziovs63bci7mhp1p9ni.gif">
  <div>
    <em><a href="https://tenor.com/view/mind-blow-mindblow-gif-5139389">GIF from Tenor</a></em>
  </div>
</center>

I'm going to tell you my little story of how I got the react-ultimate-resume running locally, then how I changed it and deployed it.

## Local Resume Setup
I ran into some issues (because life isn't easy and we have to fight through it) like this:
![LF and CRLF error](https://dev-to-uploads.s3.amazonaws.com/i/xoqhovgzxjsq9cs4fyep.PNG)

After searching a bit on their repo I found some issues of people having the same problem. The maintainers explained that they use Unix based systems and on windows, EOLs are in CRLF. So the next step was to solve it by using LF on my VS Code.

Some time passed and I was still having the same error, even though I switched the CRLF on the bottom right corner of VS Code to LF. Turns out that only changes the current file 😅, so how can I change the format of every file without doing it manually. Because let's face it, the project is pretty big and I won't spend that much time doing that manually, it must be automated!

I researched a bit and found [this issue](https://github.com/Microsoft/vscode/issues/25209) first, but changing my user settings only works for new files, so it's not what I really needed. Then I found [this VS Code extension](https://marketplace.visualstudio.com/items?itemName=vs-publisher-1448185.keyoti-changeallendoflinesequence) and I was like "Cool this will change all the files, then all I gotta do is save all files 😎". But then I didn't quite realise what the extension was going to do, and I had already installed the dependencies so... let's just say I had to stop it running because it was taking all the time going through files in `node_modules` 😂. Rookie mistake I know, sometimes we forget things. I proceeded to delete that folder and this time it ran smoothly.

With the app running I opened localhost and saw a cool-lookin website 🤩. My next thought was to get this in to a PDF, because that's how I'm used to deliver my resume to employers, so I wanted to know if that was possible with this react resume. Since this repo is based on JSON Resume, I used their `resume-cli` npm module (you can check out more info [here](https://jsonresume.org/getting-started/)) to export my resume in a PDF format... or at least I attempted to.

### Second issue
First I changed the name of the `json_stub.json` file under `/src/data` to `resume.json`, since that's what the tool expected, then I ran the command: `resume export resume.pdf`. It failed a verification test, as you can see in the following image:

![resume pdf export](https://dev-to-uploads.s3.amazonaws.com/i/791k8bn2lum503im8h4h.PNG)

I went to their GitHub repo to see if anyone is having the same issue, and turns out people are having the same [issue](https://github.com/jsonresume/resume-cli/issues/254). I tried some of the stuff people were saying fixed the issue, but none of them worked. So, I decided to just go to the code and see for myself what the problem was. Bear in mind at this point I just wanted to see something work... all I wanted is to know if the resulting PDF is as fancy and has the same visual as the website. I arrived at the function `validate()` in `lib/test.js` by searching "running validation" in all files with VS Code, and commented the call to `resumeSchema.validate()` and added the call: `callback(false)`.

Finally I had a PDF file on my directory 🎉, but it wasn't what I was expecting, it was simpler visually. Here is a snippet of it:

![resume pdf example](https://dev-to-uploads.s3.amazonaws.com/i/ol4bl5kvuayypfn72pp2.PNG)

I was a bit bummed out since I was expecting to see a one-page resume, but I really liked the resulting website and interactivity of the components. So I used their edit feature to input my info, and exporting my `json_resume.json`.

## Deploying with GitHub pages
This was very easy since they already had documentation that explained how to do this [here](https://welovedevs.com/react-ultimate-resume/docs/deploy-github/). Initially, I only cloned the repository, to test and get everything set up locally, so I just forked the repo, did the same setup as before, added the `homepage` property on the package.json file, and then ran the command `yarn gh-deploy`.

Check out my current resume created with this amazing repository [here](https://BOLT04.github.io/react-ultimate-resume/) (not quite finished), and feel free to give any feedback in the comments below. I'm still not quite capable of organizing my skills the way I wanted, so I'm going to dig in a little deeper and perhaps adjust or make new components.

## Conclusion
After all this, I think I've changed my mind about the importance of my CV being in a PDF format. I can do so much more with code than what I could do with other tools, plus I'm going to get hired to code, so having the resume as a website shows at least I can deliver a project and host it (whether that is on Heroku, GitHub pages, Netlify)! It's way more enjoyable for me and it can serve as a stepping stone into having my own website.

Also I love the idea of JSON schema and having a [standard for resumes]((https://jsonresume.org/schema/)) so that If an employer still wants a PDF format, I can easily generate one given a JSON file. However, the output won't be as fancy as the website. 

I hope you enjoyed reading 😄. Check out one of my other blog posts if you are interested:
- [My first hackathon](https://dev.to/bolt04/my-first-hackathon-141d)
- [An Introduction to Hypermedia APIs](https://dev.to/bolt04/an-introduction-to-hypermedia-apis-1n2d)
- [The beginning of my professional journey as a dev](https://dev.to/bolt04/the-beginning-of-my-professional-journey-as-a-dev-37e8)