feat: create the skill details section
This commit is contained in:
parent
e9fdc3a3d4
commit
60345a5f26
GPG Key ID:
D75243CA236D825E
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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: "",
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue