ADD project templates #4
This commit is contained in:
salomonelli
parent
8c3f14360e
commit
57a92a1676
BIN
pdf/cool-rtl.pdf
BIN
pdf/cool-rtl.pdf
Binary file not shown.
Binary file not shown.
BIN
pdf/cool.pdf
BIN
pdf/cool.pdf
Binary file not shown.
BIN
pdf/creative.pdf
BIN
pdf/creative.pdf
Binary file not shown.
BIN
pdf/green.pdf
BIN
pdf/green.pdf
Binary file not shown.
BIN
pdf/left-right-projects.pdf
Normal file
BIN
pdf/left-right-projects.pdf
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
pdf/material-dark-projects.pdf
Normal file
BIN
pdf/material-dark-projects.pdf
Normal file
Binary file not shown.
Binary file not shown.
BIN
pdf/oblique-projects.pdf
Normal file
BIN
pdf/oblique-projects.pdf
Normal file
Binary file not shown.
Binary file not shown.
BIN
pdf/oblique.pdf
BIN
pdf/oblique.pdf
Binary file not shown.
BIN
pdf/purple.pdf
BIN
pdf/purple.pdf
Binary file not shown.
BIN
pdf/side-bar-projects.pdf
Normal file
BIN
pdf/side-bar-projects.pdf
Normal file
Binary file not shown.
Binary file not shown.
BIN
pdf/side-bar.pdf
BIN
pdf/side-bar.pdf
Binary file not shown.
@ -63,6 +63,7 @@ knowledge: Also proficient in Adobe Photoshop and Illustrator, grew up bilingual
|
||||
projects:
|
||||
- name: best-resume-ever
|
||||
platform: Vue
|
||||
timeperiod: February 2016
|
||||
description: 👔 💼 Build fast 🚀 and easy multiple beautiful resumes and create your best CV ever! Made with Vue and LESS.
|
||||
url: https://github.com/salomonelli/best-resume-ever
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
BIN
src/assets/preview/resume-left-right-projects.png
Normal file
BIN
src/assets/preview/resume-left-right-projects.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
BIN
src/assets/preview/resume-material-dark-projects.png
Normal file
BIN
src/assets/preview/resume-material-dark-projects.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 60 KiB |
BIN
src/assets/preview/resume-oblique-projects.png
Normal file
BIN
src/assets/preview/resume-oblique-projects.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
BIN
src/assets/preview/resume-side-bar-projects.png
Normal file
BIN
src/assets/preview/resume-side-bar-projects.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
@ -14,6 +14,14 @@
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<router-link v-bind:to="'/resume/material-dark-projects'">
|
||||
<div class="preview-wrapper">
|
||||
<img src="../assets/preview/resume-material-dark-projects.png" />
|
||||
<span>material-dark-projects</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<router-link v-bind:to="'/resume/left-right'">
|
||||
<div class="preview-wrapper">
|
||||
@ -22,6 +30,14 @@
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<router-link v-bind:to="'/resume/left-right-projects'">
|
||||
<div class="preview-wrapper">
|
||||
<img src="../assets/preview/resume-left-right-projects.png" />
|
||||
<span>left-right-projects</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<router-link v-bind:to="'/resume/left-right-rtl'">
|
||||
<div class="preview-wrapper">
|
||||
@ -38,6 +54,14 @@
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<router-link v-bind:to="'/resume/oblique-projects'">
|
||||
<div class="preview-wrapper">
|
||||
<img src="../assets/preview/resume-oblique-projects.png" />
|
||||
<span>oblique-projects</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<router-link v-bind:to="'/resume/oblique-rtl'">
|
||||
<div class="preview-wrapper">
|
||||
@ -54,6 +78,14 @@
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<router-link v-bind:to="'/resume/side-bar-projects'">
|
||||
<div class="preview-wrapper">
|
||||
<img src="../assets/preview/resume-side-bar-projects.png" />
|
||||
<span>side-bar-projects</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<router-link v-bind:to="'/resume/side-bar-rtl'">
|
||||
<div class="preview-wrapper">
|
||||
|
||||
260
src/resumes/left-right-projects.vue
Executable file
260
src/resumes/left-right-projects.vue
Executable file
@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<div class="resume" id="resume1">
|
||||
<div class="row text-center">
|
||||
<span class="name">{{person.name.first}} {{person.name.last}}</span>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p class="position center">{{person.position}}</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="image center">
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left half">
|
||||
<div class="experience">
|
||||
<h3>Experience</h3>
|
||||
<div class="experience-block" v-for="experience in person.experience">
|
||||
<span class="company"> {{experience.company}} </span>
|
||||
<span class="job-title"> {{experience.position}} </span>
|
||||
<span class="time-period"> {{experience.timeperiod}}</span>
|
||||
<span class="job-description"> {{experience.description}} </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<h3>Contact</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<td><a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a></td>
|
||||
<td><i class="fa fa-envelope" aria-hidden="true"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a :href="'tel:'+person.contact.phone">{{person.contact.phone}}</a></td>
|
||||
<td><i class="fa fa-phone" aria-hidden="true"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{person.contact.street}} <br> {{person.contact.city}}</td>
|
||||
<td><i class="fa fa-home" aria-hidden="true"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a :href="person.contact.website">{{person.contact.website}}</a></td>
|
||||
<td><i class="fa fa-globe" aria-hidden="true"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a :href="'https://github.com/'+person.contact.github">https://github.com/{{person.contact.github}}</a></td>
|
||||
<td><i class="fa fa-github" aria-hidden="true"></i></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right half">
|
||||
<div class="education">
|
||||
<h3>Education</h3>
|
||||
<div class="education-block" v-for="education in person.education">
|
||||
<span class="degree">{{education.degree}}</span>
|
||||
<span class="timeperiod">{{education.timeperiod}}</span>
|
||||
<span class="degree-description">{{education.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Skills</h3>
|
||||
<div class="skills">
|
||||
<div class="skill-block" v-for="skill in person.skills">
|
||||
<span class="skill">{{skill.name}}</span>
|
||||
<div class="skill-bar">
|
||||
<div :style="'width: '+skill.level+'%'" class="level"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="skills-other"> {{person.skillDescription}} </span>
|
||||
</div>
|
||||
<div class="projects">
|
||||
<h3>Projects</h3>
|
||||
<div class="project-block" v-for="project in person.projects">
|
||||
<span class="project">{{project.name}}</span>
|
||||
<br>
|
||||
<span class="project-description">{{project.description}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { getVueOptions } from './options';
|
||||
|
||||
const name = 'left-right-projects';
|
||||
export default Vue.component(name, getVueOptions(name));
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="less" scoped>
|
||||
#resume1 {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: 15px;
|
||||
padding-bottom: 50px;
|
||||
a,
|
||||
a:focus,
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: #616161;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
.row {
|
||||
width: 100%;
|
||||
}
|
||||
.half {
|
||||
width: 44%;
|
||||
}
|
||||
.half.left {
|
||||
float: left;
|
||||
text-align: right;
|
||||
padding-left: 4%;
|
||||
padding-right: 2%;
|
||||
}
|
||||
.half.right {
|
||||
float: right;
|
||||
text-align: left;
|
||||
padding-right: 4%;
|
||||
padding-left: 2%;
|
||||
}
|
||||
.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.name {
|
||||
border: 1px solid black;
|
||||
text-transform: uppercase;
|
||||
padding: 10px 20px;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 5px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 35px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 10px;
|
||||
}
|
||||
.position {
|
||||
text-transform: uppercase;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: smaller;
|
||||
color: #757575;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-image: url("../../resume/id.jpg");
|
||||
background-repeat: none;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
.contact {
|
||||
width: 100%;
|
||||
table {
|
||||
text-align: right;
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
color: #616161;
|
||||
font-size: 15px;
|
||||
i {
|
||||
padding: 2px;
|
||||
color: #616161;
|
||||
}
|
||||
tr td:nth-child(2) {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
.experience .experience-block span {
|
||||
width: 100%;
|
||||
color: #616161;
|
||||
}
|
||||
.experience .experience-block span.company {
|
||||
font-weight: bold;
|
||||
padding-bottom: 5px;
|
||||
padding-top: 10px;
|
||||
color: #424242;
|
||||
}
|
||||
.experience .experience-block span.job-title {
|
||||
font-style: italic;
|
||||
}
|
||||
.education-block span {
|
||||
color: #616161;
|
||||
}
|
||||
.education-block span.degree {
|
||||
font-weight: bold;
|
||||
padding-bottom: 5px;
|
||||
padding-top: 10px;
|
||||
color: #424242;
|
||||
}
|
||||
.project-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 25%;
|
||||
float: left;
|
||||
}
|
||||
.project-block span {
|
||||
color: #616161;
|
||||
font-size: 15px;
|
||||
}
|
||||
.project-block span.project {
|
||||
font-weight: bold;
|
||||
margin-bottom: -10px;
|
||||
padding-top: 10px;
|
||||
color: #424242;
|
||||
}
|
||||
.skills-other {
|
||||
color: #616161;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.skills {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
.skill-block {
|
||||
padding-bottom: 10px;
|
||||
display: inline-block;
|
||||
.skill {
|
||||
width: 100px;
|
||||
color: #616161;
|
||||
float: left;
|
||||
}
|
||||
.skill-bar {
|
||||
float: right;
|
||||
background: #e0e0e0;
|
||||
overflow: hidden;
|
||||
height: 8px;
|
||||
border-radius: 3px;
|
||||
margin-top: 6.5px;
|
||||
position: relative;
|
||||
width: 249px;
|
||||
.level {
|
||||
background: #757575;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.projects {
|
||||
float: left;
|
||||
text-align: left;
|
||||
padding-left: 4%;
|
||||
padding-right: 2%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
545
src/resumes/material-dark-projects.vue
Executable file
545
src/resumes/material-dark-projects.vue
Executable file
@ -0,0 +1,545 @@
|
||||
<template>
|
||||
<div class="resume">
|
||||
<div class="leftCol m_box">
|
||||
<div class="shadow"></div>
|
||||
<div class="heading" id="myselfpic">
|
||||
</div>
|
||||
<div class="section-headline">
|
||||
Contact
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<i class="material-icons">account_circle</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="material-icons">location_city</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="material-icons">phone</i>
|
||||
</div>
|
||||
<div class="text">
|
||||
{{person.contact.phone}}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a :href="'mailto:'+person.contact.email">
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<i class="material-icons">email</i>
|
||||
</div>
|
||||
<div class="text">
|
||||
{{person.contact.email}}
|
||||
</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">
|
||||
<span>@{{person.contact.github}}</span>
|
||||
<span>github.com/{{person.contact.github}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a :href="person.contact.website" target="_blank">
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<i class="material-icons">language</i>
|
||||
</div>
|
||||
<div class="text">
|
||||
<span>{{person.contact.website}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="item last">
|
||||
<div class="section-headline">
|
||||
Skills
|
||||
</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="title">
|
||||
<h2>{{person.name.first}} {{person.name.last}}</h2>
|
||||
<div>{{person.position}}</div>
|
||||
</div>
|
||||
|
||||
<div class="section-headline">Working experience</div>
|
||||
<div class="block" v-for="experience in person.experience">
|
||||
<div class="block-helper"></div>
|
||||
<div class="headline">{{experience.position}} - {{experience.company}}</h3>
|
||||
<div class="subheadline">{{experience.timeperiod}}</div>
|
||||
<p class="info">
|
||||
{{experience.description}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-headline">Education</div>
|
||||
<div class="block" v-for="education in person.education">
|
||||
<div class="block-helper"></div>
|
||||
<div class="headline">{{education.degree}}</div>
|
||||
<p class="info">
|
||||
{{education.timeperiod}}, {{education.description}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="farRightCol">
|
||||
<div class="section-headline">Projects</div>
|
||||
<div class="block" v-for="project in person.projects">
|
||||
<div class="block-helper"></div>
|
||||
<div class="headline">{{project.name}}</h3>
|
||||
<div class="subheadline">{{project.timeperiod}}</div>
|
||||
<p class="info">{{project.description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="clear:both;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { getVueOptions } from './options';
|
||||
|
||||
const name = 'material-dark-projects';
|
||||
export default Vue.component(name, getVueOptions(name));
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="less" scoped>
|
||||
.resume {
|
||||
font-family: 'Roboto' !important;
|
||||
background: #cccccc;
|
||||
}
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
.description-personal {
|
||||
margin-let: 20px;
|
||||
margin-top: 20px;
|
||||
padding-right: 40px;
|
||||
text-align: justify;
|
||||
font-family: Roboto;
|
||||
}
|
||||
.title {
|
||||
right: 25px;
|
||||
padding-left: 20px;
|
||||
padding-top: 20px;
|
||||
bottom: 25px;
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
font-size: 1.17em;
|
||||
-webkit-margin-before: 1em;
|
||||
-webkit-margin-after: 1em;
|
||||
-webkit-margin-start: 0;
|
||||
-webkit-margin-end: 0;
|
||||
color: white;
|
||||
color: rgba(0,0,0,0.7);
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
letter-spacing: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 15pt;
|
||||
font-weight: 300;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
letter-spacing: 3px;
|
||||
color: white;
|
||||
color: #16151c;
|
||||
color: rgba(63,61,60,0.71);
|
||||
display: block;
|
||||
font-size: 0.67em;
|
||||
font-size: 10pt;
|
||||
-webkit-margin-before: 2.33em;
|
||||
-webkit-margin-start: 0;
|
||||
-webkit-margin-end: 0;
|
||||
padding-top: 0;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.section-headline {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: 3px;
|
||||
font-size: 10pt;
|
||||
opacity: 0.8;
|
||||
margin-left: 20px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 20px;
|
||||
color: #3f3d3c;
|
||||
}
|
||||
.c {
|
||||
clear: both;
|
||||
}
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
padding-top: 9px;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 25px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 10pt;
|
||||
line-height: 17pt;
|
||||
}
|
||||
.m_box {
|
||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
|
||||
}
|
||||
.fa,
|
||||
.material-icons {
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-size: 26px;
|
||||
}
|
||||
h1,
|
||||
h3,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
font-size: 22pt;
|
||||
line-height: 37pt;
|
||||
}
|
||||
h4 {
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
font-size: 12pt;
|
||||
line-height: 20pt;
|
||||
opacity: 1;
|
||||
}
|
||||
.farRightCol {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
float: right;
|
||||
display: flex;
|
||||
margin-top: 120px;
|
||||
flex-direction: column;
|
||||
.block {
|
||||
width: 90%;
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
padding: 20px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
display: inline-block;
|
||||
.headline {
|
||||
font-weight: 300;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
color: rgba(0,0,0,0.870588);
|
||||
}
|
||||
.subheadline {
|
||||
color: rgba(0,0,0,0.541176);
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.info {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.870588);
|
||||
margin-bottom: 0;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.icon {
|
||||
width: 16%;
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
.fa,
|
||||
.material-icons {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 30pt;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
height: 96%;
|
||||
left: 17%;
|
||||
padding-right: 3%;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.item {
|
||||
border-bottom: 1px solid #bdbdbd;
|
||||
flex: 1;
|
||||
width: 97%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
padding-top: 0;
|
||||
span {
|
||||
color: #d8ab94;
|
||||
margin-top: 0;
|
||||
font-size: 10pt;
|
||||
line-height: 16pt;
|
||||
}
|
||||
p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.item:last-of-type {
|
||||
border-bottom-style: none;
|
||||
border-bottom-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.rightCol {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
display: flex;
|
||||
padding-left: 10px;
|
||||
flex-direction: column;
|
||||
.block {
|
||||
width: 90%;
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
padding: 20px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
display: inline-block;
|
||||
.headline {
|
||||
font-weight: 300;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
color: rgba(0,0,0,0.870588);
|
||||
}
|
||||
.subheadline {
|
||||
color: rgba(0,0,0,0.541176);
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.info {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.870588);
|
||||
margin-bottom: 0;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.icon {
|
||||
width: 16%;
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
.fa,
|
||||
.material-icons {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 30pt;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
height: 96%;
|
||||
left: 17%;
|
||||
padding-right: 3%;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.item {
|
||||
border-bottom: 1px solid #bdbdbd;
|
||||
flex: 1;
|
||||
width: 97%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
padding-top: 0;
|
||||
span {
|
||||
color: #d8ab94;
|
||||
margin-top: 0;
|
||||
font-size: 10pt;
|
||||
line-height: 16pt;
|
||||
}
|
||||
p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.item:last-of-type {
|
||||
border-bottom-style: none;
|
||||
border-bottom-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.leftCol {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
color: #ffffff;
|
||||
color: rgba(255,255,255,0.59);
|
||||
background-color: #16151c;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
.section-headline {
|
||||
color: rgba(255,255,255,0.54);
|
||||
}
|
||||
a {
|
||||
color: rgba(255,255,255,0.59);
|
||||
text-decoration: none;
|
||||
}
|
||||
.heading {
|
||||
background-color: white;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 277px;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
margin-top: 13px;
|
||||
float: left;
|
||||
.fa,
|
||||
.material-icons {
|
||||
display: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
.icon {
|
||||
width: 20%;
|
||||
float: left;
|
||||
}
|
||||
.text {
|
||||
float: right;
|
||||
width: 69%;
|
||||
padding-right: 10%;
|
||||
padding-top: 0;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
li {
|
||||
padding-top: 0;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-weight: 300;
|
||||
}
|
||||
.skill {
|
||||
clear: both;
|
||||
width: 97%;
|
||||
padding-top: 4px;
|
||||
.left {
|
||||
float: left;
|
||||
width: 10%;
|
||||
padding-top: 3px;
|
||||
i:nth-child(2) {
|
||||
float: left;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
width: 93%;
|
||||
.progress {
|
||||
float: left;
|
||||
position: relative;
|
||||
height: 2px;
|
||||
display: block;
|
||||
width: 95%;
|
||||
background-color: rgba(255,255,255,0.19);
|
||||
border-radius: 2px;
|
||||
margin: 0.5rem 0 1rem;
|
||||
overflow: visible;
|
||||
margin-bottom: 10px;
|
||||
.determinate {
|
||||
background-color: #78909c;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
.fa,
|
||||
.material-icons {
|
||||
font-size: 13px;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -2px;
|
||||
margin-left: 50%;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item.last .text {
|
||||
border-bottom-style: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
#myselfpic {
|
||||
background-image: url('../../resume/id.jpg');
|
||||
color: black;
|
||||
}
|
||||
#githubIcon {
|
||||
width: 25px;
|
||||
padding-left: 17px;
|
||||
}
|
||||
</style>
|
||||
238
src/resumes/oblique-projects.vue
Executable file
238
src/resumes/oblique-projects.vue
Executable file
@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<div id="resume3" class="resume">
|
||||
<div class="resume-header">
|
||||
<div class="triangle"></div>
|
||||
<div class="person-header">
|
||||
<div class="person-wrapper">
|
||||
<div class="person">
|
||||
<div class="name">{{person.name.first}} {{person.name.last}}</div>
|
||||
<div class="position">{{person.position}}</div>
|
||||
</div>
|
||||
<div class="img">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="resume-content">
|
||||
<div class="experience">
|
||||
<h3>Experience</h3>
|
||||
|
||||
<div class="experience-block" v-for="experience in person.experience">
|
||||
<div class="row">
|
||||
<span class="job-title"> {{experience.position}} </span>
|
||||
<i class="material-icons">details</i>
|
||||
<span class="company"> {{experience.company}} </span>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<span class="time-period"> {{experience.timeperiod}}</span>
|
||||
<span class="job-description">, {{experience.description}} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="projects">
|
||||
<h3>Projects</h3>
|
||||
|
||||
<div class="project-block" v-for="project in person.projects">
|
||||
<div class="row">
|
||||
<span class="name"> {{project.name}} </span>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<span class="time-period"> {{project.timeperiod}}</span>
|
||||
<span class="description">, {{project.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="skill-section">
|
||||
<h3>Skills</h3>
|
||||
<div class="skills" v-for="skill in person.skills">
|
||||
<div class="skill-block">
|
||||
<i class="material-icons">details</i>
|
||||
<span class="skill">{{skill.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skills-other">
|
||||
<span>{{person.skillDescription}} </span>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<h3>Contact</h3>
|
||||
<a :href="'mailto:'+person.contact.email"> {{person.contact.email}}</a>
|
||||
<span>; </span>
|
||||
<a :href="'tel:'+person.contact.phone">{{person.contact.phone}}</a>
|
||||
<span>; </span>
|
||||
<span>{{person.contact.street}}, {{person.contact.city}}</span>
|
||||
<span>; </span>
|
||||
<a :href="person.contact.website">
|
||||
{{person.contact.website}}</a>
|
||||
<span>; </span>
|
||||
<a :href="'https://github.com/'+person.contact.github">
|
||||
https://github.com/{{person.contact.github}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { getVueOptions } from './options';
|
||||
|
||||
const name = 'oblique-projects';
|
||||
export default Vue.component(name, getVueOptions(name));
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="less" scoped>
|
||||
#resume3 {
|
||||
font-family: 'Open Sans Condensed', sans-serif;
|
||||
padding-bottom: 50px;
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.resume-header .triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 415px 0 0 1500px;
|
||||
border-color: #006064 transparent transparent transparent;
|
||||
position: absolute;
|
||||
left: -600px;
|
||||
top: 0;
|
||||
}
|
||||
.resume-header .person-header {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
right: 15%;
|
||||
top: 70px;
|
||||
.person-wrapper {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.img {
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: url('../../resume/id.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.person {
|
||||
float: right;
|
||||
color: white;
|
||||
margin-right: 120px;
|
||||
}
|
||||
.name {
|
||||
text-transform: uppercase;
|
||||
font-size: 50px;
|
||||
display: table-caption;
|
||||
text-align: right;
|
||||
line-height: 1.0;
|
||||
font-weight: bold;
|
||||
}
|
||||
.position {
|
||||
font-size: 20px;
|
||||
display: table-caption;
|
||||
text-align: right;
|
||||
line-height: 1.0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.resume-content {
|
||||
margin-top: 250px;
|
||||
margin-left: 15%;
|
||||
width: 70%;
|
||||
.experience .experience-block {
|
||||
line-height: 1;
|
||||
margin-bottom: 10px;
|
||||
.row:first-child {
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
i {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.projects .project-block {
|
||||
line-height: 1;
|
||||
margin-bottom: 10px;
|
||||
.row:first-child {
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
i {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.experience .experience-block:first-of-type {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
.education-block {
|
||||
line-height: 1;
|
||||
margin-bottom: 10px;
|
||||
.row:first-child {
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.skill-section .skills {
|
||||
width: 100%;
|
||||
.skill-block {
|
||||
width: 50%;
|
||||
float: left;
|
||||
i {
|
||||
font-size: 17px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.skill {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.skills-other {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
.contact {
|
||||
margin-top: 20px;
|
||||
a,
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
list-style: none;
|
||||
margin-top: 0;
|
||||
line-height: 1;
|
||||
float: left;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -16,8 +16,7 @@
|
||||
</div>
|
||||
<div class="resume-content">
|
||||
<div class="experience">
|
||||
<h3>{{ lang.headings.experience }}</h3>
|
||||
|
||||
<h3>{{ lang.experience }}</h3>
|
||||
<div class="experience-block" v-for="experience in person.experience" :key="experience.company">
|
||||
<div class="row">
|
||||
<span class="job-title"> {{experience.position}} </span>
|
||||
@ -32,7 +31,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="education">
|
||||
<h3>{{ lang.headings.education }}</h3>
|
||||
<h3>{{ lang.education }}</h3>
|
||||
<div class="education-block" v-for="education in person.education" :key="education.degree">
|
||||
<div class="row">
|
||||
<span class="degree">{{education.degree}}</span>
|
||||
@ -43,7 +42,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-section">
|
||||
<h3>{{ lang.headings.skills }}</h3>
|
||||
<h3>{{ lang.skills }}</h3>
|
||||
<div class="skills" v-for="skill in person.skills" :key="skill.name">
|
||||
<div class="skill-block">
|
||||
<i class="material-icons">details</i>
|
||||
@ -55,7 +54,7 @@
|
||||
<span>{{person.knowledge}} </span>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<h3>{{ lang.headings.contact }}</h3>
|
||||
<h3>{{ lang.contact }}</h3>
|
||||
<a :href="'mailto:'+person.contact.email"> {{person.contact.email}}</a>
|
||||
<span>; </span>
|
||||
<a :href="'tel:'+person.contact.phone">{{person.contact.phone}}</a>
|
||||
@ -79,132 +78,134 @@ import { getVueOptions } from './options';
|
||||
const name = 'oblique-rtl';
|
||||
export default Vue.component(name, getVueOptions(name));
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="less" scoped>
|
||||
#resume3 {
|
||||
font-family:'Open Sans Condensed', sans-serif;
|
||||
padding-bottom:50px;
|
||||
direction: rtl;
|
||||
a, a:focus, a:hover {
|
||||
color:black;
|
||||
text-decoration:none;
|
||||
}
|
||||
h3 {
|
||||
font-weight:bold;
|
||||
text-transform:uppercase;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.resume-header .triangle {
|
||||
width:0;
|
||||
height:0;
|
||||
border-style:solid;
|
||||
border-width:600px 1500px 0 0;
|
||||
border-color:#006064 transparent transparent transparent;
|
||||
position:absolute;
|
||||
right:-600px;
|
||||
top:0;
|
||||
}
|
||||
.resume-header .person-header {
|
||||
position:absolute;
|
||||
z-index:20;
|
||||
left:15%;
|
||||
top:200px;
|
||||
.person-wrapper {
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
font-family: 'Open Sans Condensed', sans-serif;
|
||||
padding-bottom: 50px;
|
||||
direction: rtl;
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
.img {
|
||||
height:100%;
|
||||
width:100px;
|
||||
float:left;
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
background:url('../../resume/id.jpg');
|
||||
background-position:center;
|
||||
background-size:cover;
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.person {
|
||||
float:right;
|
||||
color:white;
|
||||
margin-right:120px;
|
||||
.resume-header .triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 600px 1500px 0 0;
|
||||
border-color: #006064 transparent transparent transparent;
|
||||
position: absolute;
|
||||
right: -600px;
|
||||
top: 0;
|
||||
}
|
||||
.name {
|
||||
text-transform:uppercase;
|
||||
font-size:50px;
|
||||
display:table-caption;
|
||||
text-align:right;
|
||||
line-height:1.0;
|
||||
font-weight:bold;
|
||||
}
|
||||
.position {
|
||||
font-size:20px;
|
||||
display:table-caption;
|
||||
text-align:right;
|
||||
line-height:1.0;
|
||||
margin-top:10px;
|
||||
}
|
||||
}
|
||||
.resume-content {
|
||||
margin-top:435px;
|
||||
margin-right:15%;
|
||||
width:70%;
|
||||
.experience .experience-block {
|
||||
line-height:1;
|
||||
margin-bottom:10px;
|
||||
.row:first-child {
|
||||
font-size:20px;
|
||||
text-transform:uppercase;
|
||||
i {
|
||||
font-size:17px;
|
||||
.resume-header .person-header {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
left: 15%;
|
||||
top: 200px;
|
||||
.person-wrapper {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.img {
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: url("../../resume/id.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.person {
|
||||
float: right;
|
||||
color: white;
|
||||
margin-right: 120px;
|
||||
}
|
||||
.name {
|
||||
text-transform: uppercase;
|
||||
font-size: 50px;
|
||||
display: table-caption;
|
||||
text-align: right;
|
||||
line-height: 1.0;
|
||||
font-weight: bold;
|
||||
}
|
||||
.position {
|
||||
font-size: 20px;
|
||||
display: table-caption;
|
||||
text-align: right;
|
||||
line-height: 1.0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.experience .experience-block:first-of-type {
|
||||
width:80%;
|
||||
.resume-content {
|
||||
margin-top: 435px;
|
||||
margin-right: 15%;
|
||||
width: 70%;
|
||||
.experience .experience-block {
|
||||
line-height: 1;
|
||||
margin-bottom: 10px;
|
||||
.row:first-child {
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
i {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.experience .experience-block:first-of-type {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.education-block {
|
||||
line-height:1;
|
||||
margin-bottom:10px;
|
||||
.row:first-child {
|
||||
font-size:20px;
|
||||
text-transform:uppercase;
|
||||
.education-block {
|
||||
line-height: 1;
|
||||
margin-bottom: 10px;
|
||||
.row:first-child {
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
.skill-section .skills {
|
||||
width:100%;
|
||||
.skill-block {
|
||||
width:50%;
|
||||
float:left;
|
||||
i {
|
||||
font-size:17px;
|
||||
margin-right:15px;
|
||||
}
|
||||
.skill {
|
||||
font-size:20px;
|
||||
}
|
||||
.skill-section .skills {
|
||||
width: 100%;
|
||||
.skill-block {
|
||||
width: 50%;
|
||||
float: left;
|
||||
i {
|
||||
font-size: 17px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.skill {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.skills-other {
|
||||
display:inline-block;
|
||||
font-size:20px;
|
||||
margin-top:10px;
|
||||
line-height:1;
|
||||
}
|
||||
.contact {
|
||||
margin-top:50px;
|
||||
a, span {
|
||||
display:inline-block;
|
||||
font-size:20px;
|
||||
list-style:none;
|
||||
margin-top:0;
|
||||
line-height:1;
|
||||
float:right;
|
||||
padding-left:0;
|
||||
margin-left:0;
|
||||
.skills-other {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
.contact {
|
||||
margin-top: 50px;
|
||||
a,
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
list-style: none;
|
||||
margin-top: 0;
|
||||
line-height: 1;
|
||||
float: right;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,3 +12,7 @@ import './cool.vue';
|
||||
import './cool-rtl.vue';
|
||||
import './cool-rtl2.vue';
|
||||
import './green.vue';
|
||||
import './left-right-projects.vue';
|
||||
import './material-dark-projects.vue';
|
||||
import './oblique-projects.vue';
|
||||
import './side-bar-projects.vue';
|
||||
|
||||
265
src/resumes/side-bar-projects.vue
Executable file
265
src/resumes/side-bar-projects.vue
Executable file
@ -0,0 +1,265 @@
|
||||
<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 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 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="projects">
|
||||
<h3>Projects</h3>
|
||||
<div class="project-block" v-for="project in person.projects">
|
||||
<div class="row">
|
||||
<span class="name"> {{project.name}} </span>
|
||||
<div class="row">
|
||||
<span class="time-period"> {{project.timeperiod}}</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="description"> {{project.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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { getVueOptions } from './options';
|
||||
|
||||
const name = 'side-bar-projects';
|
||||
export default Vue.component(name, getVueOptions(name));
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="less" scoped>
|
||||
#resume2 {
|
||||
font-family:'Raleway', sans-serif;
|
||||
padding-bottom:50px;
|
||||
a, a:focus, a:hover, a:visited {
|
||||
text-decoration:none;
|
||||
}
|
||||
h3 {
|
||||
text-transform:uppercase;
|
||||
padding-top:0;
|
||||
margin-top:0;
|
||||
letter-spacing:5px;
|
||||
font-weight:400;
|
||||
}
|
||||
.top-row {
|
||||
width:100%;
|
||||
padding-top:60px;
|
||||
padding-bottom:60px;
|
||||
span {
|
||||
width:100%;
|
||||
display:block;
|
||||
text-align:center;
|
||||
font-weight:normal;
|
||||
}
|
||||
span.person-name {
|
||||
text-transform:uppercase;
|
||||
font-size:40px;
|
||||
letter-spacing:10px;
|
||||
}
|
||||
span.person-position {
|
||||
letter-spacing:5px;
|
||||
}
|
||||
}
|
||||
.left-col {
|
||||
width:26%;
|
||||
float:left;
|
||||
padding-left:8%;
|
||||
padding-right:4%;
|
||||
.person-image .image-centerer {
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
height:auto;
|
||||
overflow:hidden;
|
||||
.img {
|
||||
flex:none;
|
||||
background:url('../../resume/id.jpg');
|
||||
background-position:center;
|
||||
background-size:cover;
|
||||
height:250px;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
.contact h3 {
|
||||
text-align:center;
|
||||
margin-top:20px;
|
||||
}
|
||||
.contact .contact-row {
|
||||
text-align:center;
|
||||
letter-spacing:2px;
|
||||
margin-bottom:3px;
|
||||
a {
|
||||
color:black;
|
||||
}
|
||||
}
|
||||
.contact .contact-row:first-of-type {
|
||||
margin-top:50px;
|
||||
}
|
||||
.contact .contact-row:last-of-type {
|
||||
margin-bottom:50px;
|
||||
}
|
||||
.contact .contact-row.dots {
|
||||
margin-top:20px;
|
||||
margin-bottom:15px;
|
||||
font-size:10px;
|
||||
color:rgba(153,153,153,0.6);
|
||||
}
|
||||
}
|
||||
.right-col {
|
||||
width:50%;
|
||||
float:right;
|
||||
padding-left:4%;
|
||||
padding-right:8%;
|
||||
.experience-block {
|
||||
margin-bottom:10px;
|
||||
.row:first-child {
|
||||
margin-bottom:3px;
|
||||
}
|
||||
.row .company {
|
||||
text-transform:uppercase;
|
||||
font-size:12px;
|
||||
}
|
||||
.row .job-title {
|
||||
font-size:12px;
|
||||
}
|
||||
}
|
||||
.projects {
|
||||
margin-top:50px;
|
||||
.project-block {
|
||||
margin-bottom:10px;
|
||||
.degree {
|
||||
font-size:12px;
|
||||
text-transform:uppercase;
|
||||
margin-bottom:3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.education {
|
||||
margin-top:50px;
|
||||
.education-block {
|
||||
margin-bottom:10px;
|
||||
.degree {
|
||||
font-size:12px;
|
||||
text-transform:uppercase;
|
||||
margin-bottom:3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.skills-block {
|
||||
text-align:center;
|
||||
margin-top:50px;
|
||||
position:relative;
|
||||
.skills {
|
||||
text-align:center;
|
||||
margin-bottom:10px;
|
||||
margin-bottom:20px;
|
||||
position:relative;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
display:inline-block;
|
||||
.skill {
|
||||
text-align:center;
|
||||
width:80px;
|
||||
height:80px;
|
||||
border-radius:50%;
|
||||
position:relative;
|
||||
border:#333333 1px solid;
|
||||
margin:3px;
|
||||
float:left;
|
||||
font-size:13px;
|
||||
.skill-name {
|
||||
text-align:center;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
transform:translateY(-50%);
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
.skills-other {
|
||||
display:inline-block;
|
||||
width:100%;
|
||||
margin-top:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user