ADD resume-material-blkue
This commit is contained in:
salomonelli
parent
51b5d80a53
commit
bbffabb88c
393
src/components/resume-material-blue.vue
Normal file
393
src/components/resume-material-blue.vue
Normal file
@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<div class="resume" id="material-blue">
|
||||
<meta name="name" content="material blue" />
|
||||
<meta name="author" content="pubkey" link="https://github.com/pubkey" />
|
||||
<div class="leftCol m_box">
|
||||
<div class="heading" id="myselfpic">
|
||||
<div class="title">
|
||||
<h2>{{person.name.first}} {{person.name.last}}</h2>
|
||||
<div>{{person.position}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<i class="fa fa-user"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<ul>
|
||||
<li>Born {{person.birth.year}} in {{person.birth.location}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<i class="fa fa-location-arrow"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<ul>
|
||||
<li>{{person.contact.street}}</li>
|
||||
<li>{{person.contact.city}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<a :href="'tel:'+person.contact.phone">
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<i class="fa fa-phone"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<h4>{{person.contact.phone}}</h4>
|
||||
<span>mobil</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a :href="'mailto:'+person.contact.email">
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<h4>{{person.contact.email}}</h4>
|
||||
<span>private</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a :href="'https://github.com/'+person.contact.github" target="_blank">
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<h4>@{{person.contact.github}}</h4>
|
||||
<span>https://github.com/{{person.contact.github}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="item last">
|
||||
<div class="icon">
|
||||
<i class="fa fa-cogs"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<h3>Skills</h3>
|
||||
<div style="width: 100%; height: 15px;"></div>
|
||||
</div>
|
||||
<div class="skill" v-for="skill in person.skills">
|
||||
<div class="right">
|
||||
<span>{{skill.name}}</span>
|
||||
<div class="progress">
|
||||
<div class="determinate" :style="'width: '+skill.level+'%;'">
|
||||
<i class="fa fa-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rightCol">
|
||||
|
||||
<div class="block">
|
||||
<div class="icon">
|
||||
<i class="fa fa-suitcase"></i>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h2>Experience</h2>
|
||||
<div class="item" v-for="experience in person.experience">
|
||||
<h3>{{experience.position}} - {{experience.company}}</h3>
|
||||
<span>{{experience.timeperiod}}</span>
|
||||
<p>
|
||||
{{experience.description}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<div class="icon">
|
||||
<i class="fa fa-graduation-cap"></i>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h2>Education</h2>
|
||||
|
||||
<div class="item" v-for="education in person.education">
|
||||
<h3>{{education.degree}}</h3>
|
||||
<span>{{education.timeperiod}}</span>
|
||||
<p> {{education.description}} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear:both;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
PERSON
|
||||
} from '../person';
|
||||
|
||||
import Vue from 'vue';
|
||||
export default Vue.component('resume-material-blue', {
|
||||
name: 'resume-material-blue',
|
||||
data () {
|
||||
return {
|
||||
person: PERSON
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
#material-blue {
|
||||
font-family: 'roboto', sans-serif;
|
||||
background-color: #ccc;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: #767270;
|
||||
letter-spacing: 0.072em;
|
||||
font-weight: normal;
|
||||
}
|
||||
#material-blue .c {
|
||||
clear: both;
|
||||
}
|
||||
#material-blue li,
|
||||
#material-blue ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
#material-blue li {
|
||||
padding-top: 9px;
|
||||
}
|
||||
#material-blue p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 25px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 10pt;
|
||||
line-height: 17pt;
|
||||
}
|
||||
#material-blue .m_box {
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
#material-blue .fa {
|
||||
display: inline-block;
|
||||
font-family: FontAwesome;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-size: 26px;
|
||||
}
|
||||
#material-blue h1,
|
||||
#material-blue h2,
|
||||
#material-blue h3,
|
||||
#material-blue h4,
|
||||
#material-blue h5,
|
||||
#material-blue h6 {
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
#material-blue h2 {
|
||||
font-size: 22pt;
|
||||
line-height: 37pt;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
#material-blue h4 {
|
||||
font-size: 12pt;
|
||||
line-height: 20pt;
|
||||
opacity: 1;
|
||||
}
|
||||
#material-blue .rightCol {
|
||||
width: 63.5%;
|
||||
height: 100%;
|
||||
float: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#material-blue .rightCol .block {
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
padding-top: 24px;
|
||||
padding-bottom: 10px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
#material-blue .rightCol .block .icon {
|
||||
width: 16%;
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
}
|
||||
#material-blue .rightCol .block .icon .fa {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 30pt;
|
||||
}
|
||||
#material-blue .rightCol .block .content {
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
height: 96%;
|
||||
left: 17%;
|
||||
padding-right: 3%;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#material-blue .rightCol .block .content .item {
|
||||
border-bottom: 1px solid #bdbdbd;
|
||||
flex: 1;
|
||||
width: 97%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
}
|
||||
#material-blue .rightCol .block .content .item span {
|
||||
color: #5da4d9;
|
||||
margin-top: 0;
|
||||
font-size: 10pt;
|
||||
line-height: 16pt;
|
||||
}
|
||||
#material-blue .rightCol .block .content .item p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
#material-blue .rightCol .block .content .item:last-of-type {
|
||||
border-bottom-style: none;
|
||||
}
|
||||
#material-blue .rightCol .block .content .item:last-of-type {
|
||||
border-bottom-style: none;
|
||||
}
|
||||
#material-blue .leftCol {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
color: #ffffff;
|
||||
background-color: #5da4d9;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
#material-blue .leftCol a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
#material-blue .leftCol .heading {
|
||||
background-color: white;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
}
|
||||
#material-blue .leftCol .title {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
bottom: 25px;
|
||||
}
|
||||
#material-blue .leftCol .title span {
|
||||
margin-top: -5px;
|
||||
font-size: 10pt;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 15pt;
|
||||
}
|
||||
#material-blue .leftCol .item {
|
||||
width: 100%;
|
||||
margin-top: 13px;
|
||||
float: left;
|
||||
}
|
||||
#material-blue .leftCol .item .icon {
|
||||
width: 20%;
|
||||
margin-top: 8px;
|
||||
float: left;
|
||||
}
|
||||
#material-blue .leftCol .item .fa {
|
||||
display: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
#material-blue .leftCol .item .text {
|
||||
float: right;
|
||||
width: 69%;
|
||||
padding-right: 10%;
|
||||
padding-bottom: 13px;
|
||||
border-bottom: 1px solid #4783c2;
|
||||
}
|
||||
#material-blue .leftCol .item .text li {
|
||||
padding-top: 0;
|
||||
}
|
||||
#material-blue .leftCol .item span {
|
||||
font-weight: 300;
|
||||
}
|
||||
#material-blue .leftCol .item .skill {
|
||||
clear: both;
|
||||
width: 77%;
|
||||
margin-left: 14%;
|
||||
padding-top: 4px;
|
||||
}
|
||||
#material-blue .leftCol .item .skill .left {
|
||||
float: left;
|
||||
width: 10%;
|
||||
padding-top: 3px;
|
||||
}
|
||||
#material-blue .leftCol .item .skill .left i:nth-child(2) {
|
||||
float: left;
|
||||
padding-top: 4px;
|
||||
}
|
||||
#material-blue .leftCol .item .skill .right {
|
||||
float: right;
|
||||
width: 90%;
|
||||
}
|
||||
#material-blue .leftCol .item .skill .right .progress {
|
||||
float: left;
|
||||
position: relative;
|
||||
height: 2px;
|
||||
display: block;
|
||||
width: 95%;
|
||||
background-color: #4783c2;
|
||||
border-radius: 2px;
|
||||
margin: 0.5rem 0 1rem;
|
||||
overflow: visible;
|
||||
}
|
||||
#material-blue .leftCol .item .skill .right .progress .determinate {
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
#material-blue .leftCol .item .skill .right .progress .determinate .fa {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -2px;
|
||||
margin-left: 50%;
|
||||
}
|
||||
#material-blue .leftCol .item.last .text {
|
||||
border-bottom-style: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
#material-blue #myselfpic {
|
||||
background-image: url('../assets/person.jpg');
|
||||
color: black;
|
||||
}
|
||||
#material-blue #githubIcon {
|
||||
width: 25px;
|
||||
padding-left: 17px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -9,6 +9,12 @@
|
||||
<span>material-dark</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<router-link v-bind:to="'/resume/material-blue'">
|
||||
<img src="../assets/preview/resume-material-dark.png" />
|
||||
<span>material-blue</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -38,7 +44,10 @@ export default Vue.component('resume', {
|
||||
}
|
||||
|
||||
.preview{
|
||||
width: 200px;
|
||||
width: 30%;
|
||||
float: left;
|
||||
margin-left: 1.5%;
|
||||
margin-right: 1.5%;
|
||||
}
|
||||
|
||||
.preview img{
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
<div class="page">
|
||||
<div class="page-inner">
|
||||
<resume-material-dark v-if="$route.params.resumeid==='material-dark'"></resume-material-dark>
|
||||
<resume-material-blue v-if="$route.params.resumeid==='material-blue'"></resume-material-blue>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -10,14 +11,15 @@
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import '../components/resume-material-dark.vue';
|
||||
import * as chromeShadowFixer from 'chrome-shadow-fixer';
|
||||
import * as textFitter from 'text-fitter';
|
||||
import '../components/resume-material-dark.vue';
|
||||
import '../components/resume-material-blue.vue';
|
||||
export default Vue.component('resume', {
|
||||
name: 'app',
|
||||
mounted: () => {
|
||||
const pageElements = document.querySelectorAll('.page-inner');
|
||||
textFitter.fix(pageElements);
|
||||
textFitter.fix(pageElements, false);
|
||||
chromeShadowFixer.fix();
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user