From 8225f465bcf3f8c72ed48ae7abe688b7fbf4df7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laure=CE=B7t?= Date: Wed, 26 Jan 2022 01:09:06 +0100 Subject: [PATCH] refactor[resume]: lots of small changes --- .eleventy.js | 5 +- src/_data/resumes/en.yml | 70 ++++---- src/_data/resumes/fr.yml | 79 +++++----- src/index.md | 4 +- src/resume/resume.njk | 333 ++++++++++++++++++++++----------------- src/scss/resume.scss | 170 +++++++++++--------- src/scss/style.scss | 25 ++- 7 files changed, 376 insertions(+), 310 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index 2f0b4b1..e9e64c1 100644 --- a/.eleventy.js +++ b/.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, diff --git a/src/_data/resumes/en.yml b/src/_data/resumes/en.yml index 466747c..61e44ca 100644 --- a/src/_data/resumes/en.yml +++ b/src/_data/resumes/en.yml @@ -17,8 +17,8 @@ contacts: url: https://signal.org/ icon: fa fa-phone - Brest, France: - url: https://www.openstreetmap.org/#map=12/48.3930/-4.4601 + Toulouse, France: + 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: - 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. + 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). 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 - - Excel - - LaTeX - - Markdown + - "[Word](https://www.microsoft.com/fr-fr/microsoft-365/word)" + - "[Excel](https://www.microsoft.com/fr-fr/microsoft-365/excel)" + - "[LaTeX](https://www.latex-project.org/)" + - "[Markdown](https://en.wikipedia.org/wiki/Markdown)" Scientific Computing: level: advanced tags: - - Numpy - - Tensorflow + - "[Numpy](https://www.microsoft.com/fr-fr/microsoft-365/word)" + - "[Matplotlib](https://matplotlib.org/)" + - "[Tensorflow](https://www.tensorflow.org/)" AdminSys: level: advanced tags: - - Linux - - Git - - Apache - - Nginx + - "[Linux](https://en.wikipedia.org/wiki/Linux)" + - "[Git](https://git-scm.com/)" + - "[Apache](https://httpd.apache.org/)" + - "[Nginx](https://www.nginx.com/)" CI/CD: level: intermediate tags: - - Docker - - Kubernetes + - "[Docker](https://www.docker.com/)" + - "[Kubernetes](https://kubernetes.io/)" Databases: level: intermediate tags: - - SQL - - Redis - - Prisma + - "[SQL](https://en.wikipedia.org/wiki/SQL)" + - "[Redis](https://redis.io/)" + - "[Prisma](https://www.prisma.io/)" Web Development: level: intermediate tags: - - Django - - 11ty.js - - Svelte + - "[Django](https://www.djangoproject.com/)" + - "[11ty.js](https://www.11ty.dev/)" + - "[Svelte](https://svelte.dev/)" Licenses: level: french tags: - - AM - - B - - B1 + - "[AM](https://www.securite-routiere.gouv.fr/les-differents-permis-de-conduire/permis-cyclomoteur-categorie-am)" + - "[B](https://www.securite-routiere.gouv.fr/les-differents-permis-de-conduire/permis-auto-categorie-b)" + - "[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: diff --git a/src/_data/resumes/fr.yml b/src/_data/resumes/fr.yml index 60e1d9e..bdad088 100644 --- a/src/_data/resumes/fr.yml +++ b/src/_data/resumes/fr.yml @@ -17,8 +17,8 @@ contacts: url: https://signal.org/ icon: fa fa-phone - Brest, France: - url: https://www.openstreetmap.org/#map=12/48.3930/-4.4601 + Toulouse, France: + 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. - -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 + 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). education: title: Éducation @@ -106,52 +110,51 @@ skills: Traitement de texte: level: avancé tags: - - Word - - Excel - - LaTeX - - Markdown + - "[Word](https://www.microsoft.com/fr-fr/microsoft-365/word)" + - "[Excel](https://www.microsoft.com/fr-fr/microsoft-365/excel)" + - "[LaTeX](https://www.latex-project.org/)" + - "[Markdown](https://en.wikipedia.org/wiki/Markdown)" Calcul scientifique: level: avancé tags: - - Numpy - - Tensorflow - - Pandas - - + - "[Numpy](https://www.microsoft.com/fr-fr/microsoft-365/word)" + - "[Matplotlib](https://matplotlib.org/)" + - "[Tensorflow](https://www.tensorflow.org/)" AdminSys: level: advanced tags: - - Linux - - Git - - Apache - - Nginx + - "[Linux](https://en.wikipedia.org/wiki/Linux)" + - "[Git](https://git-scm.com/)" + - "[Apache](https://httpd.apache.org/)" + - "[Nginx](https://www.nginx.com/)" CI/CD: level: intermediate tags: - - Docker - - Kubernetes + - "[Docker](https://www.docker.com/)" + - "[Kubernetes](https://kubernetes.io/)" Base de données: level: intermediate tags: - - SQL - - Redis - - Prisma + - "[SQL](https://en.wikipedia.org/wiki/SQL)" + - "[Redis](https://redis.io/)" + - "[Prisma](https://www.prisma.io/)" Développement web: level: intermédiaire tags: - - Django - - 11ty.js - - Svelte + - "[Django](https://www.djangoproject.com/)" + - "[11ty.js](https://www.11ty.dev/)" + - "[Svelte](https://svelte.dev/)" Permis: tags: - - AM - - B - - B1 + - "[AM](https://www.securite-routiere.gouv.fr/les-differents-permis-de-conduire/permis-cyclomoteur-categorie-am)" + - "[B](https://www.securite-routiere.gouv.fr/les-differents-permis-de-conduire/permis-auto-categorie-b)" + - "[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: diff --git a/src/index.md b/src/index.md index 61c46ca..f637bef 100644 --- a/src/index.md +++ b/src/index.md @@ -20,7 +20,8 @@ Hi, my name's Laurent Fainsin, and I'm currently an M1 [engineering](https://www

{{ key }}

-

{{ project.description }}

+ {{- project.description | renderMarkdown | safe -}} + {%- if project.pdf or project.repo -%}
{%- if project.pdf -%} @@ -29,6 +30,7 @@ Hi, my name's Laurent Fainsin, and I'm currently an M1 [engineering](https://www {%- endif -%}
+ {%- endif -%}
{% endfor %} diff --git a/src/resume/resume.njk b/src/resume/resume.njk index b8c3394..71272a8 100644 --- a/src/resume/resume.njk +++ b/src/resume/resume.njk @@ -23,191 +23,228 @@ permalink: "resume/{{ resume.locale }}/index.html" {% for page in pagination.pages %} {% if page.locale != resume.locale %} - {{ page.locale }} + {% endif %} {% endfor %} {% endblock header %} {% block content %} -
-
+
+
-

{{ resume.name }} - ({{ resume.info.label }}) -

+
+

{{ resume.name }} + ({{ resume.info.label }}) +

+
-

{{ resume.experience.title }}

- {% for key, exp in resume.experience.list %} -
-

- {{ key }} - ({{ exp.date }}) -

-

{{ exp.description }}

-
- {% endfor %} - -
- -

{{ resume.school_projects.title }}

- {% for key, project in resume.school_projects.list %} -
-

{{ key }}

-

{{ project.description }}

- -
- {% if project.pdf %} - - {% endif %} - {% if project.repo %} - - {% endif %} +
+

{{ resume.experience.title }}

+ {% for key, exp in resume.experience.list %} +
+

+ {{ key }} + ({{ exp.date }}) +

+

{{ exp.description | renderMarkdown | safe }}

-
- {% endfor %} - -
- -

{{ resume.personnal_projects.title }}

- {% for key, project in resume.personnal_projects.list %} -
-

{{ key }}

-

{{ project.description }}

-
- {% if project.pdf %} - - {% endif %} - {% if project.repo %} - - {% endif %} -
-
- {% endfor %} - -
- -

{{ resume.reading.title }}

-
    - {% for key, read in resume.reading.list %} -
  • - {{ key }} -
    • {% endfor %} -
+
-

{{ resume.interests.title }}

- {% for key, interest in resume.interests.list %} -
-

{{ key }}

-

{{ interest.summary }}

-
    - {% for tag in interest.tags %} -
  • {{ tag }}
    • - {% endfor %} -
-
- {% endfor %} +
+

{{ resume.school_projects.title }}

+ {% for key, project in resume.school_projects.list %} +
+

{{ key }}

+

{{ project.description | renderMarkdown | safe }}

+ + {% if project.pdf or project.repo %} + + {% if project.pdf %} + + {% endif %} + {% if project.repo %} + + {% endif %} + + {% endif %} +
+ {% endfor %} +
+ +
+ +
+

{{ resume.personnal_projects.title }}

+ {% for key, project in resume.personnal_projects.list %} +
+

{{ key }}

+

{{ project.description | renderMarkdown | safe }}

+ + {% if project.pdf or project.repo %} + + {% if project.pdf %} + + {% endif %} + {% if project.repo %} + + {% endif %} + + {% endif %} +
+ {% endfor %} +
+ +
+ +
+

{{ resume.reading.title }}

+
    + {% for key, read in resume.reading.list %} +
  • + {{ key }} +
    • + {% endfor %} +
+
+ +
+ +
+

{{ resume.interests.title }}

+ {% for key, interest in resume.interests.list %} +
+

{{ key }}

+

{{ interest.summary }}

+
+ {% for tag in interest.tags %} + {% if '[' in tag and ']' in tag %} + {{ tag | renderMarkdown | safe }} + {% else %} + {{ tag }} + {% endif %} + {% endfor %} +
+
+ {% endfor %} +
-
+
diff --git a/src/scss/resume.scss b/src/scss/resume.scss index 64c7b28..13cfb22 100644 --- a/src/scss/resume.scss +++ b/src/scss/resume.scss @@ -8,111 +8,131 @@ header { justify-content: space-between; } -h1, -h2 { - height: auto; -} - -.row { +#resume { display: flex; + + #left { + flex: 65%; + padding-right: 1rem; + } + + #right { + flex: 35%; + padding-left: 1rem; + } } -.col-1 { - flex: 65%; - padding-right: 1em; -} +section { + padding-bottom: 0; -.col-2 { - flex: 35%; - padding-left: 1em; -} + div, + ul { + margin-bottom: 1rem; + margin-left: 1rem; -ul { - list-style: none; - margin: 0; - padding-left: 1em; -} + .tags { + display: flex; + gap: 0.5rem; -.timeline { - li { + a { + 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 { - margin: 2em; - font-size: 13px; - } + max-width: 100%; - li { - .event { - border-left: 2px black solid; - } - - .tag { - font-size: 10px; - } + margin: 0; + padding: 0; } 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, - a.fa { + #btn-back, + span { display: none; } } diff --git a/src/scss/style.scss b/src/scss/style.scss index 9fb68da..1403885 100644 --- a/src/scss/style.scss +++ b/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(''), - url('/fonts/inter-v7-latin-regular.woff2') format('woff2'), + src: local(""), 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-bottom: 1em; + padding-left: 1rem; + 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-bottom: 1em; + padding-left: 2rem; + padding-bottom: 1rem; } .project-links { - padding-left: 1em; + padding-left: 1rem; a { - padding-left: 0.3em; + padding-left: 0.3rem; text-decoration: none; } }