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

Merge pull request #83 from yoavmmn/side-bar-rtl (RTL template #8)

Browse Source 
Added Hebrew language and first RTL template
This commit is contained in:
Sara Steiert 2017-10-18 14:45:55 +02:00 committed by GitHub
commit 0c8530bc49
5 changed files with 260 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/lang/he.js Normal file
View File

@ -0,0 +1,11 @@
/* eslint-disable */
const he = {
headings: {
contact: 'יצירת קשר',
experience: 'ניסיון',
education: 'השכלה',
skills: 'כישורים',
about: 'תמצית'
}
};
export default he;

2
src/person.js
View File

@ -84,5 +84,5 @@ export const PERSON = {
website: 'johndoe.com', website: 'johndoe.com',
github: 'johnyD' github: 'johnyD'
}, },
lang: 'en' // en, de, fr, pt, cn, it, es, th, pt-br, ru, sv, id, hu, pl, ja, nl lang: 'en' // en, de, fr, pt, cn, it, es, th, pt-br, ru, sv, id, hu, pl, ja, nl, he
}; };

11
src/resumes/resumes.js
View File

@ -1,9 +1,10 @@
// If you create a new resume, import it here: // If you create a new resume, import it here:
import '../resumes/material-dark.vue'; import './material-dark.vue';
import '../resumes/left-right.vue'; import './left-right.vue';
import '../resumes/oblique.vue'; import './oblique.vue';
import '../resumes/side-bar.vue'; import './side-bar.vue';
import '../resumes/purple.vue'; import './purple.vue';
import './side-bar-rtl.vue';
import { PERSON } from '../person'; import { PERSON } from '../person';
import { terms } from '../terms'; import { terms } from '../terms';

240
src/resumes/side-bar-rtl.vue Normal file
View File

@ -0,0 +1,240 @@
<template>
<div id="resume2" class="resume">
<div class="top-row">
<span class="person-name">
{{person.name.first}} {{person.name.middle}} {{person.name.last}}
</span>
<span class="person-position">
{{person.position}}
</span>
</div>
<div class="right-col">
<div class="person-image">
<div class="image-centerer">
<div class="img"></div>
</div>
</div>
<div class="contact">
<h3>{{ lang.headings.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="left-col">
<div class="experience">
<h3>{{ lang.headings.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>{{ lang.headings.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>{{ lang.headings.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 Vue from 'vue';
import { getVueOptions } from './resumes';
let name = 'side-bar-rtl';
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;
text-align:right;
direction: rtl;
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:100px;
padding-bottom:100px;
span {
width:100%;
display:block;
text-align:center;
font-weight:normal;
}
span.person-name {
text-transform:uppercase;
font-size:50px;
letter-spacing:10px;
}
span.person-position {
letter-spacing:5px;
}
}
.right-col {
width:26%;
float:right;
padding-right:8%;
padding-left:4%;
.person-image .image-centerer {
display:flex;
justify-content:center;
height:auto;
overflow:hidden;
.img {
flex:none;
background:url('../assets/person.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.dots {
margin-top:20px;
margin-bottom:15px;
font-size:10px;
color:rgba(153,153,153,0.6);
}
}
.left-col {
width:50%;
float:left;
padding-right:4%;
padding-left:8%;
.experience-block {
margin-bottom:10px;
.row:first-child {
margin-bottom:3px;
}
.row .company {
text-transform:uppercase;
font-size:19px;
}
.row .job-title {
font-size:19px;
}
}
.education {
margin-top:50px;
.education-block {
margin-bottom:10px;
.degree {
font-size:19px;
text-transform:uppercase;
margin-bottom:3px;
}
}
}
.skills-block {
margin-top:50px;
position:relative;
.skills {
margin-bottom:10px;
margin-bottom:20px;
position:relative;
margin-left:auto;
margin-right:auto;
display:inline-block;
.skill {
width:80px;
height:80px;
border-radius:50%;
position:relative;
border:#333333 1px solid;
margin:3px;
float:right;
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>

3
src/terms.js
View File

@ -12,9 +12,10 @@ import ru from './lang/ru';
import ptbr from './lang/pt-br'; import ptbr from './lang/pt-br';
import hu from './lang/hu'; import hu from './lang/hu';
import pl from './lang/pl'; import pl from './lang/pl';
import he from './lang/he';
import ja from './lang/ja'; import ja from './lang/ja';
import nl from './lang/nl'; import nl from './lang/nl';
export const terms = { export const terms = {
en, de, fr, pt, cn, it, es, th, 'pt-br': ptbr, ru, sv, id, hu, pl, ja, nl en, de, fr, pt, cn, it, es, th, 'pt-br': ptbr, ru, sv, id, hu, pl, ja, nl, he
}; };