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

Merge branch 'oblique-rtl' of https://github.com/lielfr/best-resume-ever into lielfr-oblique-rtl

Browse Source
This commit is contained in:
salomonelli 2020-04-29 21:45:51 +02:00
commit 577e45ea53
5 changed files with 219 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
pdf/oblique-rtl.pdf Normal file
View File

Binary file not shown.

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

8
src/pages/home.vue
View File

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

210
src/resumes/oblique-rtl.vue Normal file
View File

@ -0,0 +1,210 @@
<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.middle}} {{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>{{ lang.headings.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>
<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="education">
<h3>{{ lang.headings.education }}</h3>
<div class="education-block" v-for="education in person.education" :key="education.degree">
<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>{{ lang.headings.skills }}</h3>
<div class="skills" v-for="skill in person.skills" :key="skill.name">
<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.knowledge}} </span>
</div>
<div class="contact">
<h3>{{ lang.headings.contact }}</h3>
<a :href="'mailto:'+person.contact.email"> {{person.contact.email}}</a>
<span>;&nbsp;</span>
<a :href="'tel:'+person.contact.phone">{{person.contact.phone}}</a>
<span>;&nbsp;</span>
<span>{{person.contact.street}}, {{person.contact.city}}</span>
<span>;&nbsp;</span>
<a v-if="person.contact.website" :href="person.contact.website">
{{person.contact.website}}</a>
<span v-if="person.contact.website">;&nbsp;</span>
<a v-if="person.contact.github" :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';
let 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;
}
.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: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;
}
}
.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;
}
}
}
</style>

1
src/resumes/resumes.js
View File

@ -6,6 +6,7 @@ import './side-bar.vue';
import './purple.vue';
import './side-bar-rtl.vue';
import './left-right-rtl.vue';
import './oblique-rtl.vue';
import './creative.vue';
import './cool.vue';
import './cool-rtl.vue';