feat: use skill cards in the timeline

src/components/Timeline.vue

@@ -17,7 +17,7 @@
 
 			<img :key="'skill-icon-'+proj.name" class='skill-icon' src='../assets/timeline/skills.svg' />
 			<div :key="'skillset-'+proj.name" class='skillset'>
-				<span v-for='(skill) of proj.skills' :key='skill' v-html='skills[skill].name'></span>
+				<SkillCard v-for='(id) of proj.skills' :key='id' :id='id'/>
 			</div>
 
 			<img :key="'desc-icon-'+proj.name" class='desc-icon' src='../assets/timeline/info.svg' />
@@ -53,8 +53,10 @@
 
 <script lang="ts">
 	import { Component, Vue } from 'vue-property-decorator';
-	import { Projects, Project } from '../model/projects';
-	import { Skills, tSkills } from '../model/skills';
+	import SkillCard from './SkillCard.vue';
+	import { Project } from '../model/projects';
+	import { tID } from '../model/skills';
+	import * as projects from '../service/projects';
 
 	function pluralize(n: number, s: string): string {
 		n = Math.floor(Math.abs(n));
@@ -76,6 +78,9 @@
 	}
 
 	@Component({
+		components: {
+			SkillCard,
+		},
 		filters: {
 			short_date: function(date: Date): string {
 				return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
@@ -114,11 +119,9 @@
 		}
 	})
 	export default class Timeline extends Vue {
-		private projects: Project[] = Projects;
-		private skills:   tSkills   = Skills;
+		private projects: Project[] = [];
 
 		private mounted() {
-
 			document.body.addEventListener('scroll', this.onScroll, { passive: true });
 		}
 
@@ -278,17 +281,10 @@
 			justify-content: flex-start;
 			align-items: flex-start;
 
-			span {
-				font-size: .8em;
-				padding: .4em .6em;
+			.skill-card {
 				margin-right: .4em;
 				margin-bottom: .4em;
 
-				color: #fff;
-				background: #34343b;
-
-				border-radius: .4em / .4em;
-
 				user-select: none;
 			}
 		}