FIX home page
This commit is contained in:
salomonelli
parent
0b8e1d83c0
commit
ef06b18a3d
@ -1 +1 @@
|
||||
[{"url":"http://localhost:8080/#/resume/oblique","delay":0,"selector":"","zoom-factor":1,"format":"pdf","quality":75,"user-agent":"","latency":null,"download":null,"upload":null,"css":"","js":"","debug":false,"root":"","pdf":{"pageSize":"A4","marginsType":1,"printBackground":true,"landscape":false},"size":{"width":2481,"height":3508},"out":"/home/s/workspace/best-resume-ever/pdf/oblique.pdf"}]
|
||||
[{"url":"http://localhost:8080/#/resume/side-bar","delay":0,"selector":"","zoom-factor":1,"format":"pdf","quality":75,"user-agent":"","latency":null,"download":null,"upload":null,"css":"","js":"","debug":false,"root":"","pdf":{"pageSize":"A4","marginsType":1,"printBackground":true,"landscape":false},"size":{"width":2481,"height":3508},"out":"/home/s/workspace/best-resume-ever/pdf/side-bar.pdf"}]
|
||||
@ -18,6 +18,7 @@
|
||||
"material-icons": "^0.1.0",
|
||||
"npm-font-open-sans": "^1.0.3",
|
||||
"npm-font-open-sans-condensed": "^1.0.3",
|
||||
"raleway-webfont": "^3.0.1",
|
||||
"roboto-fontface": "^0.7.0",
|
||||
"source-sans-pro": "^2.0.10",
|
||||
"text-fitter": "0.0.8",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
pdf/oblique.pdf
BIN
pdf/oblique.pdf
Binary file not shown.
BIN
pdf/side-bar.pdf
Normal file
BIN
pdf/side-bar.pdf
Normal file
Binary file not shown.
@ -17,9 +17,11 @@ export default {
|
||||
@import '../node_modules/source-sans-pro/source-sans-pro.css';
|
||||
@import '../node_modules/npm-font-open-sans/open-sans.css';
|
||||
@import '../node_modules/npm-font-open-sans-condensed/open-sans-condensed.css';
|
||||
@import '../node_modules/raleway-webfont/raleway.css';
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
background: #CCCCCC;
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 161 KiB After Width: | Height: | Size: 130 KiB |
246
src/components/resume-side-bar.vue
Normal file
246
src/components/resume-side-bar.vue
Normal file
@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<div id="resume2" class="resume">
|
||||
<div class="top-row">
|
||||
<span class="person-name"> {{person.name.first}} {{person.name.last}} </span>
|
||||
<span class="person-position"> {{person.position}} </span>
|
||||
</div>
|
||||
<div class="left-col">
|
||||
<div class="person-image">
|
||||
<div class="image-centerer">
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<h3>Contact</h3>
|
||||
<div class="contact-row">
|
||||
<a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a>
|
||||
</div>
|
||||
<div class="contact-row dots">
|
||||
<i class="fa fa-circle" aria-hidden="true"></i>
|
||||
<i class="fa fa-circle" aria-hidden="true"></i>
|
||||
<i class="fa fa-circle" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="contact-row">
|
||||
<a href="'tel:'+person.contact.phone">{{person.contact.phone}}</a>
|
||||
</div>
|
||||
<div class="contact-row dots">
|
||||
<i class="fa fa-circle" aria-hidden="true"></i>
|
||||
<i class="fa fa-circle" aria-hidden="true"></i>
|
||||
<i class="fa fa-circle" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="contact-row">
|
||||
{{person.contact.street}} <br> {{person.contact.city}}
|
||||
</div>
|
||||
<div class="contact-row dots">
|
||||
<i class="fa fa-circle" aria-hidden="true"></i>
|
||||
<i class="fa fa-circle" aria-hidden="true"></i>
|
||||
<i class="fa fa-circle" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="contact-row">
|
||||
<a :href="'https://github.com/'+person.contact.github">https://github.com/{{person.contact.github}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-col">
|
||||
<div class="experience">
|
||||
<h3>Experience</h3>
|
||||
<div class="experience-block" v-for="experience in person.experience">
|
||||
<div class="row">
|
||||
<span class="company"> {{experience.company}} -</span>
|
||||
<span class="job-title"> {{experience.position}} </span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="time-period"> {{experience.timeperiod}}</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="job-description"> {{experience.description}} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="education">
|
||||
<h3>Education</h3>
|
||||
<div class="education-block" v-for="education in person.education">
|
||||
<div class="row">
|
||||
<span class="degree">{{education.degree}}</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="degree-description">{{education.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skills-block">
|
||||
<h3>Skills</h3>
|
||||
<div class="skills">
|
||||
<div class="skill" v-for="skill in person.skills">
|
||||
<span class="skill-name">{{skill.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="skills-other"> {{person.skillDescription}} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
PERSON
|
||||
} from '../person';
|
||||
|
||||
import Vue from 'vue';
|
||||
export default Vue.component('resume-side-bar', {
|
||||
name: 'resume-side-bar',
|
||||
data () {
|
||||
return {
|
||||
person: PERSON
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
#resume2 {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
#resume2 h3 {
|
||||
text-transform: uppercase;
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
letter-spacing: 5px;
|
||||
font-weight: 400;
|
||||
}
|
||||
#resume2 a,
|
||||
#resume2 a:focus,
|
||||
#resume2 a:hover,
|
||||
#resume2 a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
#resume2 .top-row {
|
||||
width: 100%;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
#resume2 .top-row span {
|
||||
width: 100%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
#resume2 .top-row span.person-name {
|
||||
text-transform: uppercase;
|
||||
font-size: 50px;
|
||||
letter-spacing: 10px;
|
||||
}
|
||||
#resume2 .top-row span.person-position {
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
#resume2 .left-col {
|
||||
width: 26%;
|
||||
float: left;
|
||||
padding-left: 8%;
|
||||
padding-right: 4%;
|
||||
}
|
||||
#resume2 .left-col .person-image .image-centerer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
#resume2 .left-col .person-image .image-centerer .img {
|
||||
flex: none;
|
||||
background: url('../assets/person.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
height: 250px;
|
||||
width: 100%;
|
||||
}
|
||||
#resume2 .left-col .contact h3 {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
#resume2 .left-col .contact .contact-row {
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
#resume2 .left-col .contact .contact-row:first-of-type {
|
||||
margin-top: 50px;
|
||||
}
|
||||
#resume2 .left-col .contact .contact-row.dots {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 10px;
|
||||
color: rgba(153, 153, 153, 0.6);
|
||||
}
|
||||
#resume2 .left-col .contact .contact-row a {
|
||||
color: black;
|
||||
}
|
||||
#resume2 .right-col {
|
||||
width: 50%;
|
||||
float: right;
|
||||
padding-left: 4%;
|
||||
padding-right: 8%;
|
||||
}
|
||||
#resume2 .right-col .experience-block {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#resume2 .right-col .experience-block .row:first-child {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
#resume2 .right-col .experience-block .row .company {
|
||||
text-transform: uppercase;
|
||||
font-size: 19px;
|
||||
}
|
||||
#resume2 .right-col .experience-block .row .job-title {
|
||||
font-size: 19px;
|
||||
}
|
||||
#resume2 .right-col .education {
|
||||
margin-top: 50px;
|
||||
}
|
||||
#resume2 .right-col .education .education-block {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#resume2 .right-col .education .education-block .degree {
|
||||
font-size: 19px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
#resume2 .right-col .skills-block {
|
||||
margin-top: 50px;
|
||||
position: relative;
|
||||
}
|
||||
#resume2 .right-col .skills-block .skills {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#resume2 .right-col .skills-block .skills .skill {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
border: #333 1px solid;
|
||||
margin: 3px;
|
||||
float: left;
|
||||
font-size: 13px;
|
||||
}
|
||||
#resume2 .right-col .skills-block .skills .skill .skill-name {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
}
|
||||
#resume2 .right-col .skills-block .skills .skills-other {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -5,26 +5,42 @@
|
||||
<div class="previews">
|
||||
<div class="preview">
|
||||
<router-link v-bind:to="'/resume/material-dark'">
|
||||
<img src="../assets/preview/resume-material-dark.png" />
|
||||
<span>material-dark</span>
|
||||
<div class="preview-wrapper">
|
||||
<img src="../assets/preview/resume-material-dark.png" />
|
||||
<span>material-dark</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<router-link v-bind:to="'/resume/material-blue'">
|
||||
<div class="preview-wrapper">
|
||||
<img src="../assets/preview/resume-material-blue.png" />
|
||||
<span>material-blue</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<router-link v-bind:to="'/resume/left-right'">
|
||||
<div class="preview-wrapper">
|
||||
<img src="../assets/preview/resume-left-right.png" />
|
||||
<span>left-right</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<router-link v-bind:to="'/resume/oblique'">
|
||||
<div class="preview-wrapper">
|
||||
<img src="../assets/preview/resume-oblique.png" />
|
||||
<span>oblique</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<router-link v-bind:to="'/resume/side-bar'">
|
||||
<div class="preview-wrapper">
|
||||
<img src="../assets/preview/resume-side-bar.png" />
|
||||
<span>side-bar</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
@ -47,6 +63,11 @@ export default Vue.component('resume', {
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
color: #ee6e73;
|
||||
font-weight: 300;
|
||||
font-size: 3.56rem;
|
||||
line-height: 110%;
|
||||
margin: 1.78rem 0 1.424rem 0;
|
||||
}
|
||||
|
||||
.previews{
|
||||
@ -56,19 +77,36 @@ export default Vue.component('resume', {
|
||||
}
|
||||
|
||||
.preview{
|
||||
width: 30%;
|
||||
float: left;
|
||||
margin-left: 1.5%;
|
||||
margin-right: 1.5%;
|
||||
width: 180px;
|
||||
float: left;
|
||||
margin-left: 1.5%;
|
||||
margin-right: 1.5%;
|
||||
margin-bottom: 1.5%;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
|
||||
height: 252px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.preview-wrapper {
|
||||
position: relative;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.preview img{
|
||||
width: 100%;
|
||||
opacity: 0.5;
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
.preview span{
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
max-width: 100%;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<resume-material-blue v-if="$route.params.resumeid==='material-blue'"></resume-material-blue>
|
||||
<resume-left-right v-if="$route.params.resumeid==='left-right'"></resume-left-right>
|
||||
<resume-oblique v-if="$route.params.resumeid==='oblique'"></resume-oblique>
|
||||
<resume-side-bar v-if="$route.params.resumeid==='side-bar'"></resume-side-bar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -19,6 +20,7 @@ import '../components/resume-material-dark.vue';
|
||||
import '../components/resume-material-blue.vue';
|
||||
import '../components/resume-left-right.vue';
|
||||
import '../components/resume-oblique.vue';
|
||||
import '../components/resume-side-bar.vue';
|
||||
export default Vue.component('resume', {
|
||||
name: 'app',
|
||||
mounted: () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user