7 minute read

Resume example

Cela fait pas mal de temps que je cherche un moyen simple, efficace et sympa pour gĂ©rer mon CV. Avant cet article c’était, selon les pĂ©riodes, un document Word, Excel, voir mĂȘme mon profile GitHub.

Mais voilĂ , je n’ai jamais Ă©tĂ© un grand amoureux des traitements de textes ou autre outils pour faire des slides. Du coup, depuis quelques mois je cherchais une façon de gĂ©nĂ©rer un CV en markdown. Les principaux avantages que j’y voyais :

  • le markdown est simple et relativement reproductible en terme de rendu,
  • je peux gĂ©rer le CV dans des PR,
  • idĂ©alement je veux aussi gĂ©rer les donnĂ©es Ă  cĂŽtĂ© pour apporter du dynamisme,
  • je peux modifier le rendu Ă  loisir (sous rĂ©serve de mes capacitĂ©s en CSS 😅),
  • si c’est en markdown j’aimerai l’intĂ©grer facilement Ă  mon blog en Jekyll.

Les deux problĂšmes que je voyais arriver :

  • la gestion d’une version immuable en PDF pour les envois Ă  des recruteuses / recruteurs,
  • la potentielle intĂ©gration Ă  mon site existant.

Alors pari gagnĂ© ? Voyons ça ensemble âŹ‡ïž.

Tout en liquide 
 💧

Resume example CĂ©sar Couto

Je vous l’ai dit, j’ai trĂšs vite exclu le fait de faire un CV statique en markdown. AprĂšs coup, je me dis que cela aurait pu ĂȘtre aussi une bonne solution mais je voulais quelque chose avec les donnĂ©es Ă  part comme on peut trouver dans JSON Resume.

Pour avoir déjà un peu bidouillé Jekyll pour amener du dynamisme il est possible de faire des trucs sympas avec le moteur de templating Liquid.
En quoi cela consiste ? DĂ©finir des templates en HTML pour y injecter du dynamisme avec des boucles par exemple ou de la donnĂ©e externe stockĂ©e dans un fichier. Pour les plus vielles et plus vieux d’entre vous ce que l’on faisait en JSTL đŸ€Ș.

Un petit exemple que j’utilise sur ce blog:

1
2
3
4
5
<div class="entries-{{ entries_layout }}">
  {% for post in posts %}
    {% include archive-single.html type=entries_layout %}
  {% endfor %}
</div>

Car oui, la bonne nouvelle est que c’est nativement inclus dans Jekyll, le moteur de gĂ©nĂ©ration utilisĂ© pour ce site 😎.

Mais alors comment ça marche ? ⚙

Architecture de Jekyll @wildagsx

Au final, il y a deux choses principales pour faire un site avec Jekyll :

  • la partie design : de maniĂšre classique les compĂ©tences vont ĂȘtre axĂ©es sur le HTML, CSS et Javascript,
  • la partie gĂ©nĂ©ration / dynamisme : lĂ  ce sont plus des compĂ©tences algorithmiques classiques et la connaissance de Liquid qui vont ĂȘtre importantes.

Autant vous le dire tout suite : CSS / JS ne font pas bon mĂ©nage avec moi 😅, plutĂŽt que de repartir de zĂ©ro et faire un truc moche, j’ai donc choisi de partir d’un thĂšme Jekyll existant.

Note 📝 :
Un thĂšme Jekyll est composĂ© de sa partie statique (html, css, js) mais aussi dynamique (liquid). C’est en fait un site opĂ©rationnel.
La seule diffĂ©rence est que vous pouvez le rĂ©fĂ©rencer comme votre site parent et surcharger et / ou configurer les Ă©lĂ©ments de votre choix. Comme c’est un site opĂ©rationnel, vous pouvez trĂšs bien choisir de tout simplement en faire un fork puis de l’adapter Ă  vos besoins.
A titre d’exemple, ce blog utilise la premiĂšre option en rĂ©fĂ©rençant le thĂšme parent minimal-mistakes dans le config.yml : remote_theme: mmistakes/minimal-mistakes.

Dans mon cas, je savais que j’aurai des modifications structurelles Ă  apporter au thĂšme d’origine. J’ai donc choisi de faire un fork. J’en ai profitĂ© pour proposer des PR avec les modifications que j’apportais au fur et Ă  mesure đŸ€.

Les modifications que j’ai apportĂ©es au thĂšme d’origine :

  • choix de la localisation de la sidebar (droite ou gauche),
  • support du multilingues pour avoir un CV en français et un en anglais.

Codons notre CV đŸ‘šâ€đŸ’»

Image code Chris Ried

Je vous l’ai dit, je suis parti d’un thĂšme existant : online CV de Sharath Kumar. J’ai beaucoup aimĂ© le look gĂ©nĂ©ral du CV et comme je vous l’ai dit c’était bien au delĂ  de ce que je pouvais rĂȘver arriver comme rĂ©sultat si j’étais parti de rien đŸ€©.
Comme dĂ©jĂ  indiquĂ© dans le paragraphe prĂ©cĂ©dent, j’ai customisĂ© le thĂšme pour qu’il colle parfaitement Ă  mes besoins.

Dans le détail quelles sont les étapes pour arriver à mon CV final ?

Fork du repository 🔀

Rien de bien compliquĂ©, dans ce cas Github est votre ami pour faire directement un fork 😉. Ensuite l’idĂ©e Ă©tait de pouvoir continuer Ă  participer au projet tout en crĂ©ant mon CV sans envoyer mes donnĂ©es dans le thĂšme d’origine 😅. Pour cela, j’ai simplement crĂ©Ă© une branche my-resume qui me sert de branche de production dans Github pour la configuration de Github pages. Cette branche contient le code upstream, le code des PR que j’ai proposĂ©es en attente de validation (ou pas) et le code propre Ă  mon CV Ă  moi.

Tout ceci se trouve ici : online-cv.

Ajout de fonctionnalitĂ©s ✹

La premiĂšre fonctionnalitĂ© que j’ai rajoutĂ©e permet de mettre la barre latĂ©rale d’informations (nom, prĂ©nom, tĂ©lĂ©phone, 
) Ă  gauche ou Ă  droite. Pour cela j’ai rajoutĂ© un champ de configuration dans le fichier data.yml :

1
2
sidebar:
    position: left # position of the sidebar : left or right

Note 📝 :
Avec Jekyll et Liquid vos données sont stockées dans un fichier YAML dans le répertoire _data. Ensuite pour y accéder dans des tags Liquid : site.data.<nom du fichier>

Ensuite j’ai modifiĂ© le CSS (ouh lĂ  đŸ˜±) pour la prise en compte du choix :

1
2
3
4
5
6
7
8
// define variable with front matter
{% if site.data.data.sidebar.position == 'left' %}
$resume-order: 2;
$sidebar-order: 1;
{% else %}
$resume-order: 1;
$sidebar-order: 2;
{% endif %}

Ensuite il ne me restait plus qu’à utiliser les variables dans le SCSS :

1
2
3
4
5
.sidebar-wrapper {
  grid-column: span 3;
  order: $sidebar-order;
  // ...
}

Le dĂ©tail de cette modification est dans la PR#359 sur le repo d’origine.

L’autre modification consistait Ă  pouvoir avoir mon CV en anglais en plus du français. Dans les issues du repository d’origine il est indiquĂ© qu’il faut crĂ©er autant de repositories que de versions du CV. Cela me dĂ©rangeait par rapport Ă  la duplication de code alors que techniquement, seul le fichier data.yml change puisqu’il contient l’ensemble des donnĂ©es : titres de sections et informations du CV.

La premiÚre chose a été de créer un nouveau fichier de données en rajoutant la possibilité de spécifier la langue : data-fr.yml.
Ensuite j’ai crĂ©Ă© un layout par langue :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
---
#Add "layout: compress" here to compress the html code
---
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
{% include head.html %}
{% assign data = site.data.data-fr %}
<body>
  <div class="wrapper">
    {% include sidebar.html %}

    <div class="main-wrapper">
        {{ content }}
    </div>
  </div>

  {% include footer.html %}

{% include scripts.html %}
</body>

</html>

La principale chose à retenir est la récupération du bon fichier de data : {% assign data = site.data.data-fr %}.

Enfin, créer un nouvel index utilisant ce layout :

1
2
3
4
5
6
---
layout: default-fr
---
{% assign data = site.data.data-fr %}

{% include index-common.html %}

Le dĂ©tail de l’ensemble de ces modifications se trouve dans la PR#360 dans le repository d’origine.

Ajout des donnĂ©es 🔠

C’est la partie la plus simple, remplir le data.yml avec mes donnĂ©es que je souhaitais voir apparaĂźtre dans mon CV.

1
2
3
4
5
6
7
8
9
sidebar:
    about: False # set to False or comment line if you want to remove the "how to use?" in the sidebar
    education: True # set to False if you want education in main section instead of in sidebar

    # Profile information
    name: Stéphane Philippart
    tagline: Developer Relation
    avatar: stephane_philippart.jpg 
# ...

Je vous laisse aller voir le détail sur le repository.

L’impression đŸ–šïž

Le thĂšme permet d’avoir une page dĂ©diĂ©e Ă  l’impression. C’est bien, mais l’idĂ©e est aussi d’avoir un PDF afin de pouvoir le fournir Ă  des personnes souhaitant avoir le CV au format fichier. La problĂ©matique est d’arriver Ă  gĂ©nĂ©rer un PDF propre Ă  partir d’une page Web. La version imprimable n’est pas gĂ©niale et au final je pense qu’un peu de CSS pourrait arranger ça mais vous me connaissez le CSS et moi 😅.

Du coup, je suis parti sur utiliser un convertisseur en ligne qui fait ça trĂšs bien : https://www.freeconvert.com/webpage-to-pdf. Cerise sur le gĂąteau il gĂ©nĂšre une version PDF Ă  partir de la page principale trĂšs propre 😎.

En conclusion

VoilĂ  il reste des choses Ă  faire et Ă  peaufiner, par exemple :

  • gĂ©rer la langue par dĂ©faut en configuration plutĂŽt qu’en dure dans les fichiers,
  • ne pas avoir de duplication de code,
  • optimiser le CSS,
  • 


Si vous ĂȘtes arrivĂ©s jusque lĂ  merci de m’avoir lu et si il y a des coquilles n’hĂ©sitez pas Ă  me faire une issue ou PR 😊.

Merci à ma relectrice, Fanny, qui vous permet de lire cet article sans avoir trop les yeux qui saignent 😘.

Comments