βš›οΈ πŸ’Ž My resume built with React and rendered to Sketch
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
config
data
images
scripts
src
.editorconfig
.env.sample
.eslintignore
.eslintrc
.gitignore
.prettierignore
.prettierrc
LICENSE
README.md
package.json
yarn.lock

README.md

react-sketchapp-resume

βš›οΈ πŸ’Ž My resume built with React and rendered to Sketch using react-sketchapp.

Screenshot

View PDF ouput πŸ”Ž

Requirements: Sketch 43+, Raleway font family.

Features

  • πŸŽ‚ Dynamic age based on my birthdate
  • πŸ“… Events sorted in descending chronological order
  • πŸŽ“ Timelines' state updated at every render (circles get filled when a contract with a university or a company is over)
  • πŸ”’ Retrieve only my last projects and experiences
  • πŸ”€ Sort items alphabetically
  • :octocat: Fetch my GitHub pinned repositories
  • πŸ‡«πŸ‡· Translate to any language (only French and English are relevant to me)

Usage

  • Install dependencies: yarn install
  • Run the images server: yarn serve
  • Render to Sketch: yarn render

Alternatively, you can use yarn start to serve the images and render.

More commands

  • Render in French: yarn render:fr
  • Render in English: yarn render:en
  • Render in prototype mode: yarn render:mock
  • Render in production: yarn render:production

By default, the resume is in mock environment (doesn't pull real data from GitHub) when developing.

Production environment

  • Create an OAuth token to get access to the GitHub GraphQL API (only public_repo scope is required)
  • Option 1:
  • Option 2:
    • Stay in mock environment
    • Duplicate .env.sample, rename it .env and fill the right GitHub information
    • Run yarn github:fetch to re-generate your up-to-date pinned repositories
  • Run yarn render to render to Sketch

Once you have saved your PDF in output/resume.[lang].pdf, run yarn pdf:metadata to fill the correct Exif metadata.

Explanation

All the information of the resume is stored in the data folder, both in English and French.

react-sketchapp is still in early development and doesn't support local image import. I had to serve my images folder to render them in the artboard.

Everything is rendered with React, except gradients and skew lines shown on the screenshot, which are not yet supported by react-sketchapp. I added some fancy tweaks manually in Sketch.

Why?

The main reason I have never kept my resume updated is that the workflow was terrible. I will now only need to update the data and render in any language.

I was quite bored with "static" resumes and thought it was a good opportunity to display some real data in there. I used the GitHub GraphQL API to fetch my pinned repositories and inject them into Sketch.

I'm more a developer than a designer, eh.

License

MIT © François Chalifour