https://github.com/tomchen/react-printable-cv
Printable, multi-language, web curriculum vitae (resume) built with React and Redux 🖨️⚛️
https://github.com/tomchen/react-printable-cv
curriculum-vitae cv cv-template pdf printable react redux resume
Last synced: 5 months ago
JSON representation
Printable, multi-language, web curriculum vitae (resume) built with React and Redux 🖨️⚛️
- Host: GitHub
- URL: https://github.com/tomchen/react-printable-cv
- Owner: tomchen
- License: mit
- Created: 2020-06-28T21:46:42.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-13T09:11:50.000Z (almost 3 years ago)
- Last Synced: 2025-05-07T09:12:41.331Z (5 months ago)
- Topics: curriculum-vitae, cv, cv-template, pdf, printable, react, redux, resume
- Language: JavaScript
- Homepage: https://react-cv.tomchen.org
- Size: 11.3 MB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Printable CV
[](https://circleci.com/gh/tomchen/react-printable-cv "CircleCI") [](https://codecov.io/gh/tomchen/react-printable-cv "Codecov") [](https://scrutinizer-ci.com/g/tomchen/react-printable-cv/?branch=master) [](https://github.com/tomchen/react-printable-cv/blob/master/LICENSE "MIT License")
Printable, multi-language, web curriculum vitae (resume) built with React and Redux.
[Click here to go to the demo page](https://react-cv.tomchen.org/)
It's a responsive web page or a so-called SPA (single page application) that is 'perfectly' A4 paper print-ready. The data, stored in JSON files, are fully separated from the SPA.
Also can be optionally generated a standalone HTML file containing all the resources, including JavaScript, CSS, images, fonts and even the pre-generated PDF. The [demo page](https://react-cv.tomchen.org/) is a non-standalone code splitting version, it has [a subpage](https://react-cv.tomchen.org/standalone) that looks the same but is a standalone HTML.
## Direct printing
The direct printing feature is experimental:
* Direct printing is almost perfect in Google Chrome (and potentially in other browsers with the same core)
* Firefox user should set print scale to 100% instead of 'Shrink To Fit'
* Other browsers may or may not have problems in direct printing
It's possible to print the page to PDF file, most browsers come with such feature.
## PDF
Put your pre-generated `$LOCALE.pdf` files in the `pdf/` folder so that they can be included in the SPA.
## Static offline version
The static offline version can be either a standalone HTML file that contains all the resources, including JavaScript, CSS, images, fonts, PDF, etc., or a group of HTML, JavaScript bundle files and other aforementioned resources.
In comparison with the normal version with separate resource files, standalone HTML file have great portability but lost the ability to on-demand, asynchronously "lazy load" / code splitting.
In wider or normal screen, the web page visually shows on an "A4 page" with non-printable buttons on the right side outside the "A4 page". The web page is responsive in mobile screen.
`npm run rebuild` to generate the static offline version (using files and resources from `data/`, `src/` and `pdf/`) and put it into `dist/` folder.
In `settings/index.js`, change `inline_resources` to false to have separate resource files instead of the standalone HTML. You can also set `less_script_chunks` to false to have as many JavaScript chunk files as webpack needs for code splitting.
It supports mordern browsers and IE 11 via Polyfills, although it may have some [Flexbox](https://caniuse.com/flexbox) rendering problem in IE 11.
## File sizes
You'll find the Chrome generated PDF usually much smaller than Word generated PDF. However, it's not the case for Firefox. You'll find the [CV word file](https://github.com/tomchen/react-printable-cv/blob/master/word/cv.docx) in the folder `word/` (the CV word file was created by me long before the React one) to be compared.
## Multi-language
You can set languages in `settings/index.js`. Translations are in `i18n/$LOCALE/$NAMESPACE.json`.
## Configuration
`settings/index.js`:
```javascript
module.exports = {
langs: [
{
code: 'en',
name: 'English',
},
...
],
default_lang: 'en',
less_script_chunks: false, // generate one JavaScript chunk files only in production
inline_resources: false, // make resources inline in order to generate a standalone HTML in production
noindex: false, // add noindex meta tag to block search engine. However, the reCAPTCHA described below would be a better choice
recaptcha: false, // add Google reCAPTCHA to block spiders, if true, you should also set `useRecaptcha`, `siteKey` and `secretKey` in `backend/settings.js`, see also the following "Back end" section
dynamic_pdf: true, // when clicking PDF button, send JSON to backend to generate PDF on demand, instead of downloading pre-included static PDF
export_json_button: true, // show "Export JSON" button
import_json_button: true, // show "Import JSON" button
github_button: true, // show "GitHub" button
generate_backend_pdf_template: false, // generate a template to be used by backend to generate PDF
print_show_web_version_link: false, // show web version link in print view so that it will be shown in the print-view-generated PDF (`web_version_url` is optionally defined in CV data JSON)
}
```
Modify user data and settings in `data/`, `pdf/` and `settings/` folders, and run `npm start` (dev mode) or `npm run build` (build production file).
## Back end
To use [Google reCAPTCHA](https://www.google.com/recaptcha/) ([register new site in console](https://www.google.com/recaptcha/admin/create)), you need to have a back end. A Node.js+Express.js-powered simple back end is in the `backend/` folder. Modify `backend/settings.js`, move the production files you have built from `dist/` to `backend/static`, deploy `backend/` to your server, run `npm start` at `backend/` directory.
If you use Google reCAPTCHA, It is automatically assumed you do not want your pages to be indexed by search engines and web crawlers.
`backend/settings.js`:
* `useRecaptcha`:
* `false`: do not use reCAPTCHA
* `'checkbox'`: checkbox reCAPTCHA (v2)
* *ANYTHING ELSE*: invisible reCAPTCHA (v2 or v3)
* the other settings should be pretty clear
## Stack
Not bootstrapped with Create React App, it uses:
* React + Redux (react-redux) for the main logic
* Babel, webpack, PostCSS, some plugins and loaders for transpilation and module bundling
* Material UI for buttons
* Main page area is built with CSS Flexbox, and using Sass and CSS Modules
* *Formik + Yup for forms (will be used)*
* *Immer (will be used)*, Redux Thunk for store manipulation and asynchronous operations
* i18next for forms i18n
* Influenced by JAMstack (JSON source, Markdown support via react-markdown)
* Prettier, ESLint, stylelint for linting
* Day.js for date manipulation
* Puppeteer for backend PDF creation
* Jest for test
* CircleCI and Codecov for CI
* *[`ts-version`](https://github.com/tomchen/react-printable-cv/tree/ts-version) branch is a partially-checked TypeScript version transformed from `master` branch's ES version v2.1. The project will continue to be developed in ES*
## To do
Things that could be done in the future to make it better or more interesting:
* [ ] Editor forms (Edit Mode)
* [ ] Backend generates PDF on-demand