ilia/resume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #107 from lielfr/left-right-rtl

Browse Source 
Added a RTL version of left-right
This commit is contained in:
Sara Steiert 2017-10-21 21:11:50 +02:00 committed by GitHub
commit 7b34f39720
5 changed files with 235 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
pdf/left-right-rtl.pdf Normal file
View File

Binary file not shown.

BIN
src/assets/preview/resume-left-right-rtl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

8
src/pages/home.vue
View File

@ -54,6 +54,14 @@
</div>
</router-link>
</div>
<div class="preview">
<router-link v-bind:to="'/resume/left-right-rtl'">
<div class="preview-wrapper">
<img src="../assets/preview/resume-left-right-rtl.png" />
<span>left-right-rtl</span>
</div>
</router-link>
</div>
</div>
</div>
</template>

226
src/resumes/left-right-rtl.vue Executable file
View File

@ -0,0 +1,226 @@
<template>
<div class="resume" id="resume1">
<div class="row text-center">
<span class="name">{{person.name.first}} {{person.name.middle}} {{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>{{ lang.headings.experience }}</h3>
<div class="experience-block" v-for="experience in person.experience" :key="experience.company">
<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>{{ lang.headings.contact }}</h3>
<table>
<tr>
<td><i class="fa fa-envelope" aria-hidden="true"></i></td>
<td><a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a></td>
</tr>
<tr>
<td><i class="fa fa-phone" aria-hidden="true"></i></td>
<td><a :href="'tel:'+person.contact.phone">{{person.contact.phone}}</a></td>
</tr>
<tr>
<td><i class="fa fa-home" aria-hidden="true"></i></td>
<td>{{person.contact.street}} <br> {{person.contact.city}}</td>
</tr>
<tr v-if="person.contact.website">
<td><i class="fa fa-globe" aria-hidden="true"></i></td>
<td><a :href="person.contact.website">{{person.contact.website}}</a></td>
</tr>
<tr v-if="person.contact.github">
<td><i class="fa fa-github" aria-hidden="true"></i></td>
<td><a :href="'https://github.com/'+person.contact.github">https://github.com/{{person.contact.github}}</a></td>
</tr>
</table>
</div>
</div>
<div class="right half">
<div class="education">
<h3>{{ lang.headings.education }}</h3>
<div class="education-block" v-for="education in person.education" :key="education.degree">
<span class="degree">{{education.degree}}</span>
<span class="degree-description">{{education.description}}</span>
</div>
</div>
<h3>{{ lang.headings.skills }}</h3>
<div class="skills">
<div class="skill-block" v-for="skill in person.skills" :key="skill.name">
<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>
</template>
<script>
import Vue from 'vue';
import { getVueOptions } from './options';
let name = 'left-right-rtl';
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:20px;
padding-bottom:50px;
direction: rtl;
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:right;
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:20px;
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;
}
.skills-other {
color:#616161;
margin-bottom:10px;
}
.skills {
margin-top:20px;
margin-bottom:10px;
direction: ltr !important;
.skill-block {
padding-bottom:10px;
display:inline-block;
.skill {
width:100px;
color:#616161;
float:left;
text-align: 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%;
}
}
}
}
}
</style>

1
src/resumes/resumes.js
View File

@ -5,3 +5,4 @@ import './oblique.vue';
import './side-bar.vue';
import './purple.vue';
import './side-bar-rtl.vue';
import './left-right-rtl.vue';