feat: add skill card title and skill picker media queries

src/components/SkillCard.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class='skill-card' ref='root' :data-active='active ? "1" : "0"' @click='onClick()'>
+	<div class='skill-card' ref='root' :data-active='active ? "1" : "0"' @click='onClick()' :title='name()'>
 		<img class='icon' :src='icon()' />
 		<span class='name'>
 			<span v-html='name()'></span>
@@ -17,10 +17,6 @@
 		// id of the skill to display (string representation)
 		@Prop(Number) readonly id: tID|undefined;
 
-		// undefined -> automatic size
-		// value     -> fixed size applied (valid css value with unit)
-		@Prop(String) readonly width: string|undefined;
-
 		// whether it has the active style
 		@Prop(Boolean) active: boolean|undefined;
 
@@ -29,13 +25,7 @@
 		// empty     -> this.id is used to fetch the skill
 		@Prop(String) folder: string|undefined;
 
-		protected mounted() {
+		protected mounted() {}
-			if( this.width == undefined ){
-				return;
-			}
-			const el = this.$refs.root as HTMLElement;
-			el.style.width = this.width;
-		}
 
 		protected icon(): string {
 			const unknown = () => require('../assets/skills/unknown.svg');

src/components/SkillPicker.vue

@@ -8,7 +8,6 @@
 					:key='t'
 					:active='t == tag'
 					:folder='t'
-					width='18rem'
 					@pick='onTag(t, $event)'/>
 			</section>
 
@@ -18,7 +17,6 @@
 					v-show='filtered.indexOf(id) >= 0'
 					:id='id'
 					:active='id == sel'
-					width='18rem'
 					@pick='onPick(id, $event)'/>
 			</section>
 
@@ -199,6 +197,8 @@
 
 		background: linear-gradient(0, #564ba4, #745cfc);
 
+		font-size: 1rem;
+
 		.container {
 			display: flex;
 			position: relative;
@@ -231,6 +231,7 @@
 
 		.skill-card {
 			margin: .3em 0;
+			width: 12em;
 		}
 	}
 
@@ -249,6 +250,7 @@
 
 		.skill-card {
 			margin: .3em 0;
+			width: 12em;
 		}
 	}
 
@@ -310,6 +312,7 @@
 
 			font-size: 1.7em;
 			font-weight: 500;
+			text-align: justify;
 			color: #c1c1c1;
 			padding: 1em;
 
@@ -359,4 +362,23 @@
 		}
 	}
 
+	// width > 1800px : center the container
+	@media screen and (min-width: 1800px) {
+		.container {
+			left: calc( 100vw/2 - 1800px/2 );
+			max-width: 1800px;
+		}
+	}
+
+	// screen less than 1400 p
+	@media screen and (max-width: 1400px) {
+		#skill-picker {
+			font-size: 1vw;
+
+			.skill-card {
+				width: 18vw;
+			}
+		}
+	}
+
 </style>

src/model/skills.ts

@@ -62,21 +62,21 @@ export const Skills: tSkills = {
 		link: 'https://mariadb.org',
 		icon: 'skills/mariadb.svg',
 		tags: ['web', 'storage'],
-		info: "",
+		info: "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.",
 	},
 	[tID.Postgres]: {
 		name: 'PostgreSQL',
 		link: 'https://postgresql.org',
 		icon: 'skills/postgres.svg',
 		tags: ['web', 'storage'],
-		info: "",
+		info: "My main choice of dbms when using sql orfor relational databases. Had some experience with it mainly with go services with docker.",
 	},
 	[tID.Mongo]: {
 		name: 'MongoDB',
 		link: 'https://mongodb.com',
 		icon: 'skills/mongo.svg',
 		tags: ['web', 'storage'],
-		info: "",
+		info: "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.",
 	},
 
 	[tID.Vue]: {
@@ -91,28 +91,28 @@ export const Skills: tSkills = {
 		link: 'https://angular.io',
 		icon: 'skills/angular.svg',
 		tags: ['web', 'UI'],
-		info: "",
+		info: "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."
 	},
 	[tID.Parcel]: {
 		name: 'Parcel',
 		link: 'https://parceljs.org/',
 		icon: 'skills/parcel.svg',
 		tags: ['web'],
-		info: "",
+		info: "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.",
 	},
 	[tID.Cordova]: {
 		name: 'Apache Cordova',
 		link: 'https://cordova.apache.org/',
 		icon: 'skills/cordova.svg',
 		tags: ['system', 'web', 'mobile'],
-		info: "",
+		info: "I used it often to transform single-page applications 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\".",
 	},
 	[tID.Webpack]: {
 		name: 'Webpack',
 		link: 'https://webpack.js.org/',
 		icon: 'skills/webpack.svg',
 		tags: ['web'],
-		info: "",
+		info: "... 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.",
 	},
 
 	[tID.WebGL]: {
@@ -120,21 +120,21 @@ export const Skills: tSkills = {
 		link: 'https://www.khronos.org/webgl/',
 		icon: null,
 		tags: ['web'],
-		info: "",
+		info: "I used it during my graduation years, the potential is great but I need to find a time to explore what's new.",
 	},
 	[tID.AudioAPI]: {
 		name: 'Audio API',
 		link: 'https://webaudio.github.io/web-audio-api/',
 		icon: null,
 		tags: ['web'],
-		info: "",
+		info: "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.",
 	},
 	[tID.Websocket]: {
 		name: 'Websocket',
 		link: 'https://tools.ietf.org/html/rfc6455',
 		icon: null,
 		tags: ['web', 'networking', 'IoT'],
-		info: "",
+		info: "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.",
 	},
 
 	[tID.Docker]: {
@@ -142,21 +142,21 @@ export const Skills: tSkills = {
 		link: 'https://docker.com',
 		icon: 'skills/docker.svg',
 		tags: ['web', 'system'],
-		info: "",
+		info: "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. I am learning docker a bit more every time I use it. It is often coupled with docker-compose in my projects.",
 	},
 	[tID.Bash]: {
 		name: 'bash',
 		link: 'https://www.gnu.org/software/bash/',
 		icon: null,
 		tags: ['system'],
-		info: "",
+		info: "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.",
 	},
 	[tID.Linux]: {
 		name: 'GNU/Linux',
 		link: 'https://www.linux.org',
 		icon: 'skills/linux.svg',
 		tags: ['system'],
-		info: "",
+		info: "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.",
 	},
 	[tID.Systemd]: {
 		name: 'systemd',