Added Hebrew language and first RTL template
This commit is contained in:
Sara Steiert
GitHub
commit
0c8530bc49
11
src/lang/he.js
Normal file
11
src/lang/he.js
Normal file
@ -0,0 +1,11 @@
|
||||
/* eslint-disable */
|
||||
const he = {
|
||||
headings: {
|
||||
contact: 'יצירת קשר',
|
||||
experience: 'ניסיון',
|
||||
education: 'השכלה',
|
||||
skills: 'כישורים',
|
||||
about: 'תמצית'
|
||||
}
|
||||
};
|
||||
export default he;
|
||||
@ -84,5 +84,5 @@ export const PERSON = {
|
||||
website: 'johndoe.com',
|
||||
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
|
||||
};
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
// If you create a new resume, import it here:
|
||||
import '../resumes/material-dark.vue';
|
||||
import '../resumes/left-right.vue';
|
||||
import '../resumes/oblique.vue';
|
||||
import '../resumes/side-bar.vue';
|
||||
import '../resumes/purple.vue';
|
||||
import './material-dark.vue';
|
||||
import './left-right.vue';
|
||||
import './oblique.vue';
|
||||
import './side-bar.vue';
|
||||
import './purple.vue';
|
||||
import './side-bar-rtl.vue';
|
||||
|
||||
import { PERSON } from '../person';
|
||||
import { terms } from '../terms';
|
||||
|
||||
240
src/resumes/side-bar-rtl.vue
Normal file
240
src/resumes/side-bar-rtl.vue
Normal 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>
|
||||
@ -12,9 +12,10 @@ import ru from './lang/ru';
|
||||
import ptbr from './lang/pt-br';
|
||||
import hu from './lang/hu';
|
||||
import pl from './lang/pl';
|
||||
import he from './lang/he';
|
||||
import ja from './lang/ja';
|
||||
import nl from './lang/nl';
|
||||
|
||||
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
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user