From 60345a5f263374eba71012598667c8f017beb2bd Mon Sep 17 00:00:00 2001
From: xdrm-brackets <xdrm.brackets.dev@gmail.com>
Date: Wed, 5 Oct 2022 11:39:39 +0200
Subject: [PATCH] feat: create the skill details section

---
 src/components/SkillPicker.vue | 213 +++++++++++++++++++++++----------
 src/components/Timeline.vue    |   3 +-
 src/model/skills.ts            |  48 +++++++-
 3 files changed, 199 insertions(+), 65 deletions(-)

diff --git a/src/components/SkillPicker.vue b/src/components/SkillPicker.vue
index 586bb1a..ecc4393 100644
--- a/src/components/SkillPicker.vue
+++ b/src/components/SkillPicker.vue
@@ -6,9 +6,8 @@
 			<section class='categories'>
 				<SkillCard v-for='(t) of tags'
 					:key='t'
-					:id='t'
 					:active='t == tag'
-					folder='1'
+					:folder='t'
 					width='18rem'
 					@pick='onTag(t, $event)'/>
 			</section>
@@ -16,13 +15,28 @@
 			<section class='skills'>
 				<SkillCard v-for='(id) of ids'
 					:key='id'
-					v-show='hide.indexOf(id) < 0'
+					v-show='filtered.indexOf(id) >= 0'
 					:id='id'
 					:active='id == sel'
 					width='18rem'
 					@pick='onPick(id, $event)' />
 			</section>
 
+			<section class='details' v-if='details != null'>
+				<img :src='details.icon'/>
+				<h1 v-html='details.title'></h1>
+				<h2>Featured in <b>{{ details.projects.length }}</b> {{ details.projects.length > 1 ? 'projects' : 'project' }}</h2>
+				<h3>
+					<template v-for='(proj, i) of details.projects'>
+						<a :key='proj.name' :href='"#p-" + proj.name'>
+							{{ proj.name }}
+						</a>
+						<span :key='proj.name'>, </span>
+					</template>
+				</h3>
+				<p v-html='details.text'></p>
+			</section>
+
 		</div>
 
 		<input type='button' v-show='this.sel != null' value='Browse projects' @click='browse()'/>
@@ -33,7 +47,17 @@
 <script lang="ts">
 	import { Component, Vue } from 'vue-property-decorator';
 	import SkillCard from './SkillCard.vue';
-	import { tID, Skills } from '@/model/skills';
+	import { tID } from '@/model/skills';
+	import { Project } from '@/model/projects';
+	import * as skills from '@/service/skills';
+	import * as projects from '@/service/projects';
+
+	interface Details {
+		icon:     string|null;
+		title:    string;
+		projects: Project[];
+		text:     string;
+	}
 
 	@Component({
 		components: {
@@ -42,52 +66,38 @@
 	})
 	export default class SkillPicker extends Vue {
 		// list of available skills
-		readonly ids: string[] = Object.keys(Skills);
+		readonly ids: tID[] = skills.available();
 		// currently selected skill
-		private sel: string|null = tID.Vue.toString();
+		private sel: tID|null = tID.Vue;
 
-		// list of ids to hide according to the current tag
-		private hide: string[] = [];
+		// list of ids to display according to the current tag
+		private filtered: tID[] = [];
 
 		// available categories (tags)
-		private tags: string[] = [];
+		private tags: string[] = skills.tags();
 		// currently selected tag
 		private tag: string|null = "web";
 
+		// details section when a skill is selected
+		private details: Details|null = null;
+
 		private mounted() {
-			this.tags = this.fetchTags();
 			this.filterByTag();
+			this.loadDetails(this.sel!);
 		}
 
-		private fetchTags(): string[] {
-			const tags: string[] = [];
-
-			for( const sid of this.ids ){
-				const id    = parseInt(sid) as tID;
-				const skill = Skills[id];
-				if( skill == undefined ){
-					continue;
-				}
-				for( const tag of skill.tags ){
-					if( tags.indexOf(tag) < 0 ){
-						tags.push(tag);
-					}
-				}
-			}
-			return tags;
-		}
-
-		private onPick(id: string, picked: boolean){
+		protected onPick(id: tID, picked: boolean){
 			if( picked ){ // select
 				this.sel = id;
+				this.loadDetails(id);
 				return;
 			}
-			if( !picked && id == this.sel ){ // deselect
-				this.sel = null;
-				return;
-			}
+			// deselect
+			this.sel = null;
+			this.details = null;
 		}
-		private onTag(t: string, picked: boolean){
+
+		protected onTag(t: string, picked: boolean){
 			if( picked ){ // select
 				this.tag = t;
 				this.filterByTag();
@@ -103,42 +113,46 @@
 		// apply filter by tag
 		private filterByTag(){
 			const tag = this.tag;
-
-			// no folder selected -> hide everything
-			if( tag == null || this.tags.indexOf(tag) < 0 ){
+			if( tag == null ){
 				this.tag = null;
-				this.hide = this.ids;
-
-				// deselect if selection has been filtered out
-				if( this.sel != null && this.hide.indexOf(this.sel) >= 0 ){
-					this.sel = null;
-				}
-				return;
+				this.filtered = [];
+			} else {
+				this.filtered = skills.filtered(tag);
 			}
 
-			// clear filter
-			this.hide = [];
-
-			for( const sid of this.ids ){
-				const id    = parseInt(sid) as tID;
-				const skill = Skills[id];
-				if( skill == undefined ){
-					continue;
-				}
-				if( skill.tags.indexOf(tag) < 0 ){
-					this.hide.push(sid);
-					continue;
-				}
-			}
 			// deselect if selection has been filtered out
-			if( this.sel != null && this.hide.indexOf(this.sel) >= 0 ){
+			if( this.sel != null && this.filtered.indexOf(this.sel) < 0 ){
 				this.sel = null;
 			}
 		}
 
-		protected browse(){
-			document.querySelector("#timeline")!.scrollIntoView();
+		// loads details about a skill
+		private loadDetails(id: tID){
+			const skill = skills.get(id);
+			if( skill == null ){
+				this.details = null;
+				return;
+			}
+
+			let icon: string|null = null;
+			if( skill.icon != null ){
+				icon = require(`../assets/${skill.icon}`);
+			}
+			this.details = {
+				icon:     icon,
+				title:    skill.name,
+				projects: projects.bySkill(id),
+				text:     skill.info
+			};
 		}
+
+		protected browse(){
+			const el = document.querySelector('#timeline');
+			if( el != null ){
+				el.scrollIntoView();
+			}
+		}
+
 	}
 
 </script>
@@ -177,9 +191,10 @@
 	}
 
 	.categories {
+		flex: 20em 0 0;
+
 		display: flex;
 			height: 100%;
-			width: 20em;
 
 		flex-flow: column nowrap;
 		align-items: flex-start;
@@ -194,9 +209,10 @@
 	}
 
 	.skills {
+		flex: 20em 0 0;
+
 		display: flex;
 			height: 100%;
-			width: 20em;
 
 		flex-flow: column nowrap;
 		align-items: flex-start;
@@ -210,6 +226,77 @@
 		}
 	}
 
+	.details {
+		flex: auto;
+
+		display: flex;
+			height: 100%;
+
+		margin: auto;
+
+		flex-flow: column nowrap;
+		align-items: center;
+		justify-content: flex-start;
+
+		img {
+			display: block;
+			flex: 8em 0 0;
+		}
+
+		h1 {
+			font-size: 4em;
+			color: #cacaca;
+
+			i { display: none; }
+		}
+
+		h2 {
+			margin-top: .3em;
+
+			font-size: 1.8em;
+			color: #616c7c;
+			font-weight: 400;
+
+			b { color: #fff; }
+		}
+
+		h3 {
+			margin-top: .8em;
+
+			font-size: 1.3em;
+			font-weight: 400;
+			color: #616c7c;
+
+			& > span:last-child {
+				display: none;
+			}
+		}
+
+		p {
+
+			flex: auto 0 1;
+
+			display: block;
+			position: relative;
+			margin: 0 2em;
+			margin-top: 2em;
+			margin-bottom: 4rem;
+
+			font-size: 1.7em;
+			font-weight: 500;
+			color: #c1c1c1;
+			padding: 1em;
+
+			background: #323841;
+			border: .1rem solid #45454b;
+			border-radius: .4em / .4em;
+
+			overflow: hidden;
+			overflow-y: auto;
+		}
+
+	}
+
 	input {
 		display: block;
 		position: absolute;
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 92dd003..02f186e 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -5,7 +5,8 @@
 		</div>
 
 		<template class='project' v-for='(proj) of projects'>
-			<div :key="'start-'+proj.name" class='start'>
+			<!-- id is used for navigation -->
+			<div :key="'start-'+proj.name" class='start' :id='"p-" + proj.name'>
 				{{ proj.started_at | short_date }}
 			</div>
 
diff --git a/src/model/skills.ts b/src/model/skills.ts
index 6eebd73..3d7ae07 100644
--- a/src/model/skills.ts
+++ b/src/model/skills.ts
@@ -46,11 +46,12 @@ export enum tID {
 	RnD,
 }
 
-interface tSkill {
+export interface tSkill {
 	icon: string|null;
 	name: string;
 	link: string;
 	tags: string[];
+	info: string;
 }
 
 export type tSkills = { [id in tID]: tSkill };
@@ -61,18 +62,21 @@ export const Skills: tSkills = {
 		link: 'https://mariadb.org',
 		icon: 'skills/mariadb.svg',
 		tags: ['web', 'storage'],
+		info: "",
 	},
 	[tID.Postgres]: {
 		name: 'PostgreSQL',
 		link: 'https://postgresql.org',
 		icon: 'skills/postgres.svg',
 		tags: ['web', 'storage'],
+		info: "",
 	},
 	[tID.Mongo]: {
 		name: 'MongoDB',
 		link: 'https://mongodb.com',
 		icon: 'skills/mongo.svg',
 		tags: ['web', 'storage'],
+		info: "",
 	},
 
 	[tID.Vue]: {
@@ -80,30 +84,35 @@ export const Skills: tSkills = {
 		link: 'https://vuejs.org',
 		icon: 'skills/vue.svg',
 		tags: ['web', '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'],
+		info: "",
 	},
 	[tID.Parcel]: {
 		name: 'Parcel',
 		link: 'https://parceljs.org/',
 		icon: 'skills/parcel.svg',
 		tags: ['web'],
+		info: "",
 	},
 	[tID.Cordova]: {
 		name: 'Apache Cordova',
 		link: 'https://cordova.apache.org/',
 		icon: 'skills/cordova.svg',
 		tags: ['system', 'web', 'mobile'],
+		info: "",
 	},
 	[tID.Webpack]: {
 		name: 'Webpack',
 		link: 'https://webpack.js.org/',
 		icon: 'skills/webpack.svg',
 		tags: ['web'],
+		info: "",
 	},
 
 	[tID.WebGL]: {
@@ -111,18 +120,21 @@ export const Skills: tSkills = {
 		link: 'https://www.khronos.org/webgl/',
 		icon: null,
 		tags: ['web'],
+		info: "",
 	},
 	[tID.AudioAPI]: {
 		name: 'Audio API',
 		link: 'https://webaudio.github.io/web-audio-api/',
 		icon: null,
 		tags: ['web'],
+		info: "",
 	},
 	[tID.Websocket]: {
 		name: 'Websocket',
 		link: 'https://tools.ietf.org/html/rfc6455',
 		icon: null,
 		tags: ['web', 'networking', 'IoT'],
+		info: "",
 	},
 
 	[tID.Docker]: {
@@ -130,36 +142,42 @@ export const Skills: tSkills = {
 		link: 'https://docker.com',
 		icon: 'skills/docker.svg',
 		tags: ['web', 'system'],
+		info: "",
 	},
 	[tID.Bash]: {
 		name: 'bash',
 		link: 'https://www.gnu.org/software/bash/',
 		icon: null,
 		tags: ['system'],
+		info: "",
 	},
 	[tID.Linux]: {
 		name: 'GNU/Linux',
 		link: 'https://www.linux.org',
 		icon: 'skills/linux.svg',
 		tags: ['system'],
+		info: "",
 	},
 	[tID.Systemd]: {
 		name: 'systemd',
 		link: 'https://freedesktop.org/wiki/Software/systemd/',
 		icon: null,
 		tags: ['system'],
+		info: "",
 	},
 	[tID.Git]: {
 		name: 'Git',
 		link: 'https://git-scm.com/',
 		icon: 'skills/git.svg',
 		tags: ['system', 'organization'],
+		info: "",
 	},
 	[tID.Rpm]: {
 		name: 'RPM packaging',
 		link: 'https://rpm.org/',
 		icon: null,
 		tags: ['system'],
+		info: "",
 	},
 
 	[tID.RaspBerry]: {
@@ -167,12 +185,14 @@ export const Skills: tSkills = {
 		link: 'https://raspberrypi.org',
 		icon: 'skills/raspberry.svg',
 		tags: ['system', 'IoT'],
+		info: "",
 	},
 	[tID.Arduino]: {
 		name: 'Arduino',
 		link: 'https://arduino.cc',
 		icon: 'skills/arduino.svg',
 		tags: ['system', 'IoT'],
+		info: "",
 	},
 
 	[tID.Php]: {
@@ -180,60 +200,70 @@ export const Skills: tSkills = {
 		link: 'https://www.php.net',
 		icon: 'skills/php.svg',
 		tags: ['language', 'web', 'IoT'],
+		info: "",
 	},
 	[tID.Html]: {
 		name: 'HTML5',
 		link: 'https://www.w3.org/standards/webdesign/htmlcss',
 		icon: 'skills/html.svg',
 		tags: ['language', 'web', 'UI'],
+		info: "",
 	},
 	[tID.Css]: {
 		name: 'CSS3',
 		link: 'https://www.w3.org/standards/webdesign/htmlcss',
 		icon: 'skills/css.svg',
 		tags: ['language', 'web', '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'],
+		info: "",
 	},
 	[tID.Ajax]: {
 		name: 'AJAX',
 		link: 'https://www.w3schools.com/xml/ajax_intro.asp',
 		icon: null,
 		tags: ['web', 'networking'],
+		info: "",
 	},
 	[tID.Ts]: {
 		name: 'Typescript',
 		link: 'https://www.typescript.org/',
 		icon: 'skills/ts.svg',
 		tags: ['language', 'web', 'UI'],
+		info: "",
 	},
 	[tID.C]: {
 		name: 'C (lang)',
 		link: 'https://www.open-std.org/jtc1/sc22/wg14/',
 		icon: 'skills/c.svg',
 		tags: ['language', 'system'],
+		info: "",
 	},
 	[tID.Cpp]: {
 		name: 'C++',
 		link: 'https://isocpp.org/',
 		icon: 'skills/cpp.svg',
 		tags: ['language', 'system'],
+		info: "",
 	},
 	[tID.Python]: {
 		name: 'Python',
 		link: 'https://python.org/',
 		icon: 'skills/python.svg',
 		tags: ['language', 'system'],
+		info: "",
 	},
 	[tID.Go]: {
 		name: 'Go (lang)',
 		link: 'https://go.dev',
 		icon: 'skills/go.svg',
 		tags: ['language', 'system', 'IoT', 'networking'],
+		info: "",
 	},
 
 	[tID.Qt]: {
@@ -241,6 +271,7 @@ export const Skills: tSkills = {
 		link: 'https://qt.io',
 		icon: 'skills/qt.svg',
 		tags: ['language', 'system', 'IoT', 'networking'],
+		info: "",
 	},
 
 	[tID.OpenSource]: {
@@ -248,89 +279,104 @@ export const Skills: tSkills = {
 		link: 'https://opensource.org/',
 		icon: null,
 		tags: ['human'],
+		info: "",
 	},
 	[tID.Electronics]: {
 		name: 'Electronics',
 		link: 'https://en.wikipedia.org/wiki/Electronics',
 		icon: 'skills/electronics.svg',
 		tags: ['other', 'IoT'],
+		info: "",
 	},
 	[tID.Web]: {
 		name: 'Web',
 		link: 'https://en.wikipedia.org/wiki/World_Wide_Web',
 		icon: null,
 		tags: ['web'],
+		info: "",
 	},
 	[tID.Rest]: {
 		name: 'REST',
 		link: 'https://en.wikipedia.org/wiki/Representational_state_transfer',
 		icon: null,
 		tags: ['web', 'networking'],
+		info: "",
 	},
 	[tID.Crypto]: {
 		name: 'Security/crypto',
 		link: 'https://en.wikipedia.org/wiki/Cryptography',
 		icon: 'skills/security.svg',
 		tags: ['system', 'networking'],
+		info: "",
 	},
 	[tID.ImageProcessing]: {
 		name: 'Image processing',
 		link: 'https://en.wikipedia.org/wiki/Digital_image_processing',
 		icon: 'skills/image-processing.svg',
 		tags: ['system'],
+		info: "",
 	},
 	[tID.AI]: {
 		name: 'Artificial Intelligence',
 		link: 'https://en.wikipedia.org/wiki/Artificial_intelligence',
 		icon: null,
 		tags: ['other'],
+		info: "",
 	},
 	[tID.DeepLearning]: {
 		name: 'Deep Learning',
 		link: 'https://en.wikipedia.org/wiki/Deep_learning',
 		icon: null,
 		tags: ['other'],
+		info: "",
 	},
 	[tID.NeuralNetwork]: {
 		name: 'Neural Networks',
 		link: 'https://en.wikipedia.org/wiki/Artificial_neural_network',
 		icon: null,
 		tags: ['other'],
+		info: "",
 	},
 	[tID.Opti]: {
 		name: 'Program optimization',
 		link: 'https://en.wikipedia.org/wiki/Program_optimization',
 		icon: 'skills/opti.svg',
 		tags: ['system', 'networking'],
+		info: "",
 	},
 	[tID.Sockets]: {
 		name: 'Sockets',
 		link: 'https://en.wikipedia.org/wiki/Computer_network_programming',
 		icon: null,
 		tags: ['system', 'networking', 'IoT', 'web'],
+		info: "",
 	},
 	[tID.Concurrency]: {
 		name: 'Concurrency',
 		link: 'https://en.wikipedia.org/wiki/Concurrent_computing',
 		icon: null,
 		tags: ['system', 'networking'],
+		info: "",
 	},
 	[tID.UIUX]: {
 		name: 'UI/UX',
 		link: 'https://en.wikipedia.org/wiki/UX',
 		icon: null,
 		tags: ['system', 'web', 'IoT'],
+		info: "",
 	},
 	[tID.Inkscape]: {
 		name: 'Inkscape',
 		link: 'https://inkscape.org/',
 		icon: 'skills/inkscape.svg',
 		tags: ['UI', 'web', 'organization'],
+		info: "",
 	},
 	[tID.RnD]: {
 		name: 'R&D',
 		link: 'https://en.wikipedia.org/wiki/R&D',
 		icon: null,
 		tags: ['organization'],
+		info: "",
 	},
 };