feat: add skills
This commit is contained in:
parent
8c4f510c12
commit
3a946fa4c3
|
|
@ -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>
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
@ -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 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
Loading…
Reference in New Issue