diff --git a/src/components/Skills.vue b/src/components/Skills.vue
new file mode 100644
index 0000000..cf37fca
--- /dev/null
+++ b/src/components/Skills.vue
@@ -0,0 +1,175 @@
+<template>
+	<div id='skills'>
+
+		<div class='skillset' v-for='(skillset, si) of skills' :key='si'>
+
+			<div class='title'>
+				{{ skillset.title.toUpperCase() }}
+			</div>
+
+			<div class='subtitle'>
+				<span v-for='keyword of skillset.keywords' :key='keyword'>{{ keyword }}</span>
+			</div>
+
+			<div class='stack'>
+				<template v-for='(skill,i) of skillset.skills'>
+					<span class='label' :key='i' v-html='skill.label'></span>
+					<span class='level' :key='i'>
+						<span :style='{ width: (skill.level*100)+"%" }'></span>
+					</span>
+				</template>
+			</div>
+
+		</div>
+
+	</div>
+</template>
+
+<script lang="ts">
+	import { Component, Vue } from 'vue-property-decorator';
+	import SkillsModel from '../model/skills';
+
+	@Component
+	export default class Skills extends Vue {
+		private skills = SkillsModel;
+	}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+	@import '../global';
+
+	#skills {
+		flex: auto 0 1;
+
+		display: flex;
+		position: relative;
+			margin: 0 5%;
+
+		flex-flow: row wrap;
+		justify-content: space-between;
+
+		.skillset {
+			flex: 30%-(2*3%);
+
+			display: flex;
+			position: relative;
+				margin: 0 3%;
+
+			flex-flow: column nowrap;
+			justify-content: flex-start;
+			align-items: center;
+
+			.title {
+				flex: auto 0 1;
+
+				display: block;
+				position: relative;
+					padding: .2em 1em;
+					margin-bottom: .2em;
+
+				font-size: 1.5rem;
+				font-weight: normal;
+
+				border-bottom: 2px solid #ccc;
+			}
+
+			.subtitle {
+				flex: auto 0 1;
+
+				display: flex;
+				position: relative;
+
+				flex-flow: row nowrap;
+				justify-content: space-between;
+				align-items: center;
+
+				color: #ccc;
+				font-size: .8rem;
+				font-weight: normal;
+
+				span{
+					padding-left: .5em;
+
+					&:not(:last-child):after{
+						content: ' / ';
+						color: #aaa;
+					}
+				}
+			}
+
+			.stack {
+				flex: auto;
+
+				display: flex;
+				position: relative;
+					margin: 1rem;
+
+				flex-flow: row wrap;
+				justify-content: space-between;
+				align-items: center;
+
+
+				.label{
+					flex: 60%;
+
+					display: inline-block;
+					position: relative;
+						padding: .2rem 0;
+
+					font-size: 1.1rem;
+					font-weight: normal;
+
+				}
+				.level{
+					flex: 40%;
+
+					display: block;
+					position: relative;
+						padding: .2rem 0;
+						height: .5rem;
+
+					border-radius: .25rem / .25rem;
+
+					overflow: hidden;
+					background-color: #e6e6e6;
+
+					@keyframes fillIn {
+						from { width: 50%; }
+					}
+
+					span {
+						display: block;
+						position: absolute;
+							top: 0;
+							left: 0;
+							width: 0;
+							height: 100%;
+
+						background-size: 100% 100%;
+
+						animation: 1s ease fillIn;
+					}
+				}
+
+
+			}
+		}
+
+		.skillset:nth-of-type(3n+1) .stack .level span{
+			@include gradient1;
+		}
+		.skillset:nth-of-type(3n+2) .stack .level span{
+			@include gradient2;
+		}
+		.skillset:nth-of-type(3n+3) .stack .level span{
+			@include gradient3;
+		}
+	}
+</style>
+<style lang="scss">
+#skills .skillset .stack .label i {
+	font-style: normal;
+	opacity: 0.3;
+}
+</style>
\ No newline at end of file
diff --git a/src/global.scss b/src/global.scss
new file mode 100644
index 0000000..735f696
--- /dev/null
+++ b/src/global.scss
@@ -0,0 +1,9 @@
+@mixin gradient1{
+	background-image: linear-gradient(to right, #7d82ff, #51a8fc);
+}
+@mixin gradient2{
+	background-image: linear-gradient(to right, #51bafc, #00dfa3);
+}
+@mixin gradient3{
+	background-image: linear-gradient(to right, #8f93ff, #ec7fef);
+}
\ No newline at end of file
diff --git a/src/model/skills.ts b/src/model/skills.ts
new file mode 100644
index 0000000..7f8dd35
--- /dev/null
+++ b/src/model/skills.ts
@@ -0,0 +1,42 @@
+export default [
+	{
+		title: 'Web',
+		keywords: [ 'languages', 'technologies' ],
+		skills: [
+			{ label: 'MariaDB', level: 0.7 },
+			{ label: 'Postgres', level: 0.5 },
+			{ label: 'MongoDB', level: 0.5 },
+			{ label: 'Vue <i>(.js)</i>', level: 0.8 },
+			{ label: 'Angular <i>(7+)</i>', level: 0.5 },
+			{ label: 'WebGL', level: 0.3 },
+			{ label: 'Audio API', level: 0.5 },
+			{ label: 'Websocket', level: 1 },
+		],
+	},
+	{
+		title: 'Sys',
+		keywords: ['languages', 'technologies'],
+		skills: [
+			{ label: 'Linux/bash', level: 1 },
+			{ label: 'docker', level: 0.8 },
+			{ label: 'systemd', level: 1 },
+			{ label: 'git', level: 0.8 },
+			{ label: 'raspberry', level: 0.8 },
+			{ label: 'arduino', level: 0.5 },
+			{ label: 'RPM packaging', level: 0.7 },
+		],
+	},
+	{
+		title: 'Misc',
+		keywords: ['frameworks', 'api', 'dependencies'],
+		skills: [
+			{ label: 'PHP', level: 0.9 },
+			{ label: 'HTML<i>/</i>CSS', level: 1 },
+			{ label: 'Javascript', level: 1 },
+			{ label: 'Typescript', level: 0.9 },
+			{ label: 'C<i>/</i>C++', level: 0.6 },
+			{ label: 'Python', level: 0.3 },
+			{ label: 'go', level: 1 },
+		],
+	},
+];