Keeping a resume up to date is quite a struggle. The lack of automation makes its maintenance painful and the workflow terrible. I experimentally coded my resume with React and rendered it to Sketch.

react-sketchapp-resume View demo View on GitHub

At the time of writing, I’m interning in Cambridge and I spend some time designing with Sketch, hanging out with designers, and developing with React on my own. Airbnb released react-sketchapp which inspired me so much that I needed to do something with this adrenaline rush.

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’ll 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 very 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>
)

If I finish an internship, the UI will get updated with a filled gray circle when I re-generate the resume after the end date. I can also sort all my items, go to GitHub to change my pinned repositories and it will replicate in Sketch… You get the idea. And of course, I can generate the data in any language!

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

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)

Drawbacks

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

Deployment

Since I discovered Netlify, I basically use it for all my projects. So when I push some update on my GitHub repository, Netlify will trigger a deploy and render my resume at resume.francoischalifour.com.

Netlify also does the routing for me:

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 give a 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.

Gotta keep experimenting!