feat: add projects and skills

priority (first to last)
 - still active with last start date
 - still active
 - ended last

src/assets/skills/git.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
 	<g transform="translate(-88.27 -88.449)">
-		<path d="m96.546 93.126c-0.52166 0-0.9455 0.42364-0.9455 0.94554 0 0.349 0.19131 0.65049 0.47259 0.81459v0.13088s0 0.94554-0.94554 0.94554c-0.39222 0-0.69924 0.08365-0.94558 0.21292v-2.2348c0.28176-0.16409 0.47259-0.46615 0.47259-0.81467 0-0.52194-0.42368-0.94554-0.94554-0.94554-0.52194 0-0.94558 0.42368-0.94558 0.94554 0 0.349 0.19131 0.65049 0.47259 0.81467v3.0987c-0.28176 0.16369-0.47259 0.46559-0.47259 0.81439 0 0.52174 0.42368 0.9455 0.94558 0.9455 0.5219 0 0.94554-0.42368 0.94554-0.9455 0-0.24734-0.09726-0.47107-0.25294-0.63989 0.13768-0.1685 0.36141-0.30578 0.72582-0.30578 1.8763 0 1.891-1.8911 1.891-1.8911v-0.13088c0.28136-0.16409 0.47259-0.46607 0.47259-0.81463 0-0.52198-0.42368-0.9455-0.94558-0.9455zm-2.8366-0.47259c0.26135 0 0.47255 0.21092 0.47255 0.47259 0 0.26135-0.21092 0.47255-0.47255 0.47255-0.26135 0-0.47259-0.21092-0.47259-0.47255 0-0.26135 0.21092-0.47259 0.47259-0.47259zm0 5.6732c-0.26135 0-0.47259-0.21172-0.47259-0.47255 0-0.26055 0.21092-0.47255 0.47259-0.47255 0.26135 0 0.47255 0.21172 0.47255 0.47255 0 0.26135-0.21092 0.47255-0.47255 0.47255zm2.8366-3.7821c-0.26135 0-0.47255-0.21132-0.47255-0.47255 0-0.26135 0.21172-0.47263 0.47255-0.47263 0.26135 0 0.47259 0.21092 0.47259 0.47263 0 0.26135-0.21172 0.47255-0.47259 0.47255z" fill="#5e6b8c" stroke-width=".007387"/>
+		<path d="m96.546 93.126c-0.52166 0-0.9455 0.42364-0.9455 0.94554 0 0.349 0.19131 0.65049 0.47259 0.81459v0.13088s0 0.94554-0.94554 0.94554c-0.39222 0-0.69924 0.08365-0.94558 0.21292v-2.2348c0.28176-0.16409 0.47259-0.46615 0.47259-0.81467 0-0.52194-0.42368-0.94554-0.94554-0.94554-0.52194 0-0.94558 0.42368-0.94558 0.94554 0 0.349 0.19131 0.65049 0.47259 0.81467v3.0987c-0.28176 0.16369-0.47259 0.46559-0.47259 0.81439 0 0.52174 0.42368 0.9455 0.94558 0.9455s0.94554-0.42368 0.94554-0.9455c0-0.24734-0.09726-0.47107-0.25294-0.63989 0.13768-0.1685 0.36141-0.30578 0.72582-0.30578 1.8763 0 1.891-1.8911 1.891-1.8911v-0.13088c0.28136-0.16409 0.47259-0.46607 0.47259-0.81463 0-0.52198-0.42368-0.9455-0.94558-0.9455zm-2.8366-0.47259c0.26135 0 0.47255 0.21092 0.47255 0.47259 0 0.26135-0.21092 0.47255-0.47255 0.47255-0.26135 0-0.47259-0.21092-0.47259-0.47255 0-0.26135 0.21092-0.47259 0.47259-0.47259zm0 5.6732c-0.26135 0-0.47259-0.21172-0.47259-0.47255 0-0.26055 0.21092-0.47255 0.47259-0.47255 0.26135 0 0.47255 0.21172 0.47255 0.47255 0 0.26135-0.21092 0.47255-0.47255 0.47255zm2.8366-3.7821c-0.26135 0-0.47255-0.21132-0.47255-0.47255 0-0.26135 0.21172-0.47263 0.47255-0.47263 0.26135 0 0.47259 0.21092 0.47259 0.47263 0 0.26135-0.21172 0.47255-0.47259 0.47255z" fill="#d85f44" stroke-width=".007387"/>
 	</g>
 </svg>

src/components/Home.vue

@@ -1,11 +1,6 @@
 <template>
 	<div id='home'>
 
-		<div class='contact'>
-			<span class='tel'>(+33) 06 69 05 19 10</span>
-			<span class='mail'>xdrm.dev@gmail.com</span>
-			<span class='addr'>Montauban, 82000</span>
-		</div>
 
 		<LangPicker />
 
@@ -135,32 +130,19 @@ export default class Home extends Vue {
 		align-items: center;
 	}
 
-	.contact {
-		grid-column: 1 / 4;
+	.lang-picker {
+		grid-column: 3;
 		grid-row: 1;
 
-		display: flex;
-		position: relative;
+		justify-self: end;
 
-		margin: 1em 0;
-
-		flex-flow: row nowrap;
-		justify-content: space-around;
-
-		color: #9ea6b3;
-		font-size: 1.2em;
-		font-weight: 400;
-
-	}
-
-	.lang-picker {
 		display: block;
-		position: absolute;
+		position: relative;
 			top: 0;
 			right: 0;
 
-		margin-top: 1em;
-		margin-right: 1em;
+		margin-top: .5em;
+		margin-right: .5em;
 
 		font-size: 1.2em;
 	}

src/components/LangPicker.vue

@@ -1,10 +1,10 @@
 <template>
 	<div class='lang-picker'>
-		<div @click='current = locales[0]'>
-			<img src='../assets/lang/en-US.svg' :data-active='current == locales[0]'/>
+		<div @click='current = locales[0]' :data-active='current == locales[0]'>
+			<img src='../assets/lang/en-US.svg'/>
 		</div>
-		<div @click='current = locales[1]'>
-			<img src='../assets/lang/fr-FR.svg' :data-active='current == locales[1]'/>
+		<div @click='current = locales[1]' :data-active='current == locales[1]'>
+			<img src='../assets/lang/fr-FR.svg'/>
 		</div>
 	</div>
 </template>
@@ -48,22 +48,23 @@ export default class LangPicker extends Vue {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 
-	.lang-picker {
+	div.lang-picker {
 		display: flex;
 		position: relative;
 
-		flex: row nowrap;
+		flex-flow: row nowrap;
 
-		img {
-			display: inline-block;
-			width: 2em;
-			margin-right: .5em;
+		div {
+			flex: 2em;
+
+			display: block;
+			padding: .25em;
 
 			cursor: pointer;
 
 			transform-style: preserve-3d;
 			transition: filter .1s ease-in-out;
-
+;
 			filter: grayscale(70%);
 
 			&[data-active=true]{
@@ -75,8 +76,8 @@ export default class LangPicker extends Vue {
 			}
 		}
 
-		& div:last-child > img {
-			margin: 0;
+		img {
+			width: 2em;
 		}
 	}
 

src/components/Timeline.vue

@@ -14,7 +14,7 @@
 
 			<!-- id is used for navigation -->
 			<div :key="'start-'+proj.name" class='start' :id='"project-" + proj.name.replaceAll(" ", "_")'>
-				{{ proj.started_at | short_date }}
+				{{ short_date(proj.started_at) }}
 			</div>
 
 			<div :key="'name-icon-'+proj.name" class='name-icon'>
@@ -39,13 +39,15 @@
 			<div :key="'desc-'+proj.name" class='desc' v-html='proj.info[$i18n.locale]'></div>
 
 			<template v-if='proj.source != null'>
-				<div :key="'src-icon-'+proj.name" class='src-icon'>
+				<template v-for='src in proj.source'>
+					<div :key="'src-icon-'+proj.name+src" class='src-icon'>
 						<img src='../assets/timeline/src.svg' />
 					</div>
-				<div :key="'src-'+proj.name" class='src' >
-					{{ $t('project.sources') }} <a :href='proj.source.link'>{{ proj.source.name }}</a> <span>({{ proj.commits }} commits)</span>
+					<div :key="'src-'+proj.name+src" class='src'>
+						{{ $t('project.sources') }} <a :href='src.link'>{{ src.name }}</a> <span>({{ proj.commits || src.commits }} commits)</span>
 					</div>
 				</template>
+			</template>
 
 			<template v-if='proj.doc != null'>
 				<div :key="'doc-icon-'+proj.name" class='doc-icon'>
@@ -61,7 +63,7 @@
 			</div>
 			<div :key="'end-'+proj.name" class='end'>
 				<template v-if='proj.stopped_at != null'>
-					{{ $t('project.end') }} {{ proj.stopped_at | short_date }} <span>{{ duration(proj.started_at, proj.stopped_at, true) }}</span>
+					{{ $t('project.end') }} {{ short_date(proj.stopped_at) }} <span>{{ duration(proj.started_at, proj.stopped_at, true) }}</span>
 				</template>
 				<template v-else>
 					{{ $t('project.still') }} <span>{{ duration(proj.started_at, new Date(), false) }}</span>
@@ -127,23 +129,34 @@ function getTimeDiff(start: Date, stop: Date): TimeDiff {
 	components: {
 		SkillCard,
 	},
-	filters: {
-		short_date(date: Date): string {
-			return date.toLocaleDateString(navigator.language, { month: 'short', year: 'numeric' });
-		},
-	},
 })
 export default class Timeline extends Vue {
 	private skill: tID|null  = null;
 	private projects: Project[] = [];
 
+
 	public filter(skill: tID|null) {
 		this.skill = skill;
 		if ( skill == null ) {
 			this.projects = [];
 			return;
 		}
-		this.projects = projects.bySkill(skill);
+		this.projects = projects.bySkill(skill).sort( (a, b) => {
+			if( b.stopped_at == null && a.stopped_at == null ){
+				return b.started_at.getTime() - a.started_at.getTime()
+			}
+			if( a.stopped_at != null && b.stopped_at == null ){
+				return 1;
+			}
+			if( b.stopped_at != null && a.stopped_at == null ){
+				return -1;
+			}
+			return b.started_at.getTime() - a.started_at.getTime();
+		});
+	}
+
+	protected short_date(date: Date): string {
+		return date.toLocaleDateString(this.$i18n.locale, { month: 'short', year: 'numeric' });
 	}
 
 	private mounted() {

src/locales/fr.json

@@ -30,15 +30,54 @@
 	"tag.human": "Humain",
 	"tag.other": "Autre",
 
+	"skill.mariadb":         "MariaDB",
+	"skill.postgres":        "PostgreSQL",
+	"skill.mongo":           "MongoDB",
+	"skill.vue":             "Vue <i>(.js)</i>",
+	"skill.angular":         "Angular <i>(7+)</i>",
+	"skill.parcel":          "Parcel",
+	"skill.cordova":         "Apache Cordova",
+	"skill.webpack":         "Webpack",
+	"skill.webgl":           "WebGL",
+	"skill.audioapi":        "Audio API",
+	"skill.websocket":       "Websocket",
+	"skill.docker":          "Docker",
+	"skill.bash":            "bash",
+	"skill.linux":           "GNU/Linux",
+	"skill.systemd":         "systemd",
+	"skill.git":             "Git",
+	"skill.rpm":             "RPM packaging",
+	"skill.raspberry":       "Raspberry",
+	"skill.arduino":         "Arduino",
+	"skill.php":             "PHP",
+	"skill.html":            "HTML5",
+	"skill.css":             "CSS3",
+	"skill.js":              "Javascript",
+	"skill.ajax":            "AJAX",
+	"skill.ts":              "Typescript",
+	"skill.c":               "C (lang)",
+	"skill.cpp":             "C++",
+	"skill.python":          "Python",
+	"skill.go":              "Go (lang)",
+	"skill.qt":              "Qt",
+	"skill.opensource":      "Open-source",
 	"skill.electronics":     "Electronique",
+	"skill.web":             "Web",
+	"skill.rest":            "REST",
 	"skill.crypto":          "Securité/crypto",
 	"skill.imageprocessing": "Traitement d'image",
 	"skill.ai":              "Intelligence Artificielle",
+	"skill.deeplearning":    "Deep Learning",
 	"skill.neuralnetwork":   "Réseaux de neuronnes",
 	"skill.opti":            "Optimization",
+	"skill.sockets":         "Sockets",
 	"skill.concurrency":     "Programmation Concurrente",
+	"skill.uiux":            "UI/UX",
+	"skill.inkscape":        "Inkscape",
+	"skill.rnd":             "R&D",
 	"skill.teamlead":        "Chef d'équipe",
 
+
 	"time.dur-format":  "a duré {duration}",
 	"time.cur-format":  "depuis {duration}",
 	"time.diff-format": "il y a {elapsed}",

src/model/projects.ts

@@ -5,6 +5,9 @@ export interface Link {
 	name: string;
 	link: string;
 }
+export interface SrcLink extends Link {
+	commits: number;
+}
 
 export interface Project {
 	name: string;
@@ -13,7 +16,7 @@ export interface Project {
 	started_at: Date;
 	stopped_at: Date|null;
 	info: { [loc in Locales]: string };
-	source: Link|null;
+	source: SrcLink[]|null;
 	doc: Link|null;
 	commits: number;
 }
@@ -23,8 +26,8 @@ export const Projects: Project[] = [
 		name: 'Angular module system',
 		client: 'Marlink',
 		skills: [s.Angular, s.RnD, s.Concurrency, s.Html, s.Css, s.Inkscape, s.UIUX, s.Ts, s.Js, s.Ajax, s.Cordova, s.Bash, s.Git, s.Rest, s.Rpm, s.Vue, s.Web, s.Docker],
-		started_at: new Date(2019, 10, 26),
-		stopped_at: new Date(2021, 4, 11),
+		started_at: new Date(2019, 9, 26),
+		stopped_at: new Date(2021, 3, 11),
 		info: {
 			[Locales.EN]: 'Prototype for a front-end Angular modular system. I technically and visually designed a kind of app store. Hacked angular to allow injecting custom pages and code on-the-go.',
 			[Locales.FR]: 'Prototype pour rendre un front-end Angular entièrement modulaire. J\'ai du concevoir (techniquement et visuellement) une sorte d\'App store permettant de sélectionner les modules à installer. D\'autre part j\'ai du en quelque sorte hacker angular afin qu\'il permette d\'y injecter des composants (interface) et des services (code) externes en temps réel.',
@@ -36,8 +39,8 @@ export const Projects: Project[] = [
 		name: 'EarthMap',
 		client: 'Collins Aerospace',
 		skills: [s.Qt, s.RnD, s.Cpp, s.Concurrency, s.Git, s.Css, s.Inkscape, s.UIUX],
-		started_at: new Date(2019, 10, 26),
-		stopped_at: new Date(2021, 4, 11),
+		started_at: new Date(2019, 9, 26),
+		stopped_at: new Date(2021, 3, 11),
 		info: {
 			[Locales.EN]: 'TODO',
 			[Locales.FR]: 'TODO',
@@ -49,7 +52,7 @@ export const Projects: Project[] = [
 		name: 'ADSBOnPED',
 		client: 'Collins Aerospace',
 		skills: [s.Qt, s.RnD, s.Cpp, s.Concurrency, s.Git, s.Css, s.Bash, s.Linux, s.Inkscape, s.UIUX, s.TeamLead],
-		started_at: new Date(2020, 7, 16),
+		started_at: new Date(2020, 6, 16),
 		stopped_at: null,
 		info: {
 			[Locales.EN]: 'TODO',
@@ -62,8 +65,8 @@ export const Projects: Project[] = [
 		name: 'EasyCom',
 		client: 'Medwin | Vygon',
 		skills: [s.Go, s.Rest, s.Concurrency, s.Git, s.Bash, s.Linux, s.Docker, s.Crypto, s.Postgres, s.Opti, s.Websocket, s.Inkscape, s.UIUX],
-		started_at: new Date(2021, 1, 6),
-		stopped_at: new Date(2022, 11, 1),
+		started_at: new Date(2021, 0, 6),
+		stopped_at: new Date(2022, 10, 1),
 		info: {
 			[Locales.EN]: 'TODO',
 			[Locales.FR]: 'TODO',
@@ -76,59 +79,97 @@ export const Projects: Project[] = [
 		name: 'aicra',
 		client: null,
 		skills: [s.Go, s.Web, s.Rest, s.OpenSource, s.Git, s.Inkscape],
-		started_at: new Date(2018, 5, 19),
+		started_at: new Date(2018, 4, 19),
 		stopped_at: null, // still active
 		info: {
 			[Locales.EN]: 'Started as a personal go library to ease REST API development. The main goal is to greatly enhance maintainability by providing a single configuration file that describes every endpoint of the API. Everything that can be automated is while staying idiomatic to go. Aicra automates routing, parameter validation and extraction, permission management, response output formatting.<br><br>I then used it for a professional project in the medical field after corporate evaluation and audit. At the end of the project, results in production are promising : development and testing speed and ease, overall performances, configuration readability for other team members provides a real benefit, they can know the whole api at any time.',
 			[Locales.FR]: 'Démarré en tant que projet personnel afin de simplifier mes développements d\'API REST. L\'objectif principal et d\'améliorer significativement la maintenabilité avec l\'utilisation d\'un fichier de configuration unique qui décrit/définit tous les endpoints de l\'API. Tout ce qui peut être automatisé l\'est tout en restant idiomatique à Go. Aicra automatise le routage, la validation et extraction des paramètres, les classes de permissions, le formattage des réponses, etc.<br><br>J\'ai ensuite pu utiliser cette librairie lors d\'un projet industriel dans le domaine médical après audit et evaluation par l\'entreprise. Après avoir terminé ce projet, les résultats sont plutôt encourageants : rapidité de développement et de test, performances, lisibilité du fichier de configuration pour les autres membres de l\'équipe, (permet de connaître toute l\'API à tout moment du développement) etc.',
 		},
-		source: { name: 'github.com/xdrm-io/aicra', link: 'https://github.com/xdrm-io/aicra' },
+		source: [{ name: 'github.com/xdrm-io/aicra', link: 'https://github.com/xdrm-io/aicra', commits: 535 }],
 		doc: { name: 'pkg.go.dev/github.com/xdrm-io/aicra', link: 'https://pkg.go.dev/github.com/xdrm-io/aicra' },
-		commits: 535,
+		commits: 0,
 	},
 
 	{
 		name: 'go-ws',
 		client: null,
-		skills: [s.Go, s.Websocket, s.OpenSource, s.Opti],
-		started_at: new Date(2018, 4, 24),
-		stopped_at: new Date(2021, 6, 21),
+		skills: [s.Go, s.Websocket, s.OpenSource, s.Opti, s.Git],
+		started_at: new Date(2018, 3, 24),
+		stopped_at: new Date(2021, 5, 21),
 		info: {
 			[Locales.EN]: 'Research project to learn more about websockets. I developed a websocket client and server using the RFC as only guidance.<br><br>I did some optimizations to provide a performant solution based on the idiomatic way of dealing with asynchronous resources (channels). By the way I used gorilla/websocket later and I don\'t understand why everything in the API is synchronous ?!<br><br>"I know websockets"',
 			[Locales.FR]: 'Projet de recherche pour mieux comprendre les websockets. J\'ai développé un client et un serveur websocket avec la RFC comme seul guide.<br><br>J\'ai aussi fait une passe optimisation pour avoir une solution performante basée sur la manière idiomatique (Go) de gérer la concurrence (channels). D\'ailleurs j\'ai utilisé gorilla/websocket plus tard, et je ne comprends pas pourquoi toute l\'api est synchrone ?!<br><br>"I know websockets"',
 		},
-		source: { name: 'git.xdrm.io/go/ws', link: 'https://git.xdrm.io/go/ws' },
+		source: [{ name: 'git.xdrm.io/go/ws', link: 'https://git.xdrm.io/go/ws', commits: 114 }],
 		doc: { name: 'pkg.go.dev/git.xdrm.io/go/ws', link: 'https://pkg.go.dev/git.xdrm.io/go/ws' },
-		commits: 114
+		commits: 0
 	},
 
 	{
 		name: 'SMMP (LogAuth)',
 		client: null,
 		skills: [s.Php, s.UIUX, s.Css, s.Js, s.Ajax, s.Web, s.MariaDB, s.Git, s.Inkscape],
-		started_at: new Date(2017, 1, 18),
-		stopped_at: new Date(2018, 11, 5),
+		started_at: new Date(2017, 0, 18),
+		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.<br><br>I developed:<ul><li><b>SMMP</b> <i>(Secure Management & Monitoring Platform)</i> : a web interface accessible on the internet to manage the warehouse</li><li><b>SATS</b> <i>(Secure Authentication & Tracking System)</i> : Raspberry Pi hardware & software to interface with vehicles and provide an RFID authentication for users with logging abilities.</li><li><b>setup</b> : A tool project that builds a fully-functional micro sd card for a new SATS (custom credentials, id, features, plugins).</li></ul><br><br>The SMMP is a website developped with a PHP backend and vanilla frontend (no lib). It manages groups of users and groups of machines. Some groups of users can be authorized to do some actions on some groups of machines. A page allows to browse the access history in real-time.<br><br>Also the website allowed for new features on-the-fly by using a generic database model that can define what feature read or write what GPIO pin on the RaspBerry Pi. Machine state management was also defined by the generic database model.',
 			[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 afin de suivre et gérer les accès des utilisateurs aux machines d\'un entrepot.<br><br>J\'ai développé:<ul><li><b>SMMP</b> <i>(Secure Management & Monitoring Platform)</i> : un site web accessible sur Internet pour la gestion par entrepôt.</li><li><b>SATS</b> <i>(Secure Authentication & Tracking System)</i> : le 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> : Un outil permettant d\'écrire un carte microSD functionnelle pour chaque nouveau Raspberry à ajouter au système (authentification sur-mesure, id, fonctionnalités, plugins).</li></ul><br><br>La plateforme SMMP est un site web développé avec un backend PHP et un frontend vanilla (pas de librairie). Elle permet la gestion de groupes d\'utilisateurs et de groupes de machines. Des actions peuvent être configurées pour des groupes d\'utilisateurs sur des groupes de machines. Une page permet de parcourir l\'historique des accès en temps réel.<br><br>De plus, le site permet l\'ajout de nouvelle fonctionnalités en l\'état grâce à un modèle de base de données générique qui permet directement de définir des entrées/sorties du Raspberry Pi. La machine à état est aussi définie dans le modèle générique en base.',
 		},
-		source: { name: 'git.xdrm.io/logauth/smmp', link: 'https://git.xdrm.io/logauth/smmp' },
+		source: [{ name: 'git.xdrm.io/logauth/smmp', link: 'https://git.xdrm.io/logauth/smmp', commits: 567 }],
 		doc: null,
-		commits: 114
+		commits: 0
 	},
 
 	{
 		name: 'SATS (LogAuth)',
 		client: null,
-		skills: [s.RaspBerry, s.Electronics, s.Systemd, s.Python, s.Php, s.Linux, s.Bash, s.Crypto, s.Git,],
-		started_at: new Date(2017, 1, 18),
-		stopped_at: new Date(2018, 11, 5),
+		skills: [s.RaspBerry, s.Electronics, s.Systemd, s.Python, s.Php, s.Linux, s.Bash, s.Crypto, s.Git, s.Arduino],
+		started_at: new Date(2017, 0, 18),
+		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.<br><br>I developed:<ul><li><b>SMMP</b> <i>(Secure Management & Monitoring Platform)</i> : a web interface accessible on the internet to manage the warehouse</li><li><b>SATS</b> <i>(Secure Authentication & Tracking System)</i> : Raspberry Pi hardware & software to interface with vehicles and provide an RFID authentication for users with logging abilities.</li><li><b>setup</b> : A tool project that builds a fully-functional micro sd card for a new SATS (custom credentials, id, features, plugins).</li></ul><br><br>The SATS consists of a hardware and its associated firmware. The firmware is a set of programs launched through a complex systemd state machine to go through the stages : boot, network connection, update check, update, init IO, the daemon (main loop).<br><br>It grants or denies access when an RFID card is detected, the access list is regularly fetched from the SMMP api. It is able to update and fetch new features from the network. It stores every access (or attempt), manages and tracks the machine state over time.<br><br>I made a few PCBs for the SATS in order to interface the Raspberry properly.<br><br>I also had to design my own authentication system to provide a robust and attack-proof communication between SATS and the SMMP. It avoids key theft, request forgery and allows for resynchronization after an attack or a theft.',
-			[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 afin de suivre et gérer les accès des utilisateurs aux machines d\'un entrepot.<br><br>J\'ai développé:<ul><li><b>SMMP</b> <i>(Secure Management & Monitoring Platform)</i> : un site web accessible sur Internet pour la gestion par entrepôt.</li><li><b>SATS</b> <i>(Secure Authentication & Tracking System)</i> : le 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> : Un outil permettant d\'écrire un carte microSD functionnelle pour chaque nouveau Raspberry à ajouter au système (authentification sur-mesure, id, fonctionnalités, plugins).</li></ul><br><br>Le systyème SATS consiste en un shield (carte éléctronique) ajoutée au Raspberry Pi ainsi qu\'un firmware. Le firmware est composé de plusieurs programmes lancés à travers une machine à état complexe dans systemd afin d\'accéder aux différentes phases : boot, connexion réseau, vérification de mise à jour, mise à jour, init E/S, 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 du réaliser plusieurs PCBs afin que le SATS s\'interface correctement avec le Raspberry.<br><br>J\'ai pu lors de ce projet concevoir mon propre système d\'authentication afin de protéger 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.',
+			[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.<br><br>I developed:<ul><li><b>SMMP</b> <i>(Secure Management & Monitoring Platform)</i> : a web interface accessible on the internet to manage the warehouse</li><li><b>SATS</b> <i>(Secure Authentication & Tracking System)</i> : Raspberry Pi hardware & software to interface with vehicles and provide an RFID authentication for users with logging abilities.</li><li><b>setup</b> : A tool project that builds a fully-functional micro sd card for a new SATS (custom credentials, id, features, plugins).</li></ul><br><br>The SATS consists of a hardware and its associated firmware. The firmware is a set of programs launched through a complex systemd state machine to go through the stages : boot, network connection, update check, update, init IO, the daemon (main loop).<br><br>It grants or denies access when an RFID card is detected, the access list is regularly fetched from the SMMP api. It is able to update and fetch new features from the network. It stores every access (or attempt), manages and tracks the machine state over time.<br><br>I made a few PCBs for the SATS in order to interface the Arduino properly, and with a Raspberry in the last properly.<br><br>I also had to design my own authentication system to provide a robust and attack-proof communication between SATS and the SMMP. It avoids key theft, request forgery and allows for resynchronization after an attack or a 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 afin de suivre et gérer les accès des utilisateurs aux machines d\'un entrepot.<br><br>J\'ai développé:<ul><li><b>SMMP</b> <i>(Secure Management & Monitoring Platform)</i> : un site web accessible sur Internet pour la gestion par entrepôt.</li><li><b>SATS</b> <i>(Secure Authentication & Tracking System)</i> : le 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> : Un outil permettant d\'écrire un carte microSD functionnelle pour chaque nouveau Raspberry à ajouter au système (authentification sur-mesure, id, fonctionnalités, plugins).</li></ul><br><br>Le systyème SATS consiste en un shield (carte éléctronique) ajoutée au Raspberry Pi ainsi qu\'un firmware. Le firmware est composé de plusieurs programmes lancés à travers une machine à état complexe dans systemd afin d\'accéder aux différentes phases : boot, connexion réseau, vérification de mise à jour, mise à jour, init E/S, 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 du réaliser plusieurs PCBs afin que le SATS s\'interface correctement avec l\'Arduino, puis dans les dernières versions avec un Raspberry.<br><br>J\'ai pu lors de ce projet concevoir mon propre système d\'authentication afin de protéger 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' },
+		source: [
+			{ name: 'git.xdrm.io/logauth/sats', link: 'https://git.xdrm.io/logauth/sats', commits: 214 },
+			{ name: 'git.xdrm.io/logauth/bash-com', link: 'https://git.xdrm.io/logauth/bash-com', commits: 32 },
+			{ name: 'git.xdrm.io/logauth/ioemu', link: 'https://git.xdrm.io/logauth/ioemu', commits: 47 },
+			{ name: 'git.xdrm.io/logauth/schastsp', link: 'https://git.xdrm.io/logauth/schastsp', commits: 92 },
+		],
 		doc: null,
-		commits: 114
-	}
+		commits: 0
+	},
+
+	{
+		name: 'SID (IUT)',
+		client: null,
+		skills: [s.Git, s.TeamLead, s.Rest, s.Php, s.UIUX, s.Inkscape, s.Ajax, s.Html, s.Css, s.Js, s.MariaDB, s.Web],
+		started_at: new Date(2016, 0, 12),
+		stopped_at: new Date(2015, 9, 20),
+		info: {
+			[Locales.EN]: 'Tutored project for my DUT degree (BTEC Higher National Dimploma equivalent). The subject was to provide a web-based solution to manage the whole IT department : teachers, students, exams, marks, schedule, course unit and subunits, etc.<br><br>The project was to be made with a team of 4, I quickly took the project lead, and finally did it all by myself, my colleagues lacked motivation and/or experience. It is my first experience with needs analysis by the chief of the IT department ; learning to put my opinion aside when it conflicts with the client\'s needs to keep moving on.<br><br>The project is mainly developped in PHP with a 2-level web API, I did not know REST at the time. It was a first "professional" experience fully featuring web technologies : ui/ux, html/css, js, php, sql, client needs analysis, deadlines, etc. My experience through my personal web projects allowed me not to do like my coworkers who provided a quite minimal but sufficient software. I am actually proud of the final product, it was one of the first projects I brought to completion. The "client" was satisfied too, but the workload made me stay up all night a few times ; 3 months to do everything <i>from scratch</i>. It also helped me test my limits.',
+			[Locales.FR]: 'Projet tutoré de fin de cycle dans le cadre de l\'IUT informatique. Le sujet était de proposer une solution web pour la gestion du département informatique (système d\'information complet) : enseignants, élèves, examens, notes, emplois du temps, gestion des UE, modules, etc.<br><br>Le projet s\'est fait avec une équipe de 4, j\'ai vite pris le lead du projet et finalement développé seul par manque de d\'investissement ou d\'expérience de mes collègues. C\'est ma première expérience avec l\'analyse des besoins donnés par le chef du département dans ce cas; apprendre à mettre son avis de côté quand c\'est incompatible avec la vision du client afin d\'avancer.<br><br>Le projet est principalement fait en PHP avec une ébauche d\'API web à 2 niveaux (je ne connaissait pas encore REST). Ce fut une première expérience "professionnelle" web complète : ui/ux, html/css, js, php, sql, analyse besoin client, délais, etc. Mon expérience via mes projets web perso m\'ont permis de ne pas faire comme la plupart de mes collègues qui ont proposés une solution plus que minimale et suffisante. Je suis assez fier du résultat, ce fut un de mes premiers projets menés à terme, le "client" était satisfait aussi, mais la charge de travail m\'a fait faire pas mal de nuits blanches ; 3 mois pour tout faire <i>from scratch</i>. Ce projet m\'a donc aussi permis de tester mes limites.',
+		},
+		source: [{ name: 'git.xdrm.io/dut/sid', link: 'https://git.xdrm.io/dut/sid', commits: 401 }],
+		doc: null,
+		commits: 0
+	},
+
+	{
+		name: 'PTUT (Master)',
+		client: null,
+		skills: [s.Git, s.TeamLead, s.Rest, s.Php, s.UIUX, s.Inkscape, s.Ajax, s.Vue, s.Js, s.MariaDB, s.Docker, s.Web],
+		started_at: new Date(2018, 1, 16),
+		stopped_at: new Date(2018, 5, 13),
+		info: {
+			[Locales.EN]: 'Tutored project for my Master\'s degree in IT. The subject was to provide a web solution to manage the IT department : teachers, classes, classrooms, marks, course unit and subunits, etc.<br><br>The project was made with 2 colleagues, I quickly took the project lead and finally developed almost everything myself. The idea was to replace a set of excel files used by chiefs of the IT department to manage resources and generate schedules for everyone. There has been a few conflicts with "the clients" as they were never available and we had a deadline for this work. At the end, they told us that they would use our work.<br><br>The project features a PHP backend and a Vue frontend. We used docker-compose with continuous integration & deployment mechanisms. I spent 300 hours on it in a bit more than 3 months, I guess I was motivated.',
+			[Locales.FR]: 'Projet tutoré de fin de cycle dans le cadre du Master Informatique. Le sujet était de proposer une solution web pour la gestion du département informatique (système d\'information complet) : enseignants, classes, salles, notes, emplois du temps, gestion des UE, modules, etc.<br><br>Le projet s\'est fait avec une équipe de 3, j\'ai vite pris le lead du projet et finalement développé quasiment seul le projet. L\'idée était de remplacer un ensemble de fichiers excel utilisés par les chefs de département "le client" afin de gérer les ressources et générer les plannings. Il y a eu quelques accrochages avec les clients car ils n\'étais jamais disponibles et nous avions un délai pour ces travaux. En fin de projet, ils nous ont finalement dit qu\'ils utiliseraient le projet à l\'avenir.<br><br>Le projet a un backend PHP, et un front en Vue. Nous avons utilisé docker-compose avec un système d\'intégration et de déploiement continu. J\'ai compté 300 heures passées dessus en un peu plus de 3 mois, j\'étais motivé.',
+		},
+		source: [
+			{ name: 'git.xdrm.io/mti/ptut-virtenv', link: 'https://git.xdrm.io/mti/ptut-virtenv', commits: 103 },
+			{ name: 'git.xdrm.io/mti/ptut-vhost', link: 'https://git.xdrm.io/mti/ptut-vhost', commits: 397 },
+		],
+		doc: null,
+		commits: 0
+	},
 ];

src/model/skills.ts

@@ -304,8 +304,8 @@ export const Skills: tSkills = {
 		icon: 'skills/raspberry.svg',
 		tags: [tTag.System, tTag.IoT],
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[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.',
 		},
 	},
 	[tID.Arduino]: {
@@ -313,8 +313,8 @@ export const Skills: tSkills = {
 		icon: 'skills/arduino.svg',
 		tags: [tTag.System, tTag.IoT],
 		info: {
-			[Locales.EN]: '',
-			[Locales.FR]: '',
+			[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.',
 		},
 	},