Building a resume with React and Sketch

Keeping a resume up to date is quite a struggle on its own; the maintenance and the workflow are painful. This is an experiment to drive the resume’s data with code and to compute the UI based on it. The source is taken from JSON files, the UI is computed with React and the rendering is processed by Sketch.

You can view the demo and check the source code on GitHub.

Why?

I’ve been traveling a lot the past two years, studying and working abroad. My main school remaining in Paris, I’ve had the chance to work in Australia and the UK, and to study in Sweden and Canada.

It’s been fantastic times but it’s hard to keep track of it and keep my resume up to date. I believe in automation — my goal is to store my data as JSON files, compute the UI with React and render the whole thing in Sketch to tweak it. I explain the other benefits of such a technique in a next section.

How it works

react-sketchapp is a library that serves as a bridge between your React components and Sketch (a digital design tool appreciated by designers). You can think of it as a React renderer for Sketch.

Airbnb originally made this library with these uses in mind:

• Manage design systems
• Use real components for designs
• Design with real data
• Build new tools on top of Sketch

While its use cases are still being discovered and discussed, I wanted to see where I could go with it.

The potential of such a technique

Declaring data

As a developer, when you get to separate the data from the UI in such an environment, you basically feel like you’ve got superpowers. It is a relief to me not to have to open a specific software to update some data, I can jump right into a configuration file (JSON, YAML, etc.) that can be loaded with Webpack. This means that the information now is the single source of truth. The output will be what’s in my configuration files and nothing more.

Fetching online data

Being independent of the rendering software also means that you can pull data from anywhere, it doesn’t need to be static (as opposed to dynamic, e.g. fetching online data). I decided to make my resume feel more “alive” by fetching my pinned GitHub repositories with the awesome GitHub GraphQL API.

Bringing the UI to life

Since I compute the UI according to the input data, I have the full power to manipulate the data instead of rendering it raw. As a basic example, I don’t need to say “I’m 21 years old”, but rather “I’m born in June 1995”. I give some exact information that I can process in my React component. That means that I will never have to change most of the input information, but only to re-render my resume, which is going to compute the according UI at a new point in time.

const Event = ({ title, description, info, done, isFirst, isLast }) => (
  <View name={title}>
    <View name="Event Left">
      <VerticalLine width={3} color={isFirst ? '#fff' : '#ccc'} />      <Dot width={24} borderColor="#ccc" filled={done} />      <VerticalLine
        height={4}
        width={3}
        borderStyle={isLast ? 'dotted' : 'solid'}      />
    </View>

    <View name="Event Body">
      <Text name="Event Info">{info.join(' • ')}</Text>

      <Text name="Event Title">{title}</Text>

      <Text name="Event Description">{description}</Text>
    </View>
  </View>
)

When my internship contract is over, the UI gets updated with a filled gray circle when I re-generate the resume after the end date. I can also sort the items, go to GitHub to change my pinned repositories and it will replicate in Sketch… You get the idea. And on top of that, I can generate the data in any language!

Whenever my life enters a new state, it gets generated accordingly in my resume.

Features

• Compute age based on my birthdate
• Sort events in descending chronological order
• Update timelines’ state at every render (circles get filled when a contract with a university or a company is over)
• Retrieve my last projects and experiences
• Sort items alphabetically
• Fetch my GitHub pinned repositories
• Translate to any language

Drawbacks

Sketch not being made for PDF originally, I don’t have any way to make links clickable.

Deployment

I use Netlify for most of my projects since I discovered this product. When I push some update on my GitHub repository, Netlify triggers a deploy and renders my resume at resume.francoischalifour.com.

Netlify also does the routing for me:

• English version at /en
• French version at /fr

I wrote a script to write the correct Exif information when exporting the PDF so you get the correct title, author, and everything.

Spreading the word

Now, the most interesting part! Cambridge Intelligence, the company I’m interning at, organizes monthly meetups on JavaScript. They gave me the opportunity to talk. I chose React as a Platform, inspired by Leland Richardson.

My point was to make the audience to go from think of the “Web, Android and iOS” as 3 different platforms to “React as a unique platform”. That may sound either great or terrible depending on your point of view.

I eventually demoed my talk with my react-sketchapp-resume project. That was such a great experience. I got to learn so much in the process and it apparently inspired a few people. I’ll definitely give more talks in the future!

The future of designers and developers

This year was a blast for devsigners. There’s so many new amazing tools and possibilities with the great abstraction that React provides. Projects like react-sketchapp are the kind of tools that can make developers and designers work better together. I’m so excited to see what will come next and would like to thank all these designers/developers for inspiring me so much.

I recommend reading Painting with Code by the inspiring Jon Gold to fully understand all the new perspectives it brings.