feat: file missing skill descriptions

src/App.vue

@@ -93,9 +93,9 @@ export default class App extends Vue {
 			position: absolute;
 				margin-left: 0%;
 				width: 100%;
-				height: .15rem;
+				height: .1em;
 
-			background: #3333be;
+			background: #5f50bf;
 
 			transition: width .2s ease-in-out, margin-left .2s ease-in-out;
 
@@ -106,7 +106,6 @@ export default class App extends Vue {
 			color: #fff;
 
 			&:after {
-				margin-left: 5%;
 				width: 90%;
 			}
 		}

src/components/Home.vue

@@ -348,14 +348,14 @@ export default class Home extends Vue {
 		}
 	}
 
-	@media screen and (max-width: 1600px) {
+	@media (max-width: 1600px) {
 		.readme {
 			align-self: center;
 			margin-bottom: 0;
 			font-size: 1vw;
 		}
 	}
-	@media screen and (max-width: 1200px) {
+	@media (max-width: 1200px) {
 		.name {
 			font-size: 1.2vw;
 

src/components/LevelDisplay.vue

@@ -0,0 +1,83 @@
+<template>
+	<div class='level' >
+		<div ref='l1' class='l1'/>
+		<div ref='l2' class='l2'/>
+		<div ref='l3' class='l3'/>
+		<div ref='l4' class='l4'/>
+		<div ref='l5' class='l5'/>
+	</div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+
+@Component({})
+export default class LevelDisplay extends Vue {
+	// id of the skill to display (number representation)
+	@Prop(Number) private level: number|undefined;
+
+	protected mounted(){
+		this.update(this.level);
+	}
+
+	@Watch('level')
+  	protected onLevelChanged(val: number|undefined, oldVal: number|undefined) {
+		this.update(val);
+	}
+
+	private update(level: number|undefined) {
+		if( level == undefined ){
+			return;
+		}
+
+		const els : HTMLElement[] = [
+			this.$refs.l1 as HTMLElement,
+			this.$refs.l2 as HTMLElement,
+			this.$refs.l3 as HTMLElement,
+			this.$refs.l4 as HTMLElement,
+			this.$refs.l5 as HTMLElement,
+		];
+		for( let i = 0 ; i < els.length ; i++ ){
+			if( els[i] == undefined ){
+				continue;
+			}
+			els[i].classList.remove("active");
+			if( i < level ){
+				els[i].classList.add("active");
+			}
+		}
+	}
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+	.level {
+		display: flex;
+
+		flex-flow: row nowrap;
+
+		div {
+			display: block;
+			position: relative;
+				width:  1.2em;
+				height: 1.2em;
+
+			margin: 0 .2em;
+
+			border-radius: 50%;
+			border: .2rem solid #141619;
+			background: #141619;
+
+		}
+
+		.l1.active { background: darken(#6252c6, 8%); }
+		.l2.active { background: darken(#6252c6, 6%); }
+		.l3.active { background: darken(#6252c6, 4%); }
+		.l4.active { background: darken(#6252c6, 2%); }
+		.l5.active { background: darken(#6252c6, 0%); }
+
+		.l1 { margin-left: 0; }
+		.l5 { margin-right: 0; }
+	}
+</style>

src/components/SkillPicker.vue

@@ -22,7 +22,11 @@
 				</section>
 
 				<section class='details' v-if='details != null'>
-					<img :src='details.icon'/>
+					<header>
+						<span class='interest'>{{ $t('skills.interest') }}<LevelDisplay :level='details.interest'/></span>
+						<img :src='details.icon'/>
+						<span class='mastery'>{{ $t('skills.mastery') }}<LevelDisplay :level='details.mastery'/></span>
+					</header>
 					<h1 v-html='details.title'></h1>
 					<h2>{{ $t('skills.featured-before') }} <b>{{ details.projects.length }}</b> {{ details.projects.length > 1 ? $t('skills.featured-after-n') : $t('skills.featured-after-1') }}</h2>
 					<h3>
@@ -54,6 +58,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import SkillCard from './SkillCard.vue';
+import LevelDisplay from './LevelDisplay.vue';
 import { skillLabel, tagLabel, tID, tTag } from '@/model/skills';
 import { Project } from '@/model/projects';
 import * as skills from '@/service/skills';
@@ -61,12 +66,15 @@ import * as projects from '@/service/projects';
 import { go } from '@/service/scroller';
 import * as url from '@/service/url';
 import { Locales } from '@/locales';
+import { Level } from '@/model/level';
 
 interface Details {
 	icon: string|null;
 	title: string;
 	projects: Project[];
 	text: { [key in Locales]: string };
+	interest: Level,
+	mastery: Level,
 }
 
 const DEFAULT_TAG = tTag.All;
@@ -74,6 +82,7 @@ const DEFAULT_TAG = tTag.All;
 @Component({
 	components: {
 		SkillCard,
+		LevelDisplay,
 	},
 })
 export default class SkillPicker extends Vue {
@@ -186,6 +195,8 @@ export default class SkillPicker extends Vue {
 			title:    this.$t(skillLabel(id)).toString(),
 			projects: projects.bySkill(id),
 			text:     skill.info,
+			interest: skill.interest,
+			mastery:  skill.mastery,
 		};
 	}
 
@@ -299,11 +310,33 @@ export default class SkillPicker extends Vue {
 		align-items: center;
 		justify-content: flex-start;
 
-		img {
-			display: block;
-			flex: 8em 0 0;
+		header {
+			flex: auto 0 1;
+			width: calc( 100% - 2*3em );
+			margin: 0 auto;
+
+			display: flex;
+
+			flex-flow: row nowrap;
+			justify-content: space-between;
+			align-items: flex-start;
+
+			span {
+				display: flex;
+				position: relative;
+				flex-flow: column nowrap;
+			}
+
+			.interest { align-items: flex-start; }
+			.mastery { align-items: flex-end; }
+
+			img {
+				display: block;
+				flex: 8em 0 0;
+			}
 		}
 
+
 		h1 {
 			font-size: 4em;
 			color: #cacaca;
@@ -322,6 +355,7 @@ export default class SkillPicker extends Vue {
 		}
 
 		h3 {
+			margin: 0 3em;
 			margin-top: .8em;
 
 			font-size: 1.3em;
@@ -430,7 +464,7 @@ export default class SkillPicker extends Vue {
 	}
 
 	// width > 1800px : center the container
-	@media screen and (min-width: 1800px) {
+	@media (min-width: 1800px) {
 		.container {
 			left: calc( 100vw/2 - 1800px/2 - #{$page-margin} );
 			max-width: 1800px;
@@ -438,7 +472,7 @@ export default class SkillPicker extends Vue {
 	}
 
 	// screen less than 1400 p
-	@media screen and (max-width: 1400px) {
+	@media (max-width: 1400px) {
 		#skill-picker {
 			font-size: 1vw;
 

src/locales/en.json

@@ -20,6 +20,8 @@
 	"skills.browse":           "Browse projects",
 	"skills.browse-all":       "Browse all projects",
 	"skills.guide":            "You can select a skill to browse related projects. You can browse all projects by not selecting or deselecting the active skill.",
+	"skills.interest":         "interest level",
+	"skills.mastery":          "mastery level",
 
 	"tag.all": "All",
 	"tag.web": "Web",

src/locales/fr.json

@@ -20,6 +20,8 @@
 	"skills.browse":           "Parcourir les projets",
 	"skills.browse-all":       "Parcourir tous les projets",
 	"skills.guide":            "Vous pouvez sélectionner une compétence afin de parcourir les projets liés. Vous pouvez aussi parcourir tous les projets en ne sélectionnant pas de compétence.",
+	"skills.interest":         "intérêt",
+	"skills.mastery":          "maîtrise",
 
 	"tag.all": "Tout",
 	"tag.web": "Web",

src/model/level.ts

@@ -0,0 +1,8 @@
+export enum Level {
+	L0 = 0,
+	L1 = 1,
+	L2 = 2,
+	L3 = 3,
+	L4 = 4,
+	L5 = 5,
+}

src/model/projects.ts

@@ -128,7 +128,7 @@ export const Projects: Project[] = [
 		stopped_at: new Date(2018, 10, 5),
 		info: {
 			[Locales.EN]: 'I conducted the LogAuth project back in 2017 for a French branch of an international carrier and logistics company. The project aims to provide a solution to track their warehouse\'s users and vehicles. The project consists of:<ul><li><b>SMMP</b> : website accessible on the Internet for warehouse management.</li><li><b>SATS</b> : hardware and software for a Raspberry Pi that is embedded on each machine. It provides RFID authentication to users with history capability.</li><li><b>setup</b>  : tool to write a functional microSD card for each new Raspberry to add to the system (custom credentials, id, features, plugins).</li></ul><br>The SATS system consists of a shield (electronic board) that attaches to the Raspberry Pi and a firmware. The firmware is a collection of programs that are executed through a complex <b>systemd</b> state machine. It schedules the different phases: boot, network connection, update check, update, I/O initialization, the daemon (main loop).<br><br>It grants or denies access when a RFID card is detected, the access list is updated periodically from the SMMP API. The SATS firmware is capable of updating itself and loading new features from the network. It records all accesses (or attempts), manages and monitors the status of the machine in real time.<br><br>I made several PCBs so that SATS can interface correctly with the Arduino, and in later versions with a Raspberry Pi.<br><br>Through this project, I have designed a customized authentification system, which protects communications between SATS and the SMMP. It avoids key theft, request hijacking, and allows a secure resynchronization protocol after an attack or theft. Source: <a href="https://git.xdrm.io/logauth/schastsp/src/branch/master/PROTOCOL.md">Draft protocol</a>',
-			[Locales.FR]: 'J\'ai réalisé le projet <b>LogAuth</b> en 2017 pour la branche française d\'une entreprise internationale de transport et logistique. Le projet vise à fournir une solution de suivi et gestion des accès utilisateurs aux machines d\'un entrepôt.<br><br>Le projet consiste en:<ul><li><b>SMMP</b> : site web accessible sur Internet pour la gestion par entrepôt.</li><li><b>SATS</b> : hardware et logiciel pour un Raspberry Pi qui est embarqué sur chaque machine. Il fournit une authentification RFID aux utilisateurs avec historique.</li><li><b>setup</b> : outil permettant d\'écrire un carte microSD fonctionnelle pour chaque nouveau Raspberry à ajouter au système (authentification sur-mesure, id, fonctionnalités, plugins).</li></ul><br>Le système SATS consiste en un shield (carte éléctronique) qui se branche au Raspberry Pi ainsi qu\'un firmware. Le firmware est composé de plusieurs programmes lancés à travers une machine à état complexe basée sur <b>systemd</b>. Elle ordonnance les différentes phases : boot, connexion réseau, vérification de mise à jour, mise à jour, initialisation entrées/sorties, le démon (boucle principale).<br><br>Il autorise ou non les accès quand une carte RFID est détectée, la liste des accès est mise à jour périodiquement depuis l\'api SMMP. Il est capable de se mettre à jour et de charger de nouvelles fonctionnalités depuis le réseau. Il enregistre tous les accès (ou tentatives), gère et monitore l\'état de la machine en temps réel.<br><br>J\'ai réalisé plusieurs PCBs afin que le SATS s\'interface correctement avec l\'Arduino, puis dans les dernières versions avec un Raspberry Pi.<br><br>J\'ai pu lors de ce projet concevoir mon système d\'authentication personnalisé, qui protège les communications entre les SATS et le SMMP. Il évite notamment le vol de clé, le détournement de requêtes, et permet une resynchronisation sécurisée après une attaque ou un vol. Source: <a href="https://git.xdrm.io/logauth/schastsp/src/branch/master/PROTOCOL.md">Définition du protocole</a>',
+			[Locales.FR]: 'J\'ai réalisé le projet <b>LogAuth</b> en 2017 pour la branche française d\'une entreprise internationale de transport et logistique. Le projet vise à fournir une solution de suivi et gestion des accès utilisateurs aux machines d\'un entrepôt.<br><br>Le projet consiste en:<ul><li><b>SMMP</b> : site web accessible sur Internet pour la gestion par entrepôt.</li><li><b>SATS</b> : hardware et logiciel pour un Raspberry Pi qui est embarqué sur chaque machine. Il fournit une authentification RFID aux utilisateurs avec historique.</li><li><b>setup</b> : outil permettant d\'écrire un carte microSD fonctionnelle pour chaque nouveau Raspberry à ajouter au système (authentification sur-mesure, id, fonctionnalités, plugins).</li></ul><br>Le système SATS consiste en un shield (carte éléctronique) qui se branche au Raspberry Pi ainsi qu\'un firmware. Le firmware est composé de plusieurs programmes lancés à travers une machine à état complexe basée sur <b>systemd</b>. Elle ordonnance les différentes phases : boot, connexion réseau, vérification de mise à jour, mise à jour, initialisation entrées/sorties, le démon (boucle principale).<br><br>Il autorise ou non les accès quand une carte RFID est détectée, la liste des accès est mise à jour périodiquement depuis l\'api SMMP. Il est capable de se mettre à jour et de charger de nouvelles fonctionnalités depuis le réseau. Il enregistre tous les accès (ou tentatives), gère et monitore l\'état de la machine en temps réel.<br><br>J\'ai réalisé plusieurs PCBs afin que le SATS s\'interface correctement avec l\'Arduino, puis dans les dernières versions avec un Raspberry Pi.<br><br>A travers ce projet, j\'ai pu concevoir mon système d\'authentication personnalisé, qui protège les communications entre les SATS et le SMMP. Il évite notamment le vol de clé, le détournement de requêtes, et permet une resynchronisation sécurisée après une attaque ou un vol. Source: <a href="https://git.xdrm.io/logauth/schastsp/src/branch/master/PROTOCOL.md">Définition du protocole</a>',
 		},
 		source: [
 			{ name: 'git.xdrm.io/logauth/sats', link: 'https://git.xdrm.io/logauth/sats', commits: 214 },
@@ -329,7 +329,7 @@ export const Projects: Project[] = [
 		stopped_at: new Date(2019, 6, 17),
 		info: {
 			[Locales.EN]: 'Arduino project to remotely control a solenoid valve. The project was ordered to simplify the control of an agricultural irrigation valve. There are 2 components:<ul><li>a very low power controller (battery operated) that sends a command. The controller issues a visual signal when the command is accepted.</li><li>the solenoid valve that waits for orders and is activated when valid and authenticated orders are received.</li></ul><br>The system uses multicast UDP to avoid the need to identify the different elements on the network. The final solution enables several independent solenoid valves and controllers on the same network.',
-			[Locales.FR]: 'Projet Arduino permettant de commander une électrovanne à distance. Le projet a été commandé pour simplifier le contrôle d\'une vanne d\'irrigation agricole. Il y a 2 composants:<ul><li>une commande très basse consommation (sur pile) qui envoie un ordre. La commande émet un signal visuel quand l\'ordre est accepté.</li><li>l\'électrovanne qui attends des ordres et s\'actionne à la réception d\'ordre valides et authentifiés.</li></ul><br>Le système utilise le multicast UDP afin de ne pas avoir besoin d\'identifier les différents éléments sur le réseau. La solution finale permet d\'avoir plusieurs électrovannes et commandes indépendantes sur le même réseau.',
+			[Locales.FR]: 'Projet Arduino permettant de commander une électrovanne à distance. Le projet a été commandé pour simplifier le contrôle d\'une vanne d\'irrigation agricole. Il y a 2 composants:<ul><li>une commande très basse consommation (sur pile) qui envoie des ordres. La commande émet un signal visuel quand l\'ordre est accepté.</li><li>l\'électrovanne attends des ordres, elle s\'actionne à la réception d\'un ordre valide et authentifié.</li></ul><br>Le système utilise le multicast UDP afin de ne pas avoir besoin d\'identifier les différents éléments sur le réseau. La solution finale permet d\'avoir plusieurs électrovannes et commandes indépendantes sur le même réseau.',
 		},
 		source: [
 			{ name: 'git.xdrm.io/iot/evw', link: 'https://git.xdrm.io/iot/evw', commits: 13 },
@@ -345,7 +345,7 @@ export const Projects: Project[] = [
 		stopped_at: new Date(2019, 10, 18),
 		info: {
 			[Locales.EN]: 'Personal project in Go providing layout and color support in the terminal. Implementation of the vt-100 standard used in most Linux terminals. Use of a markdown-inspired syntax to automate bold, italic, underline, links, etc. It allows to use background and font colors with hexadecimal code or color name. It also enables proper alignment, and supports Go channels to have multiple lines that update themselves.',
-			[Locales.FR]: 'Projet personnel en Go permettant de la mise en page et le support des couleurs pour le terminal. Mise en pratique du standard vt-100 utilisé dans la plupart des terminaux linux. Définition d\'une syntaxe inspirée du markdown pour automatiser la mise en forme : gras, italique, souligné, liens, etc. Support des couleurs de fond et de texte avec leur code hexa ou le nom de la couleur. Permet une vraie gestion de l\'alignement, et support des channels Go afin de modifier plusieurs lignes de texte sur place.',
+			[Locales.FR]: 'Projet personnel en Go permettant la mise en page et le support des couleurs pour le terminal. Mise en pratique du standard vt-100 utilisé dans la plupart des terminaux linux. Le projet définit une syntaxe inspirée du markdown pour automatiser la mise en forme : gras, italique, souligné, liens, etc. Support des couleurs de fond et de texte avec leur code hexa ou le nom de la couleur. Permet une vraie gestion de l\'alignement, et support des channels Go afin de modifier plusieurs lignes de texte sur place.',
 		},
 		source: [
 			{ name: 'git.xdrm.io/go/clifmt', link: 'https://git.xdrm.io/go/clifmt', commits: 27 },
@@ -441,7 +441,7 @@ export const Projects: Project[] = [
 		stopped_at: new Date(2016, 10, 16),
 		info: {
 			[Locales.EN]: 'Javascript project in the context of my license. The project consists in performing treatments on an image in order to optimize the recognition of facial features by Tracking.js and jsfeat.<br><br>We used back-buffers and implemented the following operations:<ul><li>brightness adjustments</li><li>contour recognition</li><li>face extrusion</li><li>face contour detection</li><li>background removal</li><li>recognition of facial features</li><li>use of subtractive filters (soft deep learning)</li></ul>',
-			[Locales.FR]: 'Projet javascript dans le cadre de la L3 informatique. Le projet consiste à effectuer des traitements sur une image afin d\'optimiser la reconnaissance des éléments faciaux par Tracking.js et jsfeat.<br><br>Utilisation de back-buffers et implémentation des traitements suivants:<ul><li>ajustement de luminosité</li><li>détection de contours</li><li>extrusion de visage</li><li>détection des contours du visage</li><li>retrait de l\'arrière plan</li><li>Reconnaissance des éléments de visage</li><li>utilisation de filtres soustractifs (soft deep learning)</li></ul>',
+			[Locales.FR]: 'Projet javascript dans le cadre de la L3 informatique. Le projet consiste à effectuer des traitements sur une image afin d\'optimiser la reconnaissance des éléments faciaux par Tracking.js et jsfeat.<br><br>Utilisation de back-buffers et implémentation des traitements suivants:<ul><li>ajustement de luminosité</li><li>détection de contours</li><li>extrusion de visage</li><li>détection des contours du visage</li><li>retrait de l\'arrière plan</li><li>reconnaissance des éléments de visage</li><li>utilisation de filtres soustractifs (soft deep learning)</li></ul>',
 		},
 		source: [
 			{ name: 'git.xdrm.io/l3/face-recognition.js', link: 'https://git.xdrm.io/l3/face-recognition.js', commits: 32 },
@@ -489,8 +489,8 @@ export const Projects: Project[] = [
 		started_at: new Date(2018, 10, 5),
 		stopped_at: new Date(2018, 11, 15),
 		info: {
-			[Locales.EN]: 'Android application developed in Kotlin during the Master. The application serves as an interface to an API providing the prices of various goods (amazon, leboncoin, etc). Its purpose is to present a search engine that allows to visualize the price distribution of goods by categories. It\'s my only project in Kotlin, I was mostly in charge of the visual part and the animations.<br><br>At the end of the project, the teacher contacted us to get our agreement to publish the application on the Play Store. He finally abandoned the project because his API was illegal...',
-			[Locales.FR]: 'Application Android développée en Kotlin pendant le Master. L\'application sert d\'interface à une API donnant les prix de certains biens (amazon, leboncoin, etc). Elle a pour but de présenter un moteur de recherche qui permet de visualiser les distributions de prix des biens par catégories. C\'est mon seul projet en Kotlin, je me suis surtout occupé de la partie visuelle et des animations.<br><br>A l\'issue du projet, l\'enseignant nous a contacté pour avoir notre accord afin de publier l\'application sur le Play Store. Il a finalement abandonné le projet car son API était illégale...',
+			[Locales.EN]: 'Android application developed in Kotlin during the Master. The application serves as an interface to an API providing the prices of various goods (amazon, leboncoin, etc). Its purpose is to present a search engine that allows to visualize the price distribution of goods by categories. It\'s my only project in Kotlin, I was mostly in charge of the visual part and the animations.<br><br>At the end of the project, the teacher contacted us to get our agreement to publish the application on the Play Store. He finally abandoned the project because his API was illegal.',
+			[Locales.FR]: 'Application Android développée en Kotlin pendant le Master. L\'application sert d\'interface à une API donnant les prix de certains biens (amazon, leboncoin, etc). Elle a pour but de présenter un moteur de recherche qui permet de visualiser les distributions de prix des biens par catégories. C\'est mon seul projet en Kotlin, je me suis surtout occupé de la partie visuelle et des animations.<br><br>A l\'issue du projet, l\'enseignant nous a contacté pour avoir notre accord afin de publier l\'application sur le Play Store. Il a finalement abandonné le projet car son API était illégale.',
 		},
 		source: [
 			{ name: 'git.xdrm.io/mti/lebonprix.apk', link: 'https://git.xdrm.io/mti/lebonprix.apk', commits: 3 },
@@ -505,8 +505,8 @@ export const Projects: Project[] = [
 		started_at: new Date(2018, 9, 17),
 		stopped_at: new Date(2018, 10, 30),
 		info: {
-			[Locales.EN]: 'Web service allowing to multiplex several goods selling APIs (supermarkets, amazon, ect.). The service allows you to search for a product and retrieve its details by combining several data sources.<br>The project is developed in typescript (node).',
-			[Locales.FR]: 'Service web permettant de multiplexer plusieurs API de vente de biens (supermarchés, amazon, ect.). Le service permet de faire une recherche sur un produit et de récupérer ses détails en combinant plusieurs sources de données.<br>Le projet est développé en typescript (node).',
+			[Locales.EN]: 'Node projet for my Master\'s degree. Web service allowing to multiplex several goods selling APIs (supermarkets, amazon, etc.). The service allows you to search for a product and retrieve its details by combining several data sources.<br>The project is developed in typescript (node).',
+			[Locales.FR]: 'Projet node dans le cadre du Master. Service web permettant de multiplexer plusieurs API de vente de biens (supermarchés, amazon, etc.). Le service permet de faire une recherche sur un produit et de récupérer ses détails en combinant plusieurs sources de données.<br>Le projet est développé en typescript (node).',
 		},
 		source: [
 			{ name: 'git.xdrm.io/mti/api-mixer', link: 'https://git.xdrm.io/mti/api-mixer', commits: 20 },

src/model/skills.ts

@@ -1,4 +1,5 @@
 import { Locales } from '@/locales';
+import { Level } from './level';
 
 export enum tID {
 	MariaDB,
@@ -139,6 +140,8 @@ export interface tSkill {
 	link: string;
 	tags: tTag[];
 	info: { [loc in Locales]: string };
+	interest: Level;
+	mastery: Level;
 }
 
 export type tSkills = { [id in tID]: tSkill };
@@ -148,6 +151,8 @@ export const Skills: tSkills = {
 		link: 'https://mariadb.org',
 		icon: 'skills/mariadb.svg',
 		tags: [tTag.Web, tTag.Storage],
+		interest: Level.L1,
+		mastery: Level.L4,
 		info: {
 			[Locales.EN]: 'MySQL (now MariaDB) is the most known database management system to introduce SQL. I started using mysql then MariaDB as my first introduction to SQL, mostly when I started learning web with PHP. I now prefer using postgreSQL instead as it tends to be more robust and performant overall.',
 			[Locales.FR]: 'MySQL (maintenant MariaDB) est le système de base de données le plus répendu pour une introduction au SQL. J\'ai commencé à utiliser MySQL puis MariaDB en introduction à SQL, principalement quand j\'ai commencé à apprendre le développement web avec PHP. J\'utilise maintenant plutôt PostgreSQL car je le trouve plus robuste et performant.',
@@ -157,8 +162,10 @@ export const Skills: tSkills = {
 		link: 'https://postgresql.org',
 		icon: 'skills/postgres.svg',
 		tags: [tTag.Web, tTag.Storage],
+		interest: Level.L2,
+		mastery: Level.L3,
 		info: {
-			[Locales.EN]: 'A DBMS like MariaDB but with performance and consistency in mind. My main choice of dbms when using sql orfor relational databases. Had some experience with it mainly with go services with docker.',
+			[Locales.EN]: 'A DBMS like MariaDB with more performance and consistency. My main choice of dbms when using sql orfor relational databases. Had some experience with it mainly with go services with docker.',
 			[Locales.FR]: 'Un DBMS comme MariaDB mais avec la performance et robustesse en plus. Mon choix de prédilection quand il s\'agit de DBMS sql ou de base relationnelle. Je l\'ai pas mal utilisé principalement pour des services go avec docker et docker-compose.',
 		},
 	},
@@ -166,9 +173,11 @@ export const Skills: tSkills = {
 		link: 'https://mongodb.com',
 		icon: 'skills/mongo.svg',
 		tags: [tTag.Web, tTag.Storage],
+		interest: Level.L2,
+		mastery: Level.L1,
 		info: {
 			[Locales.EN]: 'I learned it during my Master\'s degree. I used advanced Mongo with schema validation and complex filter requests. I find this technology really interesting over SQL, but I find classical relational databases are easier to comprehend and I am more used to it.',
-			[Locales.FR]: 'J\'ai appris et utilisé Mongo pendant mon Master, je n\'ai pas eu de réelle occasion de l\'utiliser depuis. J\'ai pu utiliser la version "robuste" de Mongo : validation de schéma and requêtes avec filtres complexes.<br><br>Je trouve cette technologie une intéressante alternative au SQL "classique", mais les bases relationnelles sont à mon avis plus facile à apréhender, puis j\'y suis habitué.',
+			[Locales.FR]: 'J\'ai appris et utilisé Mongo pendant mon Master, je n\'ai pas eu de réelle occasion de l\'utiliser depuis. J\'ai pu utiliser la version "robuste" de Mongo : validation de schéma and requêtes avec filtres complexes.<br><br>Je trouve que cette technologie est une intéressante alternative au SQL "classique", mais les bases relationnelles sont à mon avis plus facile à apréhender, puis j\'y suis habitué.',
 		},
 	},
 
@@ -176,6 +185,8 @@ export const Skills: tSkills = {
 		link: 'https://vuejs.org',
 		icon: 'skills/vue.svg',
 		tags: [tTag.Web, tTag.UI],
+		interest: Level.L4,
+		mastery: Level.L3,
 		info: {
 			[Locales.EN]: 'Web front-end framework that displays components directly from your data, with an extremely low cost. I started learning Vue (.js) back in 2016, and never stopped practicing since then for personal and professional projects. I view it as a better alternative than angular which provides you with a strict framework that can lack flexibility among teams and projects.<br><br>Vue makes it your responsability to properly structure your project which I like to take care of myself, as it tends to provide a better workflow adjusted for every project.',
 			[Locales.FR]: 'Framework pour front-end web qui affiche des composants graphiques directement depuis les données à un coup relativement bas. J\'ai découvert Vue en 2016, et n\'ai jamais arrêté de l\'utiliser depuis tant pour mes projets perso que professionnels. Je vois Vue comme une meilleure alternative qu\'Angular qui, lui, fournit un cadre de travail strict qui manque de flexibilité aux équipes et projets.<br><br>Vue vous rend la responsabilité de structurer correctement vos projets, ce que j\'apprécie faire moi-même, je trouve que ça pousse à un meilleur workflow (ajusté à chaque projet).',
@@ -185,6 +196,8 @@ export const Skills: tSkills = {
 		link: 'https://angular.io',
 		icon: 'skills/angular.svg',
 		tags: [tTag.Web, tTag.UI],
+		interest: Level.L0,
+		mastery: Level.L1,
 		info: {
 			[Locales.EN]: 'I used it only once to break it apart in a R&D project. I had to "hack" it in order to inject services and components on-the-fly.<br><br>You had a kind of App store where you could install modules. The Angular-powered website would inject new navigation menus, pages and services according to the modules you had installed.<br><br>I do not like Angular, as I think Vue.js does a better job achieving the same goal with a cleaner API, and does not force you to embrace the Angular/Google way of coding and organizing things.',
 			[Locales.FR]: 'Je l\'ai découvert de la manière forte pour un projet de R&D projet. J\'ai du le "hacker" afin de pouvoir y injecter des services et composants au runtime.<br><br>J\'ai du faire un genre d\'App store où il était possible d\'installer des modules. Le site web Angular se voyait ensuite injecté les éléments de navigation, les pages et services en fonction des modules installés.<br><br>Je n\'apprécie pas Angular, je pense que Vue fait un meilleur travail pour achever le même but avec une interface plus propre. Je trouve qu\'Angular force les devs à se plier à la manière Angular/Google de programmer et d\'organiser les choses.',
@@ -194,6 +207,8 @@ export const Skills: tSkills = {
 		link: 'https://parceljs.org/',
 		icon: 'skills/parcel.svg',
 		tags: [tTag.Web],
+		interest: Level.L2,
+		mastery: Level.L2,
 		info: {
 			[Locales.EN]: 'Package bundler for the web, that aims to require no configuration. I used it often back in my Master\'s Degree period along with PHP backends. It allows to get away from webpack which I find overly complicated and a major point of failure for most frontends.<br><br>I haven\'t used it in a while but would highly consider it as it has no real prerequisite.',
 			[Locales.FR]: 'Bundler (c.f. webpack) pour le web, qui vise à ne demander aucune configuration. Beaucoup utilisé pendant le Master, souvent pour des projets web avec un backend PHP. Permet de s\'affranchir de webpack, ce que je trouve plutôt bénéfique car trop complexe et souvent un point-of-failure majeur.<br><br>Je ne l\'ai pas utilisé depuis un moment mais je le garde en tête comme alternative sans prérequis pour les projets web.',
@@ -203,6 +218,8 @@ export const Skills: tSkills = {
 		link: 'https://cordova.apache.org/',
 		icon: 'skills/cordova.svg',
 		tags: [tTag.System, tTag.Web, tTag.Mobile],
+		interest: Level.L1,
+		mastery: Level.L1,
 		info: {
 			[Locales.EN]: 'Library that transforms a single page application into a mobile or desktop application with no further programming. I\'ve used it often to transform SPA into android, iOS or desktop apps at low cost. I haven\'t needed this kind of software for a while, it might now be favorable to use Capacitor or other "alternatives".',
 			[Locales.FR]: 'Programme permettant de transformer des sites web SPA (Single Page Application) en applications mobiles ou bureau sans avoir à toucher le code. Je l\'ai beaucoup utilisé pour transformer mes applis SPA en applications Android, iOS ou de bureau a moindre coût. Je n\'en ai pas eu besoin depuis un moment, il serait sûrement judicieux de m\'intéresser aux nouvelles alternatives plus à jour telles que Capacitor.',
@@ -212,6 +229,8 @@ export const Skills: tSkills = {
 		link: 'https://webpack.js.org/',
 		icon: 'skills/webpack.svg',
 		tags: [tTag.Web],
+		interest: Level.L0,
+		mastery: Level.L2,
 		info: {
 			[Locales.EN]: 'The most known/used package bundler for the web ... I used it a lot because it is often required. But I hate that it is so complex that most users use it without understanding what is really does. I avoid it whenever possible, the issue can be transposed to node_modules and the whole node ecosystem.',
 			[Locales.FR]: 'Le bundler pour du web le plus connu/utilisé ... J\'ai été forcé de beaucoup l\'utiliser mais jamais par choix ! C\'est un outil très puissant, mais je n\'aime pas que ce soit aussi complexe et que la plupart des utilisateurs (moi inclus) l\'utilisent sans vraiment comprendre ce que ça fait réellement. Je l\'évite dès que possible, cette problématique peut être transposée à node_modules et l\'écosystème node en général.',
@@ -222,6 +241,8 @@ export const Skills: tSkills = {
 		link: 'https://www.khronos.org/webgl/',
 		icon: null,
 		tags: [tTag.Web],
+		interest: Level.L2,
+		mastery: Level.L1,
 		info: {
 			[Locales.EN]: 'OpenGL API for the web ! I used it during my graduation years, the potential is great but I need to find a time to explore what\'s new.',
 			[Locales.FR]: 'API OpenGL pour le web ! Utilisé à plusieurs reprises pendant mes études, il y a un gros potentiel mais il me faudrait trouver le temps d\'explorer les nouveautés et utilisation.',
@@ -231,6 +252,8 @@ export const Skills: tSkills = {
 		link: 'https://webaudio.github.io/web-audio-api/',
 		icon: null,
 		tags: [tTag.Web],
+		interest: Level.L2,
+		mastery: Level.L3,
 		info: {
 			[Locales.EN]: 'Audio API for the web ! I used it mainly to build a discord clone (audio and video full-duplex streaming) as a school project. I also tried the Fourier transform to build nice graphics (c.f. Soundcloud) but have not succeeded at the time.',
 			[Locales.FR]: 'API Audio pour le web ! Je l\'ai principalement utilisée pour un projet clone de Discord (audio et video en streaming full-duplex) pendant mes études. J\'ai aussi beaucoup joué avec pour essayer d\'implémenter la transformée de Fourier afin de produire un visuel de lecture audio (c.f. Soundcloud) mais je n\'ai pas réussi à l\'époque.',
@@ -240,6 +263,8 @@ export const Skills: tSkills = {
 		link: 'https://tools.ietf.org/html/rfc6455',
 		icon: null,
 		tags: [tTag.Web, tTag.Network, tTag.IoT],
+		interest: Level.L3,
+		mastery: Level.L5,
 		info: {
 			[Locales.EN]: 'Communication protocol for the web that is full-duplex (both sides can send and receive simultaneously). I use them whenever possible to avoid the classical expensive polling.<br><br>I also created my own websocket client & server implementation in Go following nothing but the RFC for learning purposes.<br><br>I\'ve used, designed and implemented websocket communications among personal and professional projects.',
 			[Locales.FR]: 'Protocole de communication pour le web full-duplex (les 2 côtés peuvent envoyer et recevoir en même temps). Je les utilise dès que possible plutôt que faire du polling coûteux pour rien.<br><br>J\'ai aussi créé ma propre implémentation de client et serveur en Go en suivant juste la RFC afin d\'avoir une meilleure appréhension du fonctionnement et des limites.<br><br>J\'ai eu plusieurs l\'occasion de concevoir et implémenter des systèmes de communications basés sur les websocket que ce soit pour des projets perso ou pro.',
@@ -250,6 +275,8 @@ export const Skills: tSkills = {
 		link: 'https://docker.com',
 		icon: 'skills/docker.svg',
 		tags: [tTag.Web, tTag.System],
+		interest: Level.L3,
+		mastery: Level.L4,
 		info: {
 			[Locales.EN]: 'Container system and ecosystem. I am using it for a while now. Most of my go projects use it as it costs no memory for your executable (multi-stage build from scratch) and allows for isolation and a better control over the running environment.<br><br>I am learning docker a bit more every time I use it. It is often coupled with docker-compose in my projects.',
 			[Locales.FR]: 'Système et écosystème de containerisation. J\'utilise docker assez régulièrement depuis des années. La plupart de mes projets en go en tirent parti car cela permet de construire des containers "multi-plateforme" sans que ça pèse plus lourd que l\'exécutable (multi-stage build from scratch). Docker aussi permet à mes devs en go de l\'isolation et un meilleur contrôle de l\'environnement.<br><br>J\'étends mes connaissances à chaque nouveau projet, je l\'utilise aussi beaucoup via docker-compose.',
@@ -259,6 +286,8 @@ export const Skills: tSkills = {
 		link: 'https://www.gnu.org/software/bash/',
 		icon: null,
 		tags: [tTag.System],
+		interest: Level.L3,
+		mastery: Level.L5,
 		info: {
 			[Locales.EN]: 'GNU sh-compatible shell, featured in GNU/Linux distros. Felt in love with GNU/linux and its ecosystem a while back (was 14yo back then) and I\'ve never stopped. I\'m often the linux/bash guy of the team.<br><br>I use it extensively to automate anything a human can do as it avoids a lot of mistakes in most workflows.',
 			[Locales.FR]: 'Shell compatible <i>sh</i> fourni dans les OS GNU/Linux. Je suis tombé amoureux de GNU/Linux et son écosystème depuis un moment (à 14 ans) et je n\'ai pas déchanté depuis. Je suis souvent le "linux/bash guy" de l\'équipe.<br><br>J\'utilise le bash de manière déraisonnable pour automatiser tout ce que les humains peuvent faire, mais sans les erreurs, dans la plupart de mes workflows.',
@@ -268,6 +297,8 @@ export const Skills: tSkills = {
 		link: 'https://www.linux.org',
 		icon: 'skills/linux.svg',
 		tags: [tTag.System],
+		interest: Level.L3,
+		mastery: Level.L5,
 		info: {
 			[Locales.EN]: 'Felt in love with GNU/linux and its ecosystem a while back (was 14yo back then) and I\'ve never stopped. <br><br>Linux has been my main OS choice since then. I stepped through Ubuntu, Debian, Manjaro, Elementary, Tails (live), and I am now on Solus for a few years.',
 			[Locales.FR]: 'Je suis tombé amoureux de GNU/Linux et son écosystème depuis un moment (à 14 ans) et je n\'ai pas déchanté depuis. <br><br>Linux est mon OS depuis. Je suis passé par Ubuntu, Debian, Manjaro, Elementary, Tails (live), je suis maintenant sur Solus depuis quelques années.',
@@ -277,6 +308,8 @@ export const Skills: tSkills = {
 		link: 'https://freedesktop.org/wiki/Software/systemd/',
 		icon: null,
 		tags: [tTag.System],
+		interest: Level.L4,
+		mastery: Level.L3,
 		info: {
 			[Locales.EN]: 'Linux most advanced system and service manager, it coordinates all programs run in a Linux system. I had the chance to dive deep into systemd for the LogAuth project. I had to define a complex structure for some Raspberry Pi to be independent, featuring services, paths, sockets, dependencies, requirements, etc.<br><br>Often used but rarely understood, I like its flexibility and have used it in many projects upon the production deployment.',
 			[Locales.FR]: 'Le gestionnaire de système et services le plus avancé pour Linux, il coordonne tous les programmes d\'un système Linux. J\'ai eu l\'occasion de plonger dans les tréfonds de systemd pour le projet LogAuth. J\'ai du concevoir et implémenter une structure complexe pour des Raspberry Pi "embarqués" en utilisant les services, paths, sockets, dépendences, ordres d\'éxécution, etc.<br><br>Souvent utilisé mais rarement compris, j\'apprécie sa puissance et sa flexibilité, je l\'ai souvent utilisé dans mes projets web pour le déploiement sur l\'environnement de production.',
@@ -285,16 +318,20 @@ export const Skills: tSkills = {
 	[tID.Git]: {
 		link: 'https://git-scm.com/',
 		icon: 'skills/git.svg',
+		interest: Level.L3,
+		mastery: Level.L5,
 		tags: [tTag.System, tTag.Organization],
 		info: {
-			[Locales.EN]: 'The standard distributed version control system for code management. What to say .. I use it all the time, even when writing this exact description.',
-			[Locales.FR]: 'Le système distribué de gestion de version par excellence. Que dire .. Je l\'utilise tout le temps, même pour écrire cette description.',
+			[Locales.EN]: 'The standard distributed version control system for code management. Used for all projects.',
+			[Locales.FR]: 'Le système distribué de gestion de version par excellence. Utilisé pour chaque projet.',
 		},
 	},
 	[tID.Rpm]: {
 		link: 'https://rpm.org/',
 		icon: null,
 		tags: [tTag.System],
+		interest: Level.L1,
+		mastery: Level.L3,
 		info: {
 			[Locales.EN]: 'The CentOS package manager. I used it once; I had to create a tool that generates RPM packages to provide installable modules for an embedded web project : the package contains web components (code, assets, navigation, pages) and backend services.',
 			[Locales.FR]: 'Le gestionnaire de paquets de CentOS. J\'ai pu m\'y intéresser lors d\'un stage, j\'ai du créer un outil qui génère des paquets RPM afin de fournir des modules installables pour un projet web embarqué : les paquets contienent des composants web (du code, images, la navigation, des pages) et des services backend.',
@@ -305,6 +342,8 @@ export const Skills: tSkills = {
 		link: 'https://raspberrypi.org',
 		icon: 'skills/raspberry.svg',
 		tags: [tTag.System, tTag.IoT],
+		interest: Level.L5,
+		mastery: Level.L4,
 		info: {
 			[Locales.EN]: 'Raspberry Pi is a set of low cost credit-card sized hardware that allows to run small linux. It features GPIO and bus interfacing with the outer world, widely used in IoT.<br><br>I\'ve been playing with Raspberries for a while, my first experience was for the <b>LogAuth</b> project. I built an embedded system that controls and monitors forklift trucks to manage access with RFID cards. Other than that I always have one somewhere close to built useless automation projects.',
 			[Locales.FR]: 'Raspberry Pi désigne un ensemble de cartes électroniques bon marché de la taille d\'une carte bancaire. Elles peuvent faire tourner des petits OS basés sur linux. Raspberry Pi fournit des interfaces d\'entrée/sortie et des bus de données qui permettent de s\'interfacer avec le "monde réel".<br><br>Je joue avec des Raspberry depuis un moment, ma première expérience fut pour le projet <b>LogAuth</b>. J\'ai construit un système embarqué qui contrôle et traque des transpalettes, et gère les accès par carte RFID. J\'ai toujours un Raspberry à proximité pour jouer avec et faire des automatisations inutiles.',
@@ -314,6 +353,8 @@ export const Skills: tSkills = {
 		link: 'https://arduino.cc',
 		icon: 'skills/arduino.svg',
 		tags: [tTag.System, tTag.IoT],
+		interest: Level.L5,
+		mastery: Level.L4,
 		info: {
 			[Locales.EN]: 'Arduino is a set of low cost small hardware. It features GPIO and buses and is a minimal affordable choice to create small IoT devices.<br><br>I\'ve been playing with Arduinos for a while, my first experience was for the early stages (v1) of the <b>LogAuth</b> project. I built an embedded system that manages RFID card access and stores an access history. I always have an Arduino nearby to built small projects with WiFi or for outside automation.',
 			[Locales.FR]: 'Arduino désigne un ensemble de petites cartes électroniques bon marché. Les Arduinos fournissent des entrées/sorties et des bus, c\'est un choix abordable pour les objets connectés simples.<br><br>Je joue avec des Arduinos depuis un moment, ma première expérience fut dans les premières version du projet <b>LogAuth</b>. J\'ai construit un système embarqué qui gère des accès RFID (carte à puce) et enregistre l\'historique des accès. J\'en ai toujours un pas loin pour faire de petits projets connectés en WiFi ou en extérieur.',
@@ -324,42 +365,52 @@ export const Skills: tSkills = {
 		link: 'https://www.php.net',
 		icon: 'skills/php.svg',
 		tags: [tTag.Language, tTag.Web, tTag.IoT],
+		interest: Level.L1,
+		mastery: Level.L4,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Programming language mostly used for web servers. I started backend programming with it, I am now using Go as it is more maintainable and performant.',
+			[Locales.FR]: 'Langage de programmation souvent utilisé pour les serveur web. J\'ai commencé le backend avec le PHP et me suis redirigé vers le Go par souci de maintainabilité et de performances.',
 		},
 	},
 	[tID.Html]: {
 		link: 'https://www.w3.org/standards/webdesign/htmlcss',
 		icon: 'skills/html.svg',
 		tags: [tTag.Language, tTag.Web, tTag.UI],
+		interest: Level.L2,
+		mastery: Level.L4,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Markup language to define web page structure.',
+			[Locales.FR]: 'Langage de markup permettant de définir la structure des pages web.',
 		},
 	},
 	[tID.Css]: {
 		link: 'https://www.w3.org/standards/webdesign/htmlcss',
 		icon: 'skills/css.svg',
 		tags: [tTag.Language, tTag.Web, tTag.UI],
+		interest: Level.L3,
+		mastery: Level.L5,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Stylesheet language to define visuals and animation for the web.',
+			[Locales.FR]: 'Langage de feuilles de style permettant de définir les visuels et animations de sites web.',
 		},
 	},
 	[tID.Js]: {
 		link: 'http://www.ecma-international.org/publications-and-standards/standards/ecma-262/',
 		icon: 'skills/js.svg',
 		tags: [tTag.Language, tTag.Web, tTag.UI],
+		interest: Level.L2,
+		mastery: Level.L4,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Programming language by default for web browsers. I used it a lot and replaced it with typescript which brings robustness to the base language.',
+			[Locales.FR]: 'Langage de programmation par défaut pour les navigateurs. Je l\'ai beaucoup utilisé et utilise maintenant le typescript qui apporte de la robustesse au langage de base.',
 		},
 	},
 	[tID.Ajax]: {
 		link: 'https://www.w3schools.com/xml/ajax_intro.asp',
 		icon: null,
 		tags: [tTag.Web, tTag.Network],
+		interest: Level.L2,
+		mastery: Level.L5,
 		info: {
 			[Locales.EN]: 'Web API that allows to download resources from a web page without reloading. It is now used almost everywhere, but at my "old days" it was more rare and we used to have reload between each page and static resources. Back then I created my well named "page-manager.js" library, it allows to load javascript, html, css, php, or even image files asynchronously and integrate them into your web page automatically. Now I still use it in web projects, but mainly through libraries.',
 			[Locales.FR]: 'API web qui permet le téléchargement HTTP depuis une page sans avoir à la recharger. C\'est maintenant monnaie courante, mais dans mes "premiers temps" dans le web c\'était plus rare, il était plus courant de changer souvent de page et d\'avoir des ressources fixes. A cette époque j\'ai créé ma librairie magnifiquement nommée "page-manager.js". Elle permettait de charger des fichiers javascript, html, css, php ou même des images de manière asynchrone et les intégrait automatiquement dans la page web. Maintenant j\'utilise toujours Ajax, mais souvent à travers des librairies qui font le travail à ma place.',
@@ -369,6 +420,8 @@ export const Skills: tSkills = {
 		link: 'https://www.typescriptlang.org/',
 		icon: 'skills/ts.svg',
 		tags: [tTag.Language, tTag.Web, tTag.UI],
+		interest: Level.L3,
+		mastery: Level.L4,
 		info: {
 			[Locales.EN]: 'Strongly typed language that (pre)compiles into javascript (javascript with types). It allows for your javascript codebase to be more consistent and maintainable. As these are 2 qualities that I strongly work to ensure, I use it for every javascript project and I\'ve never wrote "raw" javascript since then.',
 			[Locales.FR]: 'Langage à typage fort qui se (pré)compile en javascript (javascript avec des types). Il permet d\'avoir un code plus robuste et maintenable. Ces 2 points sont parmi ceux que je trouve les plus importants dans mon travail, c\'est pourquoi je n\'ai plus écris de javascript "brut" (sans typescript) depuis que typescript existe.',
@@ -378,46 +431,56 @@ export const Skills: tSkills = {
 		link: 'https://www.open-std.org/jtc1/sc22/wg14/',
 		icon: 'skills/c.svg',
 		tags: [tTag.Language, tTag.System],
+		interest: Level.L1,
+		mastery: Level.L4,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'The ultimate system\'s language. Used it a lot during my studies, I replaced it with Go.',
+			[Locales.FR]: 'Le langage système par excellence. Beaucoup utilisé pendant mes études, je l\'ai remplacé par le Go.',
 		},
 	},
 	[tID.Cpp]: {
 		link: 'https://isocpp.org/',
 		icon: 'skills/cpp.svg',
 		tags: [tTag.Language, tTag.System],
+		interest: Level.L1,
+		mastery: Level.L5,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'System programming language allowsing to avoid the quite raw C. Used for years, to write Qt applications.',
+			[Locales.FR]: 'Language de programmation système permettant d\'éviter le C parfois brut. Utilisé pendant plusieurs années, notamment avec Qt. ',
 		},
 	},
 	[tID.Python]: {
 		link: 'https://python.org/',
 		icon: 'skills/python.svg',
 		tags: [tTag.Language, tTag.System],
+		interest: Level.L1,
+		mastery: Level.L2,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Python is a high level programming language often used as an introduction to programming because it is quite easy to learn. I didn\'t use python much except during my studies. I prefer Go because with a little experience it is as easy to write but it is lighter and more powerful.',
+			[Locales.FR]: 'Python est une langage de programmation haut niveau souvent utilisé comme introduction à la programmation car assez facile d\'accès. J\'ai peu utilisé le python à part pendant mes études. Je préfère le Go car avec un peu d\'expérience on a le même niveau de facilité à l\'écrire mais il est plus léger et performant.',
 		},
 	},
 	[tID.Go]: {
 		link: 'https://go.dev',
 		icon: 'skills/go.svg',
 		tags: [tTag.Language, tTag.System, tTag.IoT, tTag.Network],
+		interest: Level.L5,
+		mastery: Level.L5,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Modern programming language. Offers an alternative to more traditional system languages such as C or C++. Allows rapid development, test automation, and provides good performance. Much used for web backend or microservices architectures.',
+			[Locales.FR]: 'Langage de programmation moderne. Offre une alternative aux langages systèmes plus classiques comme le C ou C++. Permet des développements rapides, l\'automatisation des tests, et ce, en fournissant de bonnes performances. Beaucoup utilisé pour des backend web ou des architectures micro services.',
 		},
 	},
 
 	[tID.Qt]: {
 		link: 'https://qt.io',
 		icon: 'skills/qt.svg',
+		interest: Level.L1,
+		mastery: Level.L4,
 		tags: [tTag.Language, tTag.System, tTag.IoT, tTag.Network],
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Multi-platform graphics framework. Allows to create applications compatible with Windows, Linux, iOS, macOS, Surface, etc.',
+			[Locales.FR]: 'Framework graphique multi-plateforme. Permet de créer des applications compatibles windows, Linux, iOS, macOS, Surface, etc.',
 		},
 	},
 
@@ -425,153 +488,187 @@ export const Skills: tSkills = {
 		link: 'https://opensource.org/',
 		icon: null,
 		tags: [tTag.Human],
+		interest: Level.L4,
+		mastery: Level.L3,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'The acronym Open Source refers to software whose code is made public and open to modification in an open and participatory manner. I develop most of my personal projects in Open Source if it can help other developers. I\'m convinced that Open Source allows to have better tools and libraries to make the computer science evolve globally.',
+			[Locales.FR]: 'Le sigle Open source désigne les logiciels dont le code est rendu public et ouvert à la modification de manière ouverte et participative. Je développe la plupart de mes projets personnels en Open Source si jamais ça peut aider d\'autres développeurs. Je suis convaincu que l\'Open Source permet d\'avoir de meilleurs outils et librairies pour globalement faire avancer l\'informatique.',
 		},
 	},
 	[tID.Electronics]: {
 		link: 'https://en.wikipedia.org/wiki/Electronics',
 		icon: 'skills/electronics.svg',
 		tags: [tTag.Other, tTag.IoT],
+		interest: Level.L3,
+		mastery: Level.L1,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Knowledge and practices needed to understand and create electronic circuits. Often required for Arduino or Raspberry Pi projects.',
+			[Locales.FR]: 'Ensemble des connaissances et pratiques permettant la compréhension et création de circuits électroniques. Souvent requis pour les projets Arduino ou Raspberry Pi.',
 		},
 	},
 	[tID.Web]: {
 		link: 'https://en.wikipedia.org/wiki/World_Wide_Web',
 		icon: null,
 		tags: [tTag.Web],
+		interest: Level.L4,
+		mastery: Level.L5,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Set of technologies around the Internet and websites: frontend and backend. From design to production.',
+			[Locales.FR]: 'Ensemble de technologies autour d\'Internet et des sites web: frontend et backend. De la conception jusqu\'à la mise en production.',
 		},
 	},
 	[tID.Rest]: {
 		link: 'https://en.wikipedia.org/wiki/Representational_state_transfer',
 		icon: null,
 		tags: [tTag.Web, tTag.Network],
+		interest: Level.L4,
+		mastery: Level.L5,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'The REST (REpresentational State Transfer) protocol is an architectural style and a communication mode frequently used in the development of Web services. It is known to be lightweight and easily understandable. I often use it for web projects.',
+			[Locales.FR]: 'Le protocole REST (REpresentational State Transfer) constitue un style architectural et un mode de communication fréquemment utilisé dans le développement de services Web. Il est notamment connu pour être léger et facilement compréhensible. Je l\'utilise souvent pour les projets web.',
 		},
 	},
 	[tID.Crypto]: {
 		link: 'https://en.wikipedia.org/wiki/Cryptography',
 		icon: 'skills/security.svg',
 		tags: [tTag.System, tTag.Network],
+		interest: Level.L3,
+		mastery: Level.L4,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Cryptography designates a set of technologies allowing to secure (to make unreadable by an undesired third party) data, particularly targets network communications. The notion of certificate is also an important component that provides a means to ensure the confidentiality, authenticity and integrity of encrypted data.',
+			[Locales.FR]: 'La cryptographie désigne un ensemble de technologies permettant de sécuriser (rendre illisible par un tiers non souhaité) des données, concerne notamment les communications faites sur le réseau. La notion de certificat est aussi une composante importante qui fournit un moyen d\'assurer la confidentialité, l\'authenticité et l\'intégrité des données cryptées.',
 		},
 	},
 	[tID.ImageProcessing]: {
 		link: 'https://en.wikipedia.org/wiki/Digital_image_processing',
 		icon: 'skills/image-processing.svg',
 		tags: [tTag.System],
+		interest: Level.L4,
+		mastery: Level.L3,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Set of technologies allowing the modification and the extraction of data from images. Whether it is a black & white filter or facial recognition.',
+			[Locales.FR]: 'Ensemble de technologies permettant la modification et l\'extraction de données des images. Que ce soit un filtre noir & blanc ou de la reconnaissance faciale.',
 		},
 	},
 	[tID.AI]: {
 		link: 'https://en.wikipedia.org/wiki/Artificial_intelligence',
 		icon: null,
 		tags: [tTag.Other],
+		interest: Level.L3,
+		mastery: Level.L1,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Set of technologies for solving problems that are too complex for conventional programs. Includes soft intelligence technologies or deep learning (neural networks).',
+			[Locales.FR]: 'Ensemble de technologies permettant de résoudre des problèmes trop complexes pour les programmes classiques. Comprends les technologies à intelligence faibles ou le deep learning (réseaux de neurones).',
 		},
 	},
 	[tID.DeepLearning]: {
 		link: 'https://en.wikipedia.org/wiki/Deep_learning',
 		icon: null,
 		tags: [tTag.Other],
+		interest: Level.L3,
+		mastery: Level.L1,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Strong artificial intelligence technologies, often via the use of neural networks.',
+			[Locales.FR]: 'Technologies d\'intelligence artificiell forte, souvent via l\'utilisation de réseaux de neurones et leurs dérivés.',
 		},
 	},
 	[tID.NeuralNetwork]: {
 		link: 'https://en.wikipedia.org/wiki/Artificial_neural_network',
 		icon: null,
 		tags: [tTag.Other],
+		interest: Level.L4,
+		mastery: Level.L1,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Neural networks are a strong artificial intelligence technique. It consists in solving problems by learning, modelled on the functioning of neurons.',
+			[Locales.FR]: 'Les réseaux de neurones sont une technique d\'intelligence artificielle forte. Cela consiste à résoudre des problèmes par apprentissage, calqué sur le fonctionnement des neurones.',
 		},
 	},
 	[tID.Opti]: {
 		link: 'https://en.wikipedia.org/wiki/Program_optimization',
 		icon: 'skills/opti.svg',
 		tags: [tTag.System, tTag.Network],
+		interest: Level.L3,
+		mastery: Level.L4,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Work of modifying a program to limit its CPU usage and memory footprint. Often aims to make the execution faster.',
+			[Locales.FR]: 'Travail de modification d\'un programme pour limiter son utilisation du processeur et son empreinte mémoire. A souvent pour but de rendre l\'exécution plus rapide.',
 		},
 	},
 	[tID.Sockets]: {
 		link: 'https://en.wikipedia.org/wiki/Computer_network_programming',
 		icon: null,
 		tags: [tTag.System, tTag.Network, tTag.IoT, tTag.Web],
+		interest: Level.L2,
+		mastery: Level.L4,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Representation of network connections at the system level.',
+			[Locales.FR]: 'Représentation des connexions réseau au niveau système.',
 		},
 	},
 	[tID.Concurrency]: {
 		link: 'https://en.wikipedia.org/wiki/Concurrent_computing',
 		icon: null,
 		tags: [tTag.System, tTag.Network],
+		interest: Level.L2,
+		mastery: Level.L3,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Consists in creating programs despite processes running simultaneously or that are partially synchronized.',
+			[Locales.FR]: 'Consiste à créer des programmes déterministe malgré l\'exécution de processus en simultané ou partiellement synchronisés.',
 		},
 	},
 	[tID.UIUX]: {
 		link: 'https://en.wikipedia.org/wiki/UX',
 		icon: null,
 		tags: [tTag.System, tTag.Web, tTag.IoT],
+		interest: Level.L2,
+		mastery: Level.L3,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Design of graphics, visual identity, solution adapted to the users in order to propose intuitive interfaces.',
+			[Locales.FR]: 'Conception de graphismes, d\'identité visuelle, de solution adaptée aux utilisateurs afin de proposer des interfaces intuitives.',
 		},
 	},
 	[tID.Inkscape]: {
 		link: 'https://inkscape.org/',
 		icon: 'skills/inkscape.svg',
 		tags: [tTag.UI, tTag.Web, tTag.Organization],
+		interest: Level.L3,
+		mastery: Level.L5,
 		info: {
-			[Locales.EN]: 'Free open-source software to create and edit vector files, a must-have for templating and creating good visual assets. I\'ve used it for a several years, I can finally say that I master Inkscape ! The numerous shortcuts and hidden features are no more a secret to me ;) I use it nearly every day be it for templating, or creating visual assets (logos, icons, images, backgrounds, animations, etc).',
-			[Locales.FR]: 'Logiciel open-source de création et d\'édition de fichiers vectoriels, un indispensable pour la création de maquettes et d\'assets graphiques. Je l\'utilise maintenant depuis plusieurs années, je peux enfin dire que je maîtrise Inkscape ! Les nombreux raccourcis et fonctionnalités cachées ne sont plus un secret pour moi ;) Je l\'utilise quasiment tout les jours que ce soit pour les maquettages, ou encore la création des ressources graphiques (images, logos, animations, fonds, etc).',
+			[Locales.EN]: 'Free open-source software to create and edit vector files, a must-have for templating and creating good visual assets. I\'ve used it for a several years. The numerous shortcuts and hidden features are no more a secret to me ;) I use it nearly every day be it for templating, or creating visual assets (logos, icons, images, backgrounds, animations, etc).',
+			[Locales.FR]: 'Logiciel open-source de création et d\'édition de fichiers vectoriels, un indispensable pour la création de maquettes et d\'assets graphiques. Je l\'utilise maintenant depuis plusieurs années. Les nombreux raccourcis et fonctionnalités cachées ne sont plus un secret pour moi ;) Je l\'utilise quasiment tout les jours que ce soit pour les maquettages, ou encore la création des ressources graphiques (images, logos, animations, fonds, etc).',
 		},
 	},
 	[tID.RnD]: {
 		link: 'https://en.wikipedia.org/wiki/R&D',
 		icon: null,
 		tags: [tTag.Organization, tTag.Other],
+		interest: Level.L5,
+		mastery: Level.L4,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Research and Development. Design and development of prototypes or software before the industrialization phase.',
+			[Locales.FR]: 'Recherche et Développement. Conception et élaboration de prototypes ou de logiciel avant la phase d\'industrialisation.',
 		},
 	},
 	[tID.TeamLead]: {
 		link: 'https://en.wikipedia.org/wiki/Team_leader',
 		icon: null,
 		tags: [tTag.Organization, tTag.Human],
+		interest: Level.L1,
+		mastery: Level.L3,
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[Locales.EN]: 'Management of a development team. Translate client needs into technical tasks for developers. Estimating and monitoring progress.',
+			[Locales.FR]: 'Gestion d\'une équipe de développement. Traduire les besoins client en tâches techniques pour les développeurs. Estimations, et suivi de l\'avancement.',
 		},
 	},
 	[tID.NeedsAnalysis]: {
 		link: '',
 		icon: null,
 		tags: [tTag.Organization, tTag.Human],
+		interest: Level.L2,
+		mastery: Level.L4,
 		info: {
-			[Locales.EN]: 'Client needs analysis.',
-			[Locales.FR]: 'Analyse du besoin client.',
+			[Locales.EN]: 'Analysis of the client\'s needs in order to provide a solution and a technical agenda',
+			[Locales.FR]: 'Analyse du besoin client afin de fournir une solution et un agenda technique.',
 		},
 	},
 };

src/service/skills.ts

@@ -18,11 +18,9 @@ export function available(): tID[] {
 		availCache.push(id);
 	}
 	availCache.sort( (a: tID, b: tID) => {
-		const aname = skillLabel(a);
-		const bname = skillLabel(b);
-		if ( aname < bname ) { return -1; }
-		if ( aname > bname ) { return 1; }
-		return 0;
+		const alevel = Skills[a].interest * 1.1 + Skills[a].mastery;
+		const blevel = Skills[b].interest * 1.1 + Skills[b].mastery;
+		return blevel - alevel;
 	});
 	return availCache;
 }