diff --git a/src/components/SkillCard.vue b/src/components/SkillCard.vue
index f68f999..64612bb 100644
--- a/src/components/SkillCard.vue
+++ b/src/components/SkillCard.vue
@@ -9,12 +9,13 @@
 
 <script lang="ts">
 	import { Component, Prop, Vue } from 'vue-property-decorator';
-	import { tID, Skills } from '@/model/skills';
+	import { tID } from '@/model/skills';
+	import * as skills from '@/service/skills';
 
 	@Component({})
 	export default class SkillCard extends Vue {
 		// id of the skill to display (string representation)
-		@Prop(String) readonly id: string|undefined;
+		@Prop(Number) readonly id: tID|undefined;
 
 		// undefined -> automatic size
 		// value     -> fixed size applied (valid css value with unit)
@@ -23,7 +24,9 @@
 		// whether it has the active style
 		@Prop(Boolean) active: boolean|undefined;
 
-		// whether id is a folder name to display
+		// folder name to display instead of a skill to fetch
+		// not empty -> used as displayed folder name
+		// empty     -> this.id is used to fetch the skill
 		@Prop(String) folder: string|undefined;
 
 		protected mounted() {
@@ -34,39 +37,39 @@
 			el.style.width = this.width;
 		}
 
-		private tid(): tID|null {
-			if( this.id == undefined ){
-				return null;
-			}
-			const id = parseInt(this.id!) as tID;
-			if( Skills[id] == undefined ){
-				return null;
-			}
-			return id;
-		}
-
 		protected icon(): string {
-			if( this.folder == '1' ){
+			const unknown = () => require('../assets/skills/unknown.svg');
+
+			if( this.id == undefined ){
+				return unknown();
+			}
+
+			if( this.folder != undefined ){
 				return require('../assets/skills/folder.svg');
 			}
-			let icon: string|null = null;
-			if( this.tid() != undefined ){
-				icon = Skills[this.tid()!].icon;
+			const skill = skills.get(this.id);
+			if( skill == null ){
+				return unknown();
 			}
-			if( icon == null ){
-				return require('../assets/skills/unknown.svg');
+
+			if( skill.icon == null ){
+				return unknown();
 			}
-			return require(`../assets/${icon}`);
+			return require(`../assets/${skill.icon}`);
 		}
 
 		protected name(): string {
-			if( this.folder == '1' ){
-				return this.id!;
+			if( this.folder != undefined ){
+				return this.folder;
 			}
-			if( this.tid() != undefined ){
-				return Skills[this.tid()!].name!;
+			if( this.id == undefined ){
+				return '?';
 			}
-			return '?';
+			const skill = skills.get(this.id);
+			if( skill == null ){
+				return '';
+			}
+			return skill.name;
 		}
 
 		private onClick(e: MouseEvent) {
diff --git a/src/service/projects.ts b/src/service/projects.ts
new file mode 100644
index 0000000..a39bb21
--- /dev/null
+++ b/src/service/projects.ts
@@ -0,0 +1,15 @@
+import { Projects, Project } from '@/model/projects';
+import { tID } from '@/model/skills';
+
+// returns all projects featuring a specified skill. Keeping the order of the
+// projects model
+export function bySkill(skill: tID): Project[] {
+	const filtered: Project[] = [];
+
+	for( const proj of Projects ){
+		if( proj.skills.indexOf(skill) >= 0 ){
+			filtered.push(proj);
+		}
+	}
+	return filtered;
+}
\ No newline at end of file
diff --git a/src/service/skills.ts b/src/service/skills.ts
new file mode 100644
index 0000000..8a106e4
--- /dev/null
+++ b/src/service/skills.ts
@@ -0,0 +1,77 @@
+import { tID, Skills, tSkill } from '@/model/skills';
+
+let available_cache: tID[]|null    = null;
+let tags_cache:      string[]|null = null;
+
+// returns available skill ids.
+export function available(): tID[] {
+	if( available_cache != null ){
+		return available_cache;
+	}
+
+	available_cache = [];
+	for( const str_id in Skills ){
+		const id = str2ID(str_id)
+		if( id == null ){
+			continue;
+		}
+		available_cache.push(id);
+	}
+	return available_cache;
+}
+
+// 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[] {
+	if( available_cache == null ){
+		available();
+	}
+
+	const filtered = [];
+	for( const id of available_cache! ){
+		const skill = get(id);
+		if( skill == null ){
+			continue;
+		}
+		if( skill.tags.indexOf(tag) >= 0 ){
+			filtered.push(id);
+			continue;
+		}
+	}
+	return filtered;
+}
+
+// returns available tags used among skills
+export function tags(): string[] {
+	if( tags_cache != null ){
+		return tags_cache;
+	}
+
+	tags_cache = [];
+	for( const skill of Object.values(Skills) ){
+		for( const tag of skill.tags ){
+			if( tags_cache.indexOf(tag) < 0 ){
+				tags_cache.push(tag);
+			}
+		}
+	}
+
+	return tags_cache;
+}
+
+// returns a skill from its id
+export function get(id: tID): tSkill|null {
+	if( Skills[id] == undefined ){
+		return null;
+	}
+	return Skills[id];
+}
+
+// converts a string to a skill id
+export function str2ID(str: string): tID|null {
+	const id = parseInt(str) as tID;
+	if( Skills[id] == undefined ){
+		return null;
+	}
+	return id;
+}
\ No newline at end of file