feat: polish timeline colors

src/components/SkillPicker.vue

@@ -78,6 +78,9 @@ const DEFAULT_TAG = tTag.All;
 export default class SkillPicker extends Vue {
 	// list of available skills
 	public readonly ids: tID[] = skills.available();
+
+	// details section when a skill is selected
+	protected details: Details|null = null;
 	// currently selected skill
 	private sel: tID|null = null;
 
@@ -89,9 +92,6 @@ export default class SkillPicker extends Vue {
 	// currently selected tag
 	private tag: tTag = tTag.Language;
 
-	// details section when a skill is selected
-	protected details: Details|null = null;
-
 	// selects or deselects a skill. If the skill is not in the current
 	// folder, it navigates to the DEFAULT_TAG folder beforehand. Scrolls to
 	// the selected skill when selected.

src/components/Timeline.vue

@@ -39,7 +39,7 @@
 				<img src='../assets/timeline/info.svg' />
 			</div>
 			<div :key="'desc-'+proj.name" class='desc'>
-				<div class='user'>{{ $t('project.username') }}</div>
+				<!-- <div class='user'>{{ $t('project.username') }}</div> -->
 				<p v-html='proj.info[$i18n.locale]'/>
 			</div>
 
@@ -139,19 +139,6 @@ export default class Timeline extends Vue {
 	private skill: tID|null  = null;
 	private projects: Project[] = [];
 
-	private sort_projects(a: Project, b: Project): number {
-		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();
-	}
-
 
 	public filter(skill: tID|null) {
 		this.skill = skill;
@@ -203,6 +190,19 @@ export default class Timeline extends Vue {
 		scroller.go('skill-picker', 0);
 	}
 
+	private sort_projects(a: Project, b: Project): number {
+		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();
+	}
+
 	private mounted() {
 		document.body.addEventListener('scroll', this.onScroll, { passive: true });
 	}
@@ -462,7 +462,7 @@ export default class Timeline extends Vue {
 			justify-self: end;
 
 			font-size: .8em;
-			color: #535359;
+			color: #434d5d;
 
 			margin-right: 1rem;
 		}
@@ -471,7 +471,7 @@ export default class Timeline extends Vue {
 
 			margin-left: 1rem;
 
-			color: #999999;
+			color: #89919f;
 		}
 
 		// line 3
@@ -486,7 +486,6 @@ export default class Timeline extends Vue {
 
 		.joint-stop {
 			height: $joint-height;
-			background: red;
 
 			background: url('../assets/timeline/joint-stop.svg');
 			background-repeat: no-repeat;
@@ -523,21 +522,20 @@ export default class Timeline extends Vue {
 			letter-spacing: .01rem;
 			// text-align: justify;
 
-			padding: 1em;
-			padding-bottom: 2em;
+			padding: 2em;
 			margin-bottom: 1.5em;
 
 			color: #eee;
-			background: #323841;
+			background: #323945;
 
 			border: .1rem solid #45454b;
-			border-radius: .4em / .4em;
+			border-radius: .8em;
 			z-index: 100;
 
 			transform-style: preserve-3d;
 
 			&:before, &:after {
-				content: '';
+				// content: '';
 
 				display: block;
 				position: absolute;
@@ -548,7 +546,7 @@ export default class Timeline extends Vue {
 
 				background: darken(#323841, 4%);
 				border: .1rem solid darken(#45454b, 4%);
-				border-radius: .4em / .4em;
+			border-radius: .8em;
 
 				transform: translateZ(-1px);
 			}
@@ -576,7 +574,7 @@ export default class Timeline extends Vue {
 		}
 
 		.src, .doc, .end {
-			color: #999999;
+			color: #89919f;
 		}
 
 		.name b {
@@ -590,7 +588,7 @@ export default class Timeline extends Vue {
 			position: relative;
 
 			font-size: .8em;
-			color: #4d4d4d;
+			color: #434d5d;
 
 			margin-left: .5em;
 
@@ -604,7 +602,7 @@ export default class Timeline extends Vue {
 					width: .3em;
 					height: .3em;
 
-				background: #606060;
+				background: #4e596c;
 
 				border-radius: 50% / 50%;
 			}

src/model/projects.ts

@@ -144,8 +144,8 @@ export const Projects: Project[] = [
 		name: 'SID (IUT)',
 		client: null,
 		skills: [s.Git, s.TeamLead, s.Rest, s.Php, s.NeedsAnalysis, 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),
+		started_at: new Date(2015, 9, 20),
+		stopped_at: new Date(2016, 0, 12),
 		info: {
 			[Locales.EN]: 'Tutored project for my DUT degree (BTEC Higher National Dimploma equivalent). The subject was to provide a web-based solution for the management of the IT department (information system): teachers, students, exams, grades, timetables, course units and subunits, etc.<br><br>It was my first experience in analyzing customer needs, the head of the department in this case. I learned to adopt the vision of the client in order to provide a result as close as possible to his expectations.<br><br>The project is mainly done in PHP with a draft of a 2-level web API (not knowing REST yet). It was a complete professional web experience: UI/UX, html/css, js, php, sql, needs analysis, deadlines, etc. The quality of the project is based on skills acquired during my personal web projects. The client appreciated my investment and availability.',
 			[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>C\'est ma première expérience d\'analyse des besoins clients, le chef du département dans ce cas. J\'ai appris à adopter la vision du client afin de fournir un résultat au plus proche de ses attentes.<br><br>Le projet est principalement fait en PHP avec une ébauche d\'API web à 2 niveaux (ne connaissant pas encore REST). Ce fut une expérience professionnelle web complète : ui/ux, html/css, js, php, sql, analyse besoin client, délais, etc. La qualité du projet repose sur les compétences acquises lors de mes projets web perso. Le client a apprécié mon investissement et ma disponibilité.',
@@ -286,7 +286,7 @@ export const Projects: Project[] = [
 		source: [
 			{ name: 'git.xdrm.io/go/neuralnet.php', link: 'https://git.xdrm.io/go/neuralnet.php', commits: 5 },
 		],
-		doc: { name: "pkg.go.dev/git.xdrm.io/go/neuralnet", link: 'https://pkg.go.dev/git.xdrm.io/go/neuralnet' },
+		doc: { name: 'pkg.go.dev/git.xdrm.io/go/neuralnet', link: 'https://pkg.go.dev/git.xdrm.io/go/neuralnet' },
 		commits: 0,
 	},
 	{
@@ -309,8 +309,8 @@ export const Projects: Project[] = [
 		name: 'carb-sync',
 		client: null,
 		skills: [s.Arduino, s.Cpp, s.C, s.Electronics, s.OpenSource, s.Git],
-		started_at: new Date(2020, 5, 1),
-		stopped_at: new Date(2020, 3, 30),
+		started_at: new Date(2020, 3, 30),
+		stopped_at: new Date(2020, 5, 1),
 		info: {
 			[Locales.EN]: 'Arduino project allowing the adjustment of motorcycle carburetors. The project uses 2 high-resolution pressure sensors to display a graphical differential on a small OLED screen. 2 knobs allow to adjust the buffer size and the sampling. This small project allows to synchronize its carburetors on battery in a portable way and at low cost.',
 			[Locales.FR]: 'Projet Arduino permettant le réglage de carburateurs de moto. Le projet emploie 2 capteurs de pression haute résolution pour présenter un différentiel graphique sur un petit écran OLED. 2 potentiomètres permettent de régler la taille du tampon et l\'échantillonnage. Ce petit projet permet de synchroniser ses carburateurs sur batterie de manière portable et à moindre coût.',
@@ -325,8 +325,8 @@ export const Projects: Project[] = [
 		name: 'evw',
 		client: null,
 		skills: [s.Arduino, s.Cpp, s.C, s.Electronics, s.OpenSource, s.Git],
-		started_at: new Date(2019, 6, 17),
-		stopped_at: new Date(2019, 5, 10),
+		started_at: new Date(2019, 5, 10),
+		stopped_at: new Date(2019, 6, 17),
 		info: {
 			[Locales.EN]: 'Arduino project to remotely control solenoid valves. Opening of an agricultural hydraulic valve by WiFi connection. A battery operated low power remote control sends a UDP multicast message on the local network. The solenoid valve receives the message, opens or closes in response. Visual feedback on the remote control of the opening or closing. Possibility to have several independent solenoid valves and controls on the network.',
 			[Locales.FR]: 'Projet Arduino permettant de commander une électrovanne à distance. Ouverture d\'une vanne hydraulique agricole par connexion WiFi. Une télécommande très basse consommation sur pile envoi un message multicast UDP sur le réseau local. L\'électrovanne reçoit le message, s\'ouvre et se ferme en réponse. Retour visuel sur la télécommande de l\'ouverture ou fermeture. Possibilité d\'avoir plusieurs électrovannes et commandes indépendantes sur le réseau.',
@@ -449,6 +449,39 @@ export const Projects: Project[] = [
 		doc: null,
 		commits: 0,
 	},
+	{
+		name: 'opportunistic XBee',
+		client: null,
+		skills: [s.Arduino, s.Sockets, s.Cpp, s.Concurrency, s.Git],
+		started_at: new Date(2018, 11, 1),
+		stopped_at: new Date(2018, 11, 13),
+		info: {
+			[Locales.EN]: 'Arduino network project in the context of my Master\'s degree. The goal is to design a protocol for a network of mobile nodes that interconnect to communicate with a central node. The communications are made only from neighbour to neighbour through XBee modules. The protocol must be robust to the nodes\' movements.<br><br>After designing the protocol, I proposed an implementation for the nodes as well as for the central one. Tested in the real world with several spatially distributed Arduino\'s, the protocol is consistent and shows resilience.',
+			[Locales.FR]: 'Projet Arduino de réseau dans le cadre du Master. Il s\'agit de créer un protocole pour un réseau de nœuds mobiles qui s\'interconnectent afin de communiquer avec un nœud central. Les communications se font uniquement de proche en proche grâce à des modules XBee. Le protocole doit être robuste aux mouvements des nœuds.<br><br>Après la conception du protocole, j\'ai proposé une implémentation pour les nœuds ainsi que pour le nœud central. Testé sur le terrain avec plusieurs Arduino répartis dans l\'espace, le protocole est consistant et fait preuve de résilience.',
+		},
+		source: [
+			{ name: 'git.xdrm.io/mti/opportunistic-xbee', link: 'https://git.xdrm.io/mti/opportunistic-xbee', commits: 27 },
+		],
+		doc: null,
+		commits: 0,
+	},
+
+	{
+		name: 'Nuit de l\'info (2017)',
+		client: null,
+		skills: [s.Web, s.Vue, s.Web, s.Websocket, s.Ajax, s.Html, s.Css, s.Js, s.Bash, s.Php, s.Git],
+		started_at: new Date(2017, 11, 9),
+		stopped_at: new Date(2017, 11, 10),
+		info: {
+			[Locales.EN]: 'Project as part of the <a href="https://nuitdelinfo.com/">Nuit de l\'info</a>, 2017 edition. The Nuit de l\'info brings together thousands of students around the development of a project with a common topic. Many sponsors offer challenges and prizes.<br><br>We developed together, a full-stack website with a PHP and Kotlin backend, we used Vue for the frontend. I developed the PHP part and the front-end.<br><br>At the end of the night, the project won 2 silver medals: <a href="https://www.nuitdelinfo.com/nuitinfo/defis2017:archives">"Into The While" team</a>',
+			[Locales.FR]: 'Projet dans le cadre de la <a href="https://nuitdelinfo.com/">Nuit de l\'info</a>, édition 2017. La nuit de l\'info regroupe des milliers d\'étudiants autour du développement d\'un projet avec un sujet commun. De nombreux sponsors proposent des défis et des prix.<br><br>Nous avons développé, en binôme, un site web full-stack avec un backend PHP et Kotlin, nous avons utilisé Vue pour le frontend. J\'ai développé la partie PHP et le front-end.<br><br>A l\'issue de la nuit, le projet a remporté 2 médailles d\'argent : <a href="https://www.nuitdelinfo.com/nuitinfo/defis2017:archives">équipe "Into The While"</a>',
+		},
+		source: [
+			{ name: 'git.xdrm.io/ndi-2018/main', link: 'https://git.xdrm.io/ndi-2018/main', commits: 229 },
+		],
+		doc: null,
+		commits: 0,
+	},
 
 
 ];