CVs and other websites presenting technical skills often lack a time dimension, allowing to know when and for how long a technology has been used.

Timeline on CV

About 8 years ago, I wanted to add a visual representation of my experience on my PDF CV.

Since I already used LaTeX with the excellent moderncv class, I wanted the solution to extend on that class. TeX StackExchange did not disappoint (they never do) and this gave birth to the moderntimeline LaTeX package which I have been maintaining since.

To this day I still use this solution on my CV.

Since then, a template has even been added to Overleaf to make it easier!

Technology timeline

The CV timeline is still not enough to present the data I wish to display, which is the temporal evolution of technical skills.

OpenHub

Among the many websites which analyze public code repositories to get metrics out of them, OpenHub (previously Ohloh) is very interesting because it presents a timeline of languages used in projects.

Here's an example with my profile, where you can identify clear periods: a lot of LaTeX (dark blue) in the first years (when I edited books), then Augeas (light grey), mostly Ruby (red) between 2012 and 2015, then mainly Go (purple).

A broader approach

Not every tech skill can be measured with a number of code lines though.
So in 2013, I switched my main CV page to a temporal skills view.

This uses vis.js to build a table of skills from a JSON file, e.g.:

[
  {"id": "Orange", "content": "<img src='img/orange.png' class='logo' /><b>Orange Portails</b><br />Systems Engineer", "start": "2006-06-01", "end": "2012-03-01", "type": "background", "className": "orange"},
  {"id": "Camptocamp", "content": "<img src='img/camptocamp.png' class='logo' /><b>Camptocamp</b><br />Infrastructure Developer", "start": "2012-03-01", "type": "background", "className": "camptocamp"},

  {"group": "provisioning", "content": "Debian FAI", "start": "2006-06-01", "end": "2012-03-01", "className": "contributed"},
  {"group": "provisioning", "content": "Kickstart", "start": "2006-06-01", "className": "implemented"},
  {"group": "provisioning", "content": "Terraform", "name": "terraform", "start": "2016-05-01", "className": "contributed"}
]

This JSON file is parsed and displayed on the page. Each skill can be assigned an icon as well as additional information. The skill bar can be clicked to display this information, taken from the skills/ directory and documented in Markdown.

The code is open-source and can be forked on GitHub. Just check the gh-pages branch:

As usual, pull requests are welcome if you find nice ways to improve this!