Building a resume with React and Sketch

Keeping a resume up to date is already a struggle; the maintenance and workflow are painful. This is an experiment to drive a resume from data and compute the UI from it. The source comes 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.

At the time of writing, I'm interning in Cambridge and spending time designing with Sketch, going to designer meetups, and developing with React on my own. Airbnb released react-sketchapp, which inspired me to run this experiment.

Why?

I've been traveling a lot over the past two years, studying and working abroad. With my main school back in Paris, I've had the chance to work in Australia and the UK, and to study in Sweden and Canada.

They've been fantastic times, but it's hard to keep track of it all 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 this technique in a later 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 take 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's a relief not to open a specific piece of software just to update data; I can jump right into a configuration file (JSON, YAML, etc.) that can be loaded with Webpack. This means the information is now 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; you're not limited to static 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 from 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 was born in June 1995". I provide exact information that I can process in my React component. That means I will never have to change most of the input information, only re-render my resume so it can compute the corresponding 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 regenerate the resume after the end date. I can also sort the items, go to GitHub to change my pinned repositories, and see that replicated 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, my resume gets generated accordingly.

Features

• Compute age based on my birthdate
• Sort events in descending chronological order
• Update timeline states 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

Since Sketch wasn't originally made for PDFs, I don't have any way to make links clickable.

Deployment

I use Netlify for most of my projects since I discovered it. When I push an update to 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 JavaScript meetups. They gave me the opportunity to give a talk. I chose React as a Platform, inspired by Leland Richardson.

My point was to get the audience to stop thinking of "Web, Android and iOS" as 3 different platforms and start thinking of "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 are so many amazing new 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 comes next, and I 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.