Build Resume/CV with React JS
Table of Contents
Live Desktop |
Print to PDF |
Live Mobile |
If you have any prior experience creating your Resume/CV using visual tools then you know how complicated things can be. As,
- You can't change the fonts globally
- Change of design requires that you fill in your details again
- Content and column alignment calculations have to be done manually
As a programmer, I like to solve my problems programmatically. So I created this React App to generate it dynamically. It features:
- A single Object to hold and manage all the information
- Ability to create multiple templates without the need of refilling the information
- Change font family and font sizes from Template.css file
- Loop through information and render them accordingly
- Use React conditional rendering to render content only on given information
- Create expandable columns with the help of CSS Grid and Flex-box
- Can host a Live interactive version of my resume for Desktops and Mobile devices
-
Open your projects base folder and launch any terminal of your choice.
-
Run this command:
npm install npm@latest -g
-
Clone the repo
git clone https://github.com/webdevsk/next-resume.git
-
Install NPM packages
npm i --legacy-peer-deps
-
Run Dev server
npm run dev
There are two ways in which you can generate a PDF file from the hosted live version. The differences are:
| Browser Print to PDF | Puppeteer PDF Method | |
|---|---|---|
| Difficulty | Easy | Hard |
| Method | Snapshot (image) | Generates from HTML markup |
| OCR | No (Requires post OCR) | Yes |
| Foreign language | Post-OCR may not recognise them | Supported |
| HyperLinks | Not supported | Supported |
- Open your preferred browser and navigate to localhost:3000
- Choose any template and press "Print Mode" below
- Press CTRL + P on your keyboard to launch print mode
- Choose "Print as PDF" and set margin to Default
- Hit Save and you are done
-
Choose a different project folder in your system and clone my Puppeteer project script tailored for this scenario
git clone https://github.com/webdevsk/puppeteer-to-pdf.git
-
Run the script
npm start
-
Get a freshly baked Resume/CV PDF file from the output directory
**You are advised not to change anything in the script without prior knowledge of Puppeteer. I have adjusted and tested the script solely for this project.**
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
Project Link: https://github.com/webdevsk/next-resume