Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

βš›οΈ πŸ’Ž My resume built with React and rendered to Sketch

Topics

Resources

License

Releases

No releases published

Packages

No packages published