feat: translate skill tags

src/components/SkillPicker.vue

@@ -8,7 +8,7 @@
 					<SkillCard v-for='(t) of tags'
 						:key='t'
 						:active='t == tag'
-						:folder='t'
+						:folder='$t(tagLabel(t))'
 						@pick='onTag(t, $event)'/>
 				</section>
 
@@ -49,7 +49,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import SkillCard from './SkillCard.vue';
-import { tID } from '@/model/skills';
+import { tID, tTag } from '@/model/skills';
 import { Project } from '@/model/projects';
 import * as skills from '@/service/skills';
 import * as projects from '@/service/projects';
@@ -62,7 +62,7 @@ interface Details {
 	text: string;
 }
 
-const DEFAULT_TAG = 'all';
+const DEFAULT_TAG = tTag.All;
 
 @Component({
 	components: {
@@ -79,13 +79,31 @@ export default class SkillPicker extends Vue {
 	private filtered: tID[] = [];
 
 	// available categories (tags)
-	private tags: string[] = [DEFAULT_TAG, ...skills.tags()];
+	private tags: tTag[] = [DEFAULT_TAG, ...skills.tags()];
 	// currently selected tag
-	private tag: string = 'web';
+	private tag: tTag = tTag.Web;
 
 	// details section when a skill is selected
 	private details: Details|null = null;
 
+	// returns the label for a tag
+	protected tagLabel(t: tTag): string {
+		switch(t){
+			case tTag.All:          return 'tag.all';
+			case tTag.Web:          return 'tag.web';
+			case tTag.Storage:      return 'tag.storage';
+			case tTag.UI:           return 'tag.ui';
+			case tTag.System:       return 'tag.system';
+			case tTag.Mobile:       return 'tag.mobile';
+			case tTag.Network:      return 'tag.network';
+			case tTag.IoT:          return 'tag.iot';
+			case tTag.Organization: return 'tag.organization';
+			case tTag.Language:     return 'tag.language';
+			case tTag.Human:        return 'tag.human';
+			case tTag.Other:        return 'tag.other';
+		}
+	}
+
 	// 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.
@@ -113,17 +131,12 @@ export default class SkillPicker extends Vue {
 		this.select(id, !picked);
 	}
 
-	protected onTag(t: string, picked: boolean) {
+	protected onTag(t: tTag, picked: boolean) {
 		if ( picked ) { // select
 			this.tag = t;
 			this.filterByTag();
 			return;
 		}
-		if ( !picked && t == this.tag ) { // back to default
-			this.tag = DEFAULT_TAG;
-			this.filterByTag();
-			return;
-		}
 	}
 
 	protected browse() {

src/locales/en.json

@@ -12,5 +12,19 @@
 	"timeline.title": "Timeline of projects featuring",
 	"timeline.back": "Change skill",
 
+
+	"tag.all": "All",
+	"tag.web": "Web",
+	"tag.storage": "Storage",
+	"tag.ui": "UI/UX",
+	"tag.system": "System",
+	"tag.mobile": "Mobile",
+	"tag.network": "Network",
+	"tag.iot": "IoT",
+	"tag.organization": "Organization",
+	"tag.language": "Language",
+	"tag.human": "Human",
+	"tag.other": "Other",
+
 	"end": ""
 }

src/locales/fr.json

@@ -12,5 +12,18 @@
 	"timeline.title": "Chronologie des projets avec",
 	"timeline.back": "Choisir compétence",
 
+	"tag.all": "Tout",
+	"tag.web": "Web",
+	"tag.storage": "Stockage",
+	"tag.ui": "UI/UX",
+	"tag.system": "Système",
+	"tag.mobile": "Mobile",
+	"tag.network": "Réseau",
+	"tag.iot": "IoT",
+	"tag.organization": "Organisation",
+	"tag.language": "Langage",
+	"tag.human": "Humain",
+	"tag.other": "Autre",
+
 	"end": ""
 }

src/model/skills.ts

@@ -46,11 +46,26 @@ export enum tID {
 	RnD,
 }
 
+export enum tTag {
+	All,
+	Web,
+	Storage,
+	UI,
+	System,
+	Mobile,
+	Network,
+	IoT,
+	Organization,
+	Language,
+	Human,
+	Other
+}
+
 export interface tSkill {
 	icon: string|null;
 	name: string;
 	link: string;
-	tags: string[];
+	tags: tTag[];
 	info: string;
 }
 
@@ -61,21 +76,21 @@ export const Skills: tSkills = {
 		name: 'MariaDB',
 		link: 'https://mariadb.org',
 		icon: 'skills/mariadb.svg',
-		tags: ['web', 'storage'],
+		tags: [tTag.Web, tTag.Storage],
 		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'],
+		tags: [tTag.Web, tTag.Storage],
 		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'],
+		tags: [tTag.Web, tTag.Storage],
 		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.',
 	},
 
@@ -83,35 +98,35 @@ export const Skills: tSkills = {
 		name: 'Vue <i>(.js)</i>',
 		link: 'https://vuejs.org',
 		icon: 'skills/vue.svg',
-		tags: ['web', 'UI'],
+		tags: [tTag.Web, tTag.UI],
 		info: '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.<br><br>It is my top choice when considering a web framework for rendering pages.',
 	},
 	[tID.Angular]: {
 		name: 'Angular <i>(7+)</i>',
 		link: 'https://angular.io',
 		icon: 'skills/angular.svg',
-		tags: ['web', 'UI'],
+		tags: [tTag.Web, tTag.UI],
 		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'],
+		tags: [tTag.Web],
 		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'],
+		tags: [tTag.System, tTag.Web, tTag.Mobile],
 		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'],
+		tags: [tTag.Web],
 		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.',
 	},
 
@@ -119,21 +134,21 @@ export const Skills: tSkills = {
 		name: 'WebGL',
 		link: 'https://www.khronos.org/webgl/',
 		icon: null,
-		tags: ['web'],
+		tags: [tTag.Web],
 		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'],
+		tags: [tTag.Web],
 		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'],
+		tags: [tTag.Web, tTag.Network, tTag.IoT],
 		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.',
 	},
 
@@ -141,42 +156,42 @@ export const Skills: tSkills = {
 		name: 'Docker',
 		link: 'https://docker.com',
 		icon: 'skills/docker.svg',
-		tags: ['web', 'system'],
+		tags: [tTag.Web, tTag.System],
 		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'],
+		tags: [tTag.System],
 		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'],
+		tags: [tTag.System],
 		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',
 		link: 'https://freedesktop.org/wiki/Software/systemd/',
 		icon: null,
-		tags: ['system'],
+		tags: [tTag.System],
 		info: '',
 	},
 	[tID.Git]: {
 		name: 'Git',
 		link: 'https://git-scm.com/',
 		icon: 'skills/git.svg',
-		tags: ['system', 'organization'],
+		tags: [tTag.System, tTag.Organization],
 		info: '',
 	},
 	[tID.Rpm]: {
 		name: 'RPM packaging',
 		link: 'https://rpm.org/',
 		icon: null,
-		tags: ['system'],
+		tags: [tTag.System],
 		info: '',
 	},
 
@@ -184,14 +199,14 @@ export const Skills: tSkills = {
 		name: 'Raspberry',
 		link: 'https://raspberrypi.org',
 		icon: 'skills/raspberry.svg',
-		tags: ['system', 'IoT'],
+		tags: [tTag.System, tTag.IoT],
 		info: '',
 	},
 	[tID.Arduino]: {
 		name: 'Arduino',
 		link: 'https://arduino.cc',
 		icon: 'skills/arduino.svg',
-		tags: ['system', 'IoT'],
+		tags: [tTag.System, tTag.IoT],
 		info: '',
 	},
 
@@ -199,70 +214,70 @@ export const Skills: tSkills = {
 		name: 'PHP',
 		link: 'https://www.php.net',
 		icon: 'skills/php.svg',
-		tags: ['language', 'web', 'IoT'],
+		tags: [tTag.Language, tTag.Web, tTag.IoT],
 		info: '',
 	},
 	[tID.Html]: {
 		name: 'HTML5',
 		link: 'https://www.w3.org/standards/webdesign/htmlcss',
 		icon: 'skills/html.svg',
-		tags: ['language', 'web', 'UI'],
+		tags: [tTag.Language, tTag.Web, tTag.UI],
 		info: '',
 	},
 	[tID.Css]: {
 		name: 'CSS3',
 		link: 'https://www.w3.org/standards/webdesign/htmlcss',
 		icon: 'skills/css.svg',
-		tags: ['language', 'web', 'UI'],
+		tags: [tTag.Language, tTag.Web, tTag.UI],
 		info: '',
 	},
 	[tID.Js]: {
 		name: 'Javascript',
 		link: 'http://www.ecma-international.org/publications-and-standards/standards/ecma-262/',
 		icon: 'skills/js.svg',
-		tags: ['language', 'web', 'UI'],
+		tags: [tTag.Language, tTag.Web, tTag.UI],
 		info: '',
 	},
 	[tID.Ajax]: {
 		name: 'AJAX',
 		link: 'https://www.w3schools.com/xml/ajax_intro.asp',
 		icon: null,
-		tags: ['web', 'networking'],
+		tags: [tTag.Web, tTag.Network],
 		info: '',
 	},
 	[tID.Ts]: {
 		name: 'Typescript',
 		link: 'https://www.typescript.org/',
 		icon: 'skills/ts.svg',
-		tags: ['language', 'web', 'UI'],
+		tags: [tTag.Language, tTag.Web, tTag.UI],
 		info: '',
 	},
 	[tID.C]: {
 		name: 'C (lang)',
 		link: 'https://www.open-std.org/jtc1/sc22/wg14/',
 		icon: 'skills/c.svg',
-		tags: ['language', 'system'],
+		tags: [tTag.Language, tTag.System],
 		info: '',
 	},
 	[tID.Cpp]: {
 		name: 'C++',
 		link: 'https://isocpp.org/',
 		icon: 'skills/cpp.svg',
-		tags: ['language', 'system'],
+		tags: [tTag.Language, tTag.System],
 		info: '',
 	},
 	[tID.Python]: {
 		name: 'Python',
 		link: 'https://python.org/',
 		icon: 'skills/python.svg',
-		tags: ['language', 'system'],
+		tags: [tTag.Language, tTag.System],
 		info: '',
 	},
 	[tID.Go]: {
 		name: 'Go (lang)',
 		link: 'https://go.dev',
 		icon: 'skills/go.svg',
-		tags: ['language', 'system', 'IoT', 'networking'],
+		tags: [tTag.Language, tTag.System, tTag.IoT, tTag.Network],
 		info: '',
 	},
 
@@ -270,7 +285,7 @@ export const Skills: tSkills = {
 		name: 'Qt',
 		link: 'https://qt.io',
 		icon: 'skills/qt.svg',
-		tags: ['language', 'system', 'IoT', 'networking'],
+		tags: [tTag.Language, tTag.System, tTag.IoT, tTag.Network],
 		info: '',
 	},
 
@@ -278,105 +293,105 @@ export const Skills: tSkills = {
 		name: 'Open-source',
 		link: 'https://opensource.org/',
 		icon: null,
-		tags: ['human'],
+		tags: [tTag.Human],
 		info: '',
 	},
 	[tID.Electronics]: {
 		name: 'Electronics',
 		link: 'https://en.wikipedia.org/wiki/Electronics',
 		icon: 'skills/electronics.svg',
-		tags: ['other', 'IoT'],
+		tags: [tTag.Organization, tTag.IoT],
 		info: '',
 	},
 	[tID.Web]: {
 		name: 'Web',
 		link: 'https://en.wikipedia.org/wiki/World_Wide_Web',
 		icon: null,
-		tags: ['web'],
+		tags: [tTag.Web],
 		info: '',
 	},
 	[tID.Rest]: {
 		name: 'REST',
 		link: 'https://en.wikipedia.org/wiki/Representational_state_transfer',
 		icon: null,
-		tags: ['web', 'networking'],
+		tags: [tTag.Web, tTag.Network],
 		info: '',
 	},
 	[tID.Crypto]: {
 		name: 'Security/crypto',
 		link: 'https://en.wikipedia.org/wiki/Cryptography',
 		icon: 'skills/security.svg',
-		tags: ['system', 'networking'],
+		tags: [tTag.System, tTag.Network],
 		info: '',
 	},
 	[tID.ImageProcessing]: {
 		name: 'Image processing',
 		link: 'https://en.wikipedia.org/wiki/Digital_image_processing',
 		icon: 'skills/image-processing.svg',
-		tags: ['system'],
+		tags: [tTag.System],
 		info: '',
 	},
 	[tID.AI]: {
 		name: 'Artificial Intelligence',
 		link: 'https://en.wikipedia.org/wiki/Artificial_intelligence',
 		icon: null,
-		tags: ['other'],
+		tags: [tTag.Organization],
 		info: '',
 	},
 	[tID.DeepLearning]: {
 		name: 'Deep Learning',
 		link: 'https://en.wikipedia.org/wiki/Deep_learning',
 		icon: null,
-		tags: ['other'],
+		tags: [tTag.Organization],
 		info: '',
 	},
 	[tID.NeuralNetwork]: {
 		name: 'Neural Networks',
 		link: 'https://en.wikipedia.org/wiki/Artificial_neural_network',
 		icon: null,
-		tags: ['other'],
+		tags: [tTag.Organization],
 		info: '',
 	},
 	[tID.Opti]: {
 		name: 'Program optimization',
 		link: 'https://en.wikipedia.org/wiki/Program_optimization',
 		icon: 'skills/opti.svg',
-		tags: ['system', 'networking'],
+		tags: [tTag.System, tTag.Network],
 		info: '',
 	},
 	[tID.Sockets]: {
 		name: 'Sockets',
 		link: 'https://en.wikipedia.org/wiki/Computer_network_programming',
 		icon: null,
-		tags: ['system', 'networking', 'IoT', 'web'],
+		tags: [tTag.System, tTag.Network, tTag.IoT, tTag.Web],
 		info: '',
 	},
 	[tID.Concurrency]: {
 		name: 'Concurrency',
 		link: 'https://en.wikipedia.org/wiki/Concurrent_computing',
 		icon: null,
-		tags: ['system', 'networking'],
+		tags: [tTag.System, tTag.Network],
 		info: '',
 	},
 	[tID.UIUX]: {
 		name: 'UI/UX',
 		link: 'https://en.wikipedia.org/wiki/UX',
 		icon: null,
-		tags: ['system', 'web', 'IoT'],
+		tags: [tTag.System, tTag.Web, tTag.IoT],
 		info: '',
 	},
 	[tID.Inkscape]: {
 		name: 'Inkscape',
 		link: 'https://inkscape.org/',
 		icon: 'skills/inkscape.svg',
-		tags: ['UI', 'web', 'organization'],
+		tags: [tTag.UI, tTag.Web, tTag.Organization],
 		info: '',
 	},
 	[tID.RnD]: {
 		name: 'R&D',
 		link: 'https://en.wikipedia.org/wiki/R&D',
 		icon: null,
-		tags: ['organization'],
+		tags: [tTag.Organization],
 		info: '',
 	},
 };

src/service/skills.ts

@@ -1,7 +1,7 @@
-import { tID, Skills, tSkill } from '@/model/skills';
+import { tID, Skills, tSkill, tTag } from '@/model/skills';
 
 let availCache: tID[]|null    = null;
-let tagsCache: string[]|null = null;
+let tagsCache: tTag[]|null = null;
 
 // returns available skill ids.
 export function available(): tID[] {
@@ -22,7 +22,7 @@ export function available(): tID[] {
 
 // returns the list of ids filtered by a tag. Skills NOT featuring the provided
 // tag are filtered out of the list.
-export function filtered(tag: string): tID[] {
+export function filtered(tag: tTag): tID[] {
 	if ( availCache == null ) {
 		available();
 	}
@@ -42,7 +42,7 @@ export function filtered(tag: string): tID[] {
 }
 
 // returns available tags used among skills
-export function tags(): string[] {
+export function tags(): tTag[] {
 	if ( tagsCache != null ) {
 		return tagsCache;
 	}