refactor[resume]: lots of small changes

.eleventy.js

@@ -23,7 +23,6 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addWatchTarget("./src/scss/");
   eleventyConfig.setLibrary("md", markdownLib);
   eleventyConfig.addPlugin(pluginNavigation);
-  eleventyConfig.setUseGitIgnore(false);
   eleventyConfig.addPassthroughCopy({
     "assets/": "./",
   });
@@ -100,6 +99,10 @@ module.exports = function (eleventyConfig) {
     return year.toString();
   });
 
+  eleventyConfig.addFilter("renderMarkdown", function (rawString) {
+    return markdownLib.renderInline(rawString);
+  });
+
   return {
     markdownTemplateEngine: "njk",
     passthroughFileCopy: true,

src/_data/resumes/en.yml

@@ -17,8 +17,8 @@ contacts:
       url: https://signal.org/
       icon: fa fa-phone
 
-    Brest, France:
+    Toulouse, France:
-      url: https://www.openstreetmap.org/#map=12/48.3930/-4.4601
+      url: https://www.openstreetmap.org/relation/35738#map=12/43.6/1.44
       icon: fa fa-location-arrow
 
 socials:
@@ -40,7 +40,7 @@ experience:
   title: Professional experience
   list:
     Bio-cleaning agent:
-      description: Blue-collar internship at the Centrer Hospitalier Régional Universitaire de Brest (CHRU) for a two-month period. I learned to organize and work efficiently in a team.
+      description: Blue-collar internship at the [Centrer Hospitalier Régional Universitaire de Brest (CHRU)](https://www.chu-brest.fr/fr) for a two-month period. I learned to organize and work efficiently in a team.
       date: Summer 2021
 
 school_projects:
@@ -50,34 +50,35 @@ school_projects:
       repo: https://git.inpt.fr/tobgang/sagittarius
       pdf: https://git.inpt.fr/tobgang/sagittarius-pdf/-/blob/master/iteration3/rapport3.pdf
       role: Author
-      description:
+      description: From an object oriented programming project in [Java](https://en.wikipedia.org/wiki/Java_(programming_language)), a little 2D turn-based game inspired by [a game under the same name by George Prosser](https://gprosser.itch.io/sagittarius).
-        As a result of an object oriented programming project in java,
-        here is a little 2D turn-based game inspired by a game under the same name
-        by George Prosser.
 
     Minishell:
       repo: https://git.inpt.fr/fainsil/minishell
       role: Author
-      description: Implementation of a basic shell program in C, capable of launching programs, piping their streams and sending them signals.
+      description: Implementation of a basic [shell program](https://en.wikipedia.org/wiki/Shell_(computing)) in [C](https://en.wikipedia.org/wiki/C_(programming_language)), capable of launching programs, piping their streams and sending them signals.
 
     Pagerank:
       repo: https://git.inpt.fr/fainsil/pagerank
       pdf: https://git.inpt.fr/fainsil/pagerank/-/blob/master/doc/rapport.pdf
       role: Author
-      description: Implementation of an iterative algorithm in Ada to compute the pagerank of a given network as quickly and efficiently as possible.
+      description: Implementation of an iterative algorithm in [Ada](https://en.wikipedia.org/wiki/Ada_(programming_language)) to compute the [pagerank](https://en.wikipedia.org/wiki/PageRank) of a given network as quickly and efficiently as possible.
 
 personnal_projects:
   title: Personnal projects
   list:
+    net7/INP-net:
+      role: Treasurer/President
+      description: Active member of my school's computer association which provides many services to over 10,000 students.
+
     B00 plays GBA:
       repo: https://git.inpt.fr/fainsil/booplaysgba/
       role: Author
-      description: Using technologies such as websocket, redis, docker, rtmp, mgba and gluing it all together with Python, we get a collaborative emulator inspired from TwitchPlaysPokemon.
+      description: Using technologies such as [websocket](https://websockets.readthedocs.io/en/stable/), [redis](https://redis.io/), [docker](https://www.docker.com/), [rtmp](https://en.wikipedia.org/wiki/Real-Time_Messaging_Protocol), [mgba](https://github.com/mgba-emu/mgba) and gluing it all together with [Python](https://en.wikipedia.org/wiki/Python_(programming_language)), we get a collaborative emulator inspired from [TwitchPlaysPokemon](https://en.wikipedia.org/wiki/Twitch_Plays_Pok%C3%A9mon).
 
-    This website:
+    Personnal website:
       repo: https://git.inpt.fr/fainsil/personnal-website/
       role: Author
-      description: I made this website almost entirely from scratch, I used the static site generetor 11ty.js to simplify the process thanks to its templating system. I learned a lot about HTML, CSS, Javascript and it also allowed me to strengthen my git skills.
+      description: Simple website built with the static site generetor [11ty.js](https://www.11ty.dev/). Made with [Nunjucks](https://mozilla.github.io/nunjucks/), [SCSS](https://sass-lang.com/), [Javascript](https://developer.mozilla.org/fr/docs/Web/JavaScript), [Yarn](https://yarnpkg.com/) and autodeployed with a [GitLab pipeline](https://git.inpt.fr/fainsil/personnal-website/-/pipelines).
 
 education:
   title: Education
@@ -110,51 +111,52 @@ skills:
     Text Processing:
       level: advanced
       tags:
-        - Word
+        - "[Word](https://www.microsoft.com/fr-fr/microsoft-365/word)"
-        - Excel
+        - "[Excel](https://www.microsoft.com/fr-fr/microsoft-365/excel)"
-        - LaTeX
+        - "[LaTeX](https://www.latex-project.org/)"
-        - Markdown
+        - "[Markdown](https://en.wikipedia.org/wiki/Markdown)"
 
     Scientific Computing:
       level: advanced
       tags:
-        - Numpy
+        - "[Numpy](https://www.microsoft.com/fr-fr/microsoft-365/word)"
-        - Tensorflow
+        - "[Matplotlib](https://matplotlib.org/)"
+        - "[Tensorflow](https://www.tensorflow.org/)"
 
     AdminSys:
       level: advanced
       tags:
-        - Linux
+        - "[Linux](https://en.wikipedia.org/wiki/Linux)"
-        - Git
+        - "[Git](https://git-scm.com/)"
-        - Apache
+        - "[Apache](https://httpd.apache.org/)"
-        - Nginx
+        - "[Nginx](https://www.nginx.com/)"
 
     CI/CD:
       level: intermediate
       tags:
-        - Docker
+        - "[Docker](https://www.docker.com/)"
-        - Kubernetes
+        - "[Kubernetes](https://kubernetes.io/)"
 
     Databases:
       level: intermediate
       tags:
-        - SQL
+        - "[SQL](https://en.wikipedia.org/wiki/SQL)"
-        - Redis
+        - "[Redis](https://redis.io/)"
-        - Prisma
+        - "[Prisma](https://www.prisma.io/)"
 
     Web Development:
       level: intermediate
       tags:
-        - Django
+        - "[Django](https://www.djangoproject.com/)"
-        - 11ty.js
+        - "[11ty.js](https://www.11ty.dev/)"
-        - Svelte
+        - "[Svelte](https://svelte.dev/)"
 
     Licenses:
       level: french
       tags:
-        - AM
+        - "[AM](https://www.securite-routiere.gouv.fr/les-differents-permis-de-conduire/permis-cyclomoteur-categorie-am)"
-        - B
+        - "[B](https://www.securite-routiere.gouv.fr/les-differents-permis-de-conduire/permis-auto-categorie-b)"
-        - B1
+        - "[B1](https://www.securite-routiere.gouv.fr/les-differents-permis-de-conduire/permis-auto-categorie-b/passer-le-permis-b1)"
 
 reading:
   title: Readings
@@ -222,7 +224,7 @@ interests:
     GitHub/Gitlab:
       summary: Regular open source software user and tinkerer.
       tags:
-        - Git
+        - "[Git](https://git-scm.com/)"
         - Open Source
 
     Archery:

src/_data/resumes/fr.yml

@@ -17,8 +17,8 @@ contacts:
       url: https://signal.org/
       icon: fa fa-phone
 
-    Brest, France:
+    Toulouse, France:
-      url: https://www.openstreetmap.org/#map=12/48.3930/-4.4601
+      url: https://www.openstreetmap.org/relation/35738#map=12/43.6/1.44
       icon: fa fa-location-arrow
 
 socials:
@@ -36,6 +36,13 @@ socials:
       url: https://matrix.to/#/@fainsil:inpt.fr
       icon: fa fa-matrix-org
 
+experience:
+  title: Expérience professionnelle
+  list:
+    Agent de bio-nettoyage:
+      description: Stage ouvrier au [Centre Hospitalier Régional Universitaire de Brest (CHRU)](https://www.chu-brest.fr/fr) pour une période de deux mois. J'ai appris à m'organiser et à travailler efficacement en équipe.
+      date: Été 2021
+
 school_projects:
   title: Projets scolaires
   list:
@@ -43,38 +50,35 @@ school_projects:
       repo: https://git.inpt.fr/tobgang/sagittarius
       pdf: https://git.inpt.fr/tobgang/sagittarius-pdf/-/blob/master/iteration3/rapport3.pdf
       role: Author
-      description: Suite à un projet de programmation orientée objet en java, voici un petit jeu 2D au tour par tour inspiré d'un jeu du même nom de George Prosser.
+      description: Issu d'un projet de programmation orientée objet en [Java](https://en.wikipedia.org/wiki/Java_(programming_language)), un petit jeu 2D au tour par tour inspiré d'un [jeu du même nom de George Prosser](https://gprosser.itch.io/sagittarius).
 
     Minishell:
       repo: https://git.inpt.fr/fainsil/minishell
       role: Author
-      description: Implémentation d'un shell en C, capable d'exécuter des programmes, de rediriger leurs flux et de leur envoyer des signaux.
+      description: Implémentation d'un [shell](https://en.wikipedia.org/wiki/Shell_(computing)) en [C](https://en.wikipedia.org/wiki/C_(programming_language)), capable d'exécuter des programmes, de rediriger leurs flux et de leur envoyer des signaux.
 
     Pagerank:
       repo: https://git.inpt.fr/fainsil/pagerank
       pdf: https://git.inpt.fr/fainsil/pagerank/-/blob/master/doc/rapport.pdf
       role: Author
-      description: Mise en œuvre d'un algorithme itératif en Ada pour calculer le pagerank d'un réseau donné, aussi rapidement et efficacement que possible.
+      description: Mise en œuvre d'un algorithme itératif en [Ada](https://en.wikipedia.org/wiki/Ada_(programming_language)) pour calculer le [pagerank](https://en.wikipedia.org/wiki/PageRank) d'un réseau donné, aussi rapidement et efficacement que possible.
 
 personnal_projects:
   title: Projets personnels
   list:
+    net7/INP-net:
+      role: Trésorier/Président
+      description: Membre actif de l'association informatique de mon école qui fournit de nombreux services à plus de 10 000 étudiants.
+
     B00 plays GBA:
       repo: https://git.inpt.fr/fainsil/booplaysgba/
       role: Author
-      description: En utilisant des technologies telles que websocket, redis, docker, rtmp, mgba et en collant le tout avec Python, on obtient un émulateur collaboratif inspiré de TwitchPlaysPokemon.
+      description: En utilisant des technologies telles que [websocket](https://websockets.readthedocs.io/en/stable/), [redis](https://redis.io/), [docker](https://www.docker.com/), [rtmp](https://en.wikipedia.org/wiki/Real-Time_Messaging_Protocol), [mgba](https://github.com/mgba-emu/mgba) et en collant le tout avec [Python](https://en.wikipedia.org/wiki/Python_(programming_language)), on obtient un émulateur collaboratif inspiré de [TwitchPlaysPokemon](https://en.wikipedia.org/wiki/Twitch_Plays_Pok%C3%A9mon).
 
     Ce site web:
       repo: https://git.inpt.fr/fainsil/personnal-website/
       role: Author
-      description: J'ai fait ce site presque entièrement de zéro, pour simplifier le processus de création j'ai utilisé le générateur de site statique 11ty.js et son système de templates.
+      description: Site web simple construit avec le générateur de site statique [11ty.js](https://www.11ty.dev/). Réalisé avec [Nunjucks](https://mozilla.github.io/nunjucks/), [SCSS](https://sass-lang.com/), [Javascript](https://developer.mozilla.org/fr/docs/Web/JavaScript), [Yarn](https://yarnpkg.com/) et autodéployé avec un [pipeline GitLab](https://git.inpt.fr/fainsil/personnal-website/-/pipelines).
-
-experience:
-  title: Expérience professionnelle
-  list:
-    Agent de bio-nettoyage:
-      description: Stage ouvrier au Centre Hospitalier Régional Universitaire de Brest (CHRU) pour une période de deux mois. J'ai appris à m'organiser et à travailler efficacement en équipe.
-      date: Été 2021
 
 education:
   title: Éducation
@@ -106,52 +110,51 @@ skills:
     Traitement de texte:
       level: avancé
       tags:
-        - Word
+        - "[Word](https://www.microsoft.com/fr-fr/microsoft-365/word)"
-        - Excel
+        - "[Excel](https://www.microsoft.com/fr-fr/microsoft-365/excel)"
-        - LaTeX
+        - "[LaTeX](https://www.latex-project.org/)"
-        - Markdown
+        - "[Markdown](https://en.wikipedia.org/wiki/Markdown)"
 
     Calcul scientifique:
       level: avancé
       tags:
-        - Numpy
+        - "[Numpy](https://www.microsoft.com/fr-fr/microsoft-365/word)"
-        - Tensorflow
+        - "[Matplotlib](https://matplotlib.org/)"
-        - Pandas
+        - "[Tensorflow](https://www.tensorflow.org/)"
-        -
 
     AdminSys:
       level: advanced
       tags:
-        - Linux
+        - "[Linux](https://en.wikipedia.org/wiki/Linux)"
-        - Git
+        - "[Git](https://git-scm.com/)"
-        - Apache
+        - "[Apache](https://httpd.apache.org/)"
-        - Nginx
+        - "[Nginx](https://www.nginx.com/)"
 
     CI/CD:
       level: intermediate
       tags:
-        - Docker
+        - "[Docker](https://www.docker.com/)"
-        - Kubernetes
+        - "[Kubernetes](https://kubernetes.io/)"
 
     Base de données:
       level: intermediate
       tags:
-        - SQL
+        - "[SQL](https://en.wikipedia.org/wiki/SQL)"
-        - Redis
+        - "[Redis](https://redis.io/)"
-        - Prisma
+        - "[Prisma](https://www.prisma.io/)"
 
     Développement web:
       level: intermédiaire
       tags:
-        - Django
+        - "[Django](https://www.djangoproject.com/)"
-        - 11ty.js
+        - "[11ty.js](https://www.11ty.dev/)"
-        - Svelte
+        - "[Svelte](https://svelte.dev/)"
 
     Permis:
       tags:
-        - AM
+        - "[AM](https://www.securite-routiere.gouv.fr/les-differents-permis-de-conduire/permis-cyclomoteur-categorie-am)"
-        - B
+        - "[B](https://www.securite-routiere.gouv.fr/les-differents-permis-de-conduire/permis-auto-categorie-b)"
-        - B1
+        - "[B1](https://www.securite-routiere.gouv.fr/les-differents-permis-de-conduire/permis-auto-categorie-b/passer-le-permis-b1)"
 
 reading:
   title: Lectures
@@ -219,7 +222,7 @@ interests:
     GitHub/Gitlab:
       summary: Utilisateur régulier de logiciels open source.
       tags:
-        - Git
+        - "[Git](https://git-scm.com/)"
         - Open Source
 
     Tir à l'arc:

src/index.md

@@ -20,7 +20,8 @@ Hi, my name's Laurent Fainsin, and I'm currently an M1 [engineering](https://www
 
   <section>
     <h3>{{ key }}</h3>
-    <p>{{ project.description }}</p>
+    {{- project.description | renderMarkdown | safe -}}
+    {%- if project.pdf or project.repo -%}
     <div class="project-links">
       {%- if project.pdf -%}
         <a class="fa fa-file-pdf-o" href="{{ 'project.pdf' | url }}"></a>
@@ -29,6 +30,7 @@ Hi, my name's Laurent Fainsin, and I'm currently an M1 [engineering](https://www
         <a class="fa fa-git" href="{{ project.repo }}"></a>
       {%- endif -%}
     </div>
+    {%- endif -%}
   </section>
 
 {% endfor %}

src/resume/resume.njk

@@ -23,191 +23,228 @@ permalink: "resume/{{ resume.locale }}/index.html"
   {% for page in pagination.pages %}
     {% if page.locale != resume.locale %}
       <a href="{{ pagination.hrefs[loop.index-1] }}" target="_self">
-        <span class="{{ page.flag_icon }}"></span><span style="text-transform:uppercase;">{{ page.locale }}</span>
+        <i class="{{ page.flag_icon }}"></i>
       </a>
     {% endif %}
   {% endfor %}
 {% endblock header %}
 
 {% block content %}
-  <div class="row">
+  <div id="resume">
-    <div class="col-1">
+    <div id="left">
 
-      <h1>{{ resume.name }}
+      <section>
-        <small>({{ resume.info.label }})</small>
+        <h1>{{ resume.name }}
-      </h1>
+          <small>({{ resume.info.label }})</small>
+        </h1>
+      </section>
 
       <hr>
 
-      <h2>{{ resume.experience.title }}</h2>
+      <section>
-      {% for key, exp in resume.experience.list %}
+        <h2>{{ resume.experience.title }}</h2>
-        <section>
+        {% for key, exp in resume.experience.list %}
-          <h3>
+          <div>
-            {{ key }}
+            <h3>
-            <small>({{ exp.date }})</small>
+              {{ key }}
-          </h3>
+              <small>({{ exp.date }})</small>
-          <p>{{ exp.description }}</p>
+            </h3>
-        </section>
+            <p>{{ exp.description | renderMarkdown | safe }}</p>
-      {% endfor %}
-
-      <hr>
-
-      <h2>{{ resume.school_projects.title }}</h2>
-      {% for key, project in resume.school_projects.list %}
-        <section>
-          <h3>{{ key }}</h3>
-          <p>{{ project.description }}</p>
-
-          <div class="project-links">
-            {% if project.pdf %}
-              <a class="fa fa-file-pdf-o" href="{{ project.pdf }}"></a>
-            {% endif %}
-            {% if project.repo %}
-              <a class="fa fa-git" href="{{ project.repo }}"></a>
-            {% endif %}
           </div>
-        </section>
-      {% endfor %}
-
-      <hr>
-
-      <h2>{{ resume.personnal_projects.title }}</h2>
-      {% for key, project in resume.personnal_projects.list %}
-        <section>
-          <h3>{{ key }}</h3>
-          <p>{{ project.description }}</p>
-          <div class="project-links">
-            {% if project.pdf %}
-              <a class="fa fa-file-pdf-o" href="{{ 'project.pdf' | url }}"></a>
-            {% endif %}
-            {% if project.repo %}
-              <a class="fa fa-git" href="{{ project.repo }}"></a>
-            {% endif %}
-          </div>
-        </section>
-      {% endfor %}
-
-      <hr>
-
-      <h2>{{ resume.reading.title }}</h2>
-      <ul>
-        {% for key, read in resume.reading.list %}
-          <li>
-            <a href="{{ read.url }}">{{ key }}</a>
-          </li>
         {% endfor %}
-      </ul>
+      </section>
 
       <hr>
 
-      <h2>{{ resume.interests.title }}</h2>
+      <section>
-      {% for key, interest in resume.interests.list %}
+        <h2>{{ resume.school_projects.title }}</h2>
-        <section>
+        {% for key, project in resume.school_projects.list %}
-          <h3>{{ key }}</h3>
+          <div>
-          <p>{{ interest.summary }}</p>
+            <h3>{{ key }}</h3>
-          <ul>
+            <p>{{ project.description | renderMarkdown | safe }}</p>
-            {% for tag in interest.tags %}
+
-              <li class="tag">{{ tag }}</li>
+            {% if project.pdf or project.repo %}
-            {% endfor %}
+              <span class="project-links">
-          </ul>
+                {% if project.pdf %}
-        </section>
+                  <a class="fa fa-file-pdf-o" href="{{ project.pdf }}"></a>
-      {% endfor %}
+                {% endif %}
+                {% if project.repo %}
+                  <a class="fa fa-git" href="{{ project.repo }}"></a>
+                {% endif %}
+              </span>
+            {% endif %}
+          </div>
+        {% endfor %}
+      </section>
+
+      <hr>
+
+      <section>
+        <h2>{{ resume.personnal_projects.title }}</h2>
+        {% for key, project in resume.personnal_projects.list %}
+          <div>
+            <h3>{{ key }}</h3>
+            <p>{{ project.description | renderMarkdown | safe }}</p>
+
+            {% if project.pdf or project.repo %}
+              <span class="project-links">
+                {% if project.pdf %}
+                  <a class="fa fa-file-pdf-o" href="{{ 'project.pdf' | url }}"></a>
+                {% endif %}
+                {% if project.repo %}
+                  <a class="fa fa-git" href="{{ project.repo }}"></a>
+                {% endif %}
+              </span>
+            {% endif %}
+          </div>
+        {% endfor %}
+      </section>
+
+      <hr>
+
+      <section>
+        <h2>{{ resume.reading.title }}</h2>
+        <ul>
+          {% for key, read in resume.reading.list %}
+            <li>
+              <a href="{{ read.url }}">{{ key }}</a>
+            </li>
+          {% endfor %}
+        </ul>
+      </section>
+
+      <hr>
+
+      <section>
+        <h2>{{ resume.interests.title }}</h2>
+        {% for key, interest in resume.interests.list %}
+          <div>
+            <h3>{{ key }}</h3>
+            <p>{{ interest.summary }}</p>
+            <div class="tags">
+              {% for tag in interest.tags %}
+                {% if '[' in tag and ']' in tag %}
+                  {{ tag | renderMarkdown | safe }}
+                {% else %}
+                  <a>{{ tag }}</a>
+                {% endif %}
+              {% endfor %}
+            </div>
+          </div>
+        {% endfor %}
+      </section>
 
     </div>
 
-    <div class="col-2">
+    <div id="right">
 
-      <h2>{{ resume.contacts.title }}</h2>
+      <section>
-      <ul>
+        <h2>{{ resume.contacts.title }}</h2>
-        {% for key, contact in resume.contacts.list %}
+        <ul>
-          <li>
+          {% for key, contact in resume.contacts.list %}
-            <span class="{{ contact.icon }}"></span>
+            <li>
-            <a href="{{ contact.url }}">{{key}}</a>
+              <i class="{{ contact.icon }}"></i>
-          </li>
+              <a href="{{ contact.url }}">{{key}}</a>
-        {% endfor %}
+            </li>
-      </ul>
+          {% endfor %}
+        </ul>
+      </section>
 
       <hr>
 
-      <h2>{{ resume.socials.title }}</h2>
+      <section>
-      <ul>
+        <h2>{{ resume.socials.title }}</h2>
-        {% for key, social in resume.socials.list %}
+        <ul>
-          <li>
+          {% for key, social in resume.socials.list %}
-            <span class="{{social.icon}}"></span>
+            <li>
-            <a href="{{social.url}}">{{key}}</a>
+              <i class="{{social.icon}}"></i>
-          </li>
+              <a href="{{social.url}}">{{key}}</a>
-        {% endfor %}
+            </li>
-      </ul>
+          {% endfor %}
+        </ul>
+      </section>
 
       <hr>
 
-      <h2>{{ resume.education.title }}</h2>
+      <section>
-      <ul class="timeline">
+        <h2>{{ resume.education.title }}</h2>
-        <span class="arrow-up"></span>
+        <ul class="timeline">
-        <li class="event"></li>
+          <i class="arrow-up"></i>
-        {% for key, edu in resume.education.list %}
+          <li class="event"></li>
+          {% for key, edu in resume.education.list %}
 
-          {% if edu.end != (resume.education.list | list)[loop.index - 2].value.start %}
+            {% if edu.end != (resume.education.list | list)[loop.index - 2].value.start %}
-            {% if loop.index != 1 %}
+              {% if loop.index != 1 %}
-              <li class="event"></li>
+                <li class="event"></li>
+              {% endif %}
+              <li class="year">{{ edu.end }}</li>
             {% endif %}
-            <li class="year">{{ edu.end }}</li>
-          {% endif %}
 
-          <li class="event">
+            <li class="event">
-            {{ edu.title }}<br>
+              {{ edu.title }}<br>
-            <a href="{{ edu.url }}">{{ key }}</a>
+              <a href="{{ edu.url }}">{{ key }}</a>
-            <br>{{ edu.eqv }}
+              <br>{{ edu.eqv }}
-          </li>
+            </li>
 
-          <li class="year">{{ edu.start }}</li>
+            <li class="year">{{ edu.start }}</li>
-        {% endfor %}
+          {% endfor %}
 
-        <li class="event"></li>
+          <li class="event"></li>
-      </ul>
+        </ul>
+      </section>
 
       <hr>
 
-      <h2>{{ resume.skills.title }}</h2>
+      <section>
-      <ul>
+        <h2>{{ resume.skills.title }}</h2>
-        {% for key, skill in resume.skills.list %}
+        <ul>
-          <li>
+          {% for key, skill in resume.skills.list %}
-            {{ key }}
+            <li>
-            {% if skill.level %}
+              {{ key }}
-              <small> ({{ skill.level }}) </small>
+              {% if skill.level %}
-            {% endif %}
+                <small>({{ skill.level }})</small>
-            <ul>
+              {% endif %}
-              {% for tag in skill.tags %}
+              <div class="tags">
-                <li class="tag">{{ tag }}</li>
+                {% for tag in skill.tags %}
-              {% endfor %}
+                  {% if '[' in tag and ']' in tag %}
-            </ul>
+                    {{ tag | renderMarkdown | safe }}
-          </li>
+                  {% else %}
-        {% endfor %}
+                    <a>{{ tag }}</a>
-      </ul>
+                  {% endif %}
+                {% endfor %}
+              </div>
+            </li>
+          {% endfor %}
+        </ul>
+      </section>
 
       <hr>
 
-      <h2>{{ resume.languages.title }}</h2>
+      <section>
-      <ul>
+        <h2>{{ resume.languages.title }}</h2>
-        {% for key, lang in resume.languages.list %}
+        <ul>
-          <li>
+          {% for key, lang in resume.languages.list %}
-            <span class="{{ lang.icon }}"></span>
+            <li>
-            {{ key }}
+              <i class="{{ lang.icon }}"></i>
-            <small>({{ lang.level }})</small>
+              {{ key }}
-          </li>
+              <small>({{ lang.level }})</small>
-        {% endfor %}
+            </li>
-      </ul>
+          {% endfor %}
+        </ul>
+      </section>
 
-      <h2>{{ resume.langages.title }}</h2>
+      <section>
-      <ul>
+        <h2>{{ resume.langages.title }}</h2>
-        {% for key, lang in resume.langages.list %}
+        <ul>
-          <li>
+          {% for key, lang in resume.langages.list %}
-            <span class="{{ lang.icon }}"></span>
+            <li>
-            {{ key }}
+              <i class="{{ lang.icon }}"></i>
-            <small>({{ lang.level }})</small>
+              {{ key }}
-          </li>
+              <small>({{ lang.level }})</small>
-        {% endfor %}
+            </li>
-      </ul>
+          {% endfor %}
+        </ul>
+      </section>
 
     </div>
   </div>

src/scss/resume.scss

@@ -8,111 +8,131 @@ header {
   justify-content: space-between;
 }
 
-h1,
+#resume {
-h2 {
-  height: auto;
-}
-
-.row {
   display: flex;
+
+  #left {
+    flex: 65%;
+    padding-right: 1rem;
+  }
+
+  #right {
+    flex: 35%;
+    padding-left: 1rem;
+  }
 }
 
-.col-1 {
+section {
-  flex: 65%;
+  padding-bottom: 0;
-  padding-right: 1em;
-}
 
-.col-2 {
+  div,
-  flex: 35%;
+  ul {
-  padding-left: 1em;
+    margin-bottom: 1rem;
-}
+    margin-left: 1rem;
 
-ul {
+    .tags {
-  list-style: none;
+      display: flex;
-  margin: 0;
+      gap: 0.5rem;
-  padding-left: 1em;
-}
 
-.timeline {
+      a {
-  li {
+        text-decoration: underline;
+        text-decoration-thickness: 2px;
+        text-decoration-color: #942994;
+        font-size: 1rem;
+
+        &:hover {
+          text-decoration-color: #d45fd4;
+        }
+      }
+    }
+  }
+
+  h1 > small {
+    font-size: 1.5rem;
+  }
+
+  small {
+    vertical-align: middle;
+  }
+
+  ul {
+    list-style: none;
     margin: 0;
-    padding: 0;
+    padding-left: 1rem;
+    padding-bottom: 0;
+
+    &.timeline {
+      padding-left: 1rem;
+
+      .arrow-up {
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-bottom: 10px solid #c0c5ce;
+        margin-left: 1.25rem;
+        top: -0.7rem;
+        position: relative;
+      }
+
+      li {
+        margin: 0;
+
+        &.event {
+          padding: 1rem;
+          margin-left: 1.5rem;
+          border-left: 2px #c0c5ce solid;
+        }
+      }
+    }
   }
-
-  .arrow-up {
-    width: 0;
-    height: 0;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-bottom: 10px solid #c0c5ce;
-    margin-left: calc(1.25em - 4px);
-    top: -8px;
-    position: relative;
-  }
-
-  .event {
-    padding: 0.8em 0 0.8em 2.3em;
-    margin-left: 1.25em;
-    border-left: 2px #c0c5ce solid;
-  }
-}
-
-.tag {
-  display: inline;
-  border-bottom: 2px #942994 solid;
-  border-radius: 0.2em;
-  margin-right: 0.3em;
-  font-size: 17px;
-}
-
-small {
-  font-size: 0.7em;
-  vertical-align: middle;
-}
-
-h1>small {
-  font-size: 0.45em;
 }
 
 @media print {
   @page {
     size: auto;
     margin: 0;
+    padding: 0;
   }
 
   body,
   html {
-    background-color: white !important;
     color: black;
-    max-width: 100%;
     color-adjust: exact !important;
-    -webkit-print-color-adjust: exact !important;
+    background-color: white !important;
-  }
 
-  body {
+    max-width: 100%;
-    margin: 2em;
-    font-size: 13px;
-  }
 
-  li {
+    margin: 0;
-    .event {
+    padding: 0;
-      border-left: 2px black solid;
-    }
-
-    .tag {
-      font-size: 10px;
-    }
   }
 
   a {
     color: black;
-    text-decoration: none;
+  }
+
+  hr {
+    margin: 1rem 0;
+  }
+
+  ul {
+    .tag {
+      font-size: 10px;
+    }
+
+    &.timeline {
+      li.event {
+        border-left-color: #000 !important;
+      }
+
+      .arrow-up {
+        border-bottom-color: #000 !important;
+      }
+    }
   }
 
   header,
   footer,
-  .btn-back,
+  #btn-back,
-  a.fa {
+  span {
     display: none;
   }
 }

src/scss/style.scss

@@ -11,18 +11,17 @@ $h1-size: 3rem;
 
 /* inter-regular - latin */
 @font-face {
-  font-family: 'Inter';
+  font-family: "Inter";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: local(''),
+  src: local(""), url("/fonts/inter-v7-latin-regular.woff2") format("woff2");
-    url('/fonts/inter-v7-latin-regular.woff2') format('woff2'),
 }
 
 body {
   background-color: $background;
   color: $foreground-text;
-  font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
   text-rendering: optimizeLegibility;
   font-size: $font-size;
   width: 60rem;
@@ -94,29 +93,29 @@ video {
 }
 
 section {
-  padding-left: 1em;
+  padding-left: 1rem;
-  padding-bottom: 1em;
+  padding-bottom: 1rem;
 
   p {
-    padding-left: 1em;
+    padding-left: 1rem;
     margin: 0;
-    margin-bottom: 0.2em;
+    margin-bottom: 0.2rem;
   }
 
   h3 {
-    margin-bottom: 0.3em;
+    margin-bottom: 0.3rem;
   }
 
   ul {
-    padding-left: 2em;
+    padding-left: 2rem;
-    padding-bottom: 1em;
+    padding-bottom: 1rem;
   }
 
   .project-links {
-    padding-left: 1em;
+    padding-left: 1rem;
 
     a {
-      padding-left: 0.3em;
+      padding-left: 0.3rem;
       text-decoration: none;
     }
   }