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