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

FIX merge requests

Browse Source
This commit is contained in:
salomonelli 2020-04-29 21:25:09 +02:00
commit 617bcad19e
16 changed files with 380 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
pdf/cool-rtl.pdf
View File

Binary file not shown.

BIN
pdf/cool-rtl2.pdf
View File

Binary file not shown.

BIN
pdf/cool.pdf
View File

Binary file not shown.

BIN
pdf/creative.pdf
View File

Binary file not shown.

BIN
pdf/green.pdf
View File

Binary file not shown.

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

Binary file not shown.

BIN
pdf/left-right.pdf
View File

Binary file not shown.

BIN
pdf/material-dark.pdf
View File

Binary file not shown.

BIN
pdf/oblique.pdf
View File

Binary file not shown.

BIN
pdf/purple.pdf
View File

Binary file not shown.

BIN
pdf/side-bar-rtl.pdf
View File

Binary file not shown.

BIN
pdf/side-bar.pdf
View File

Binary file not shown.

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

8
src/pages/home.vue
View File

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

371
src/resumes/cool-rtl.vue Normal file
View File

@ -0,0 +1,371 @@
<template>
<div class="resume">
<div class="banner">
<div class="banner__fullname">{{ person.name.first }} {{ person.name.middle }} {{ person.name.last }}</div>
<div class="banner__position">{{ person.position }}</div>
<div class="banner__location">{{ lang.born }} {{person.birth.year}} {{ lang.bornIn }} {{person.birth.location}}</div>
</div>
<div class="content">
<div class="content__right">
<div class="section">
<div class="section-headline">
<i class="section-headline__icon material-icons">work</i>{{ lang.experience }}
</div>
<div class="section-content">
<a
v-for="(experience, index) in person.experience"
:key="index"
class="section-content__item"
:href="experience.website">
<span class="section-content__header">{{ experience.position }}</span>
<span class="section-content__subheader">
{{ experience.company }}
<span class="section-content__plain">{{ experience.location }}</span>
</span>
<div class="section-content__text">{{ experience.timeperiod }}</div>
<span class="section-content__text--light">{{ experience.description }}</span>
</a>
</div>
</div>
<div class="section">
<div class="section-headline">
<i class="section-headline__icon material-icons">school</i>{{ lang.education }}
</div>
<div class="section-content">
<a
v-for="(education, index) in person.education"
class="section-content__item"
:key="index"
:href="education.website">
<span class="section-content__header"> {{ education.school }} </span>
<span class="section-content__subheader">{{ education.degree }}</span>
<span class="section-content__text"> {{ education.timeperiod }} </span>
<span class="section-content__text--light"> {{ education.description }} </span>
</a>
</div>
</div>
<div
v-if="person.projects"
class="section">
<div class="section-headline">
<i class="section-headline__icon material-icons">code</i>{{ lang.projects }}
</div>
<div class="section-content-grid">
<a v-for="(project, index) in person.projects" :key="index"
class="section-content__item-grid"
:href="project.url">
<span class="section-content__header"> {{ project.name }} </span>
<span class="section-content__subheader">{{ project.platform }}</span>
<span class="section-content__text"> {{ project.description }} </span>
</a>
</div>
</div>
<div
v-if="person.contributions"
class="section">
<div class="section-headline">
<i class="section-headline__icon fa fa-heart"></i>{{lang.contributions}}
</div>
<div class="section-content-grid">
<a
v-for="(contribution, index) in person.contributions"
class="section-content__item-grid"
:key="index"
:href="contribution.url">
<span class="section-content__header"> {{ contribution.name }} </span>
<span class="section-content__text"> {{ contribution.description }} </span>
<span class="section-content__text--light" style="word-break: break-all;">
{{ contribution.url }}
</span>
</a>
</div>
</div>
</div>
<div class="content__left">
<div class="section">
<div class="section-headline">
{{ lang.about }}
</div>
<div class="section-content section-content--plain">
{{ person.about }}
<br/>
<br/>
{{ person.knowledge }}
</div>
</div>
<div
v-if="person.skills"
class="section">
<div class="section-headline">
{{ lang.skills }}
</div>
<div class="section-content-grid">
<a
v-for="(skill, index) in person.skills"
class="grid-item"
:key="index"
:href="skill.url">
<span class="squarred-grid-item">
{{ skill.name }}
</span>
</a>
</div>
</div>
<div class="section">
<div class="section-headline">
{{ lang.contact }}
</div>
<div class="section-content section-content--plain">
<div class="section-link">
<i class="section-link__icon material-icons">business</i>{{ person.contact.street }}
</div>
<a
class="section-link"
:href="contactLinks.email">
<i class="section-link__icon material-icons">mail</i>{{ person.contact.email }}
</a>
<div class="section-link">
<i class="section-link__icon material-icons">phone</i>{{ person.contact.phone }}
</div>
<a
v-if="person.contact.website"
class="section-link"
:href="person.contact.website">
<i class="section-link__icon fa fa-globe"></i>{{ person.contact.website }}
</a>
<a
v-if="person.contact.linkedin"
class="section-link"
:href="contactLinks.linkedin">
<i class="section-link__icon fa fa-linkedin"></i>{{ person.contact.linkedin }}
</a>
<a
v-if="person.contact.github"
class="section-link"
:href="contactLinks.github">
<i class="section-link__icon fa fa-github"></i>{{ person.contact.github }}
</a>
<a
v-if="person.contact.medium"
class="section-link"
:href="contactLinks.medium">
<i class="section-link__icon fa fa-medium"></i>{{ person.contact.medium }}
</a>
</div>
</div>
</div>
</div>
<img class="picture"/>
</div>
</template>
<script>
import Vue from 'vue';
import { getVueOptions } from './options';
const name = 'cool-rtl';
export default Vue.component(name, getVueOptions(name));
</script>
<style lang="less" scoped>
@accent-color: #34495E;
@banner-color: #42b883;
@banner-height: 120px;
@picture-size: 120px;
@picture-offset: 35px;
@base-padding: 30px;
@left-column-width: 240px;
a {
color: inherit;
cursor: pointer;
text-decoration-line: none;
&:visited {
color: inherit;
}
}
.resume {
position: relative;
font-family:'Roboto' !important;
font-size: 0.9em;
}
.picture {
position: absolute;
top: @banner-height - @picture-offset;
left: @left-column-width + @base-padding * 2 - @picture-size / 2;
height: @picture-size;
width: @picture-size;
border-radius: 50%;
border: 5px solid @accent-color;
content: url('../../resume/id.jpg');
z-index: 2;
}
.banner {
width: calc(100% - @base-padding * 2);
height: @banner-height;
padding: @base-padding;
background-color: @banner-color;
color: white;
&__fullname {
font-size: 32px;
}
&__position {
font-size: 16px;
}
&__location {
font-size: 12px;
}
}
.content {
display: flex;
width: 100%;
height: 100%;
&__left,
&__right {
height: 100%;
padding: @base-padding;
}
&__left {
width: @left-column-width;
color: rgba(255, 255, 255, 0.59);
background-color: @accent-color;
.section-headline {
color: white;
}
}
&__right {
flex: 1;
}
}
.section {
margin: 20px 0;
}
.section-link,
.section-headline {
display: flex !important;
align-items: center;
color: @accent-color;
display: inline-block;
font-size: 1.2em;
margin: 8px 0;
&__icon {
margin-right: 8px;
font-size: 1.4em;
}
}
.section-link {
font-size: 1.1em;
color: rgba(255, 255, 255, 0.59) !important;
&__icon {
color: white;
}
}
.section-content {
margin-top: 5px;
padding-left: 32px;
font-size: 14px;
&__item {
display: block;
margin-bottom: 5px;
}
&__header {
display: block;
font-size: 1.1em;
font-weight: 500;
}
&__subheader {
display: block;
font-weight: 400;
}
&__plain,
&__text {
display: block;
font-size: 12px;
&--light {
font-size: 12px;
}
}
&__plain {
display: inline;
font-weight: 300;
}
&__item-grid {
flex: 1 1 0;
margin-bottom: 5px;
padding-right: 5px;
}
&--plain {
padding: 0;
}
}
.section-content-grid {
display: flex;
flex-wrap: wrap;
margin-top: 5px;
margin-bottom: 5px;
}
.grid-item {
padding-right: 5px;
}
.squarred-grid-item {
display: block;
border: 1px solid white;
color: white;
margin-top: 5px;
padding: 5px;
}
</style>

1
src/resumes/resumes.js
View File

@ -8,5 +8,6 @@ import './side-bar-rtl.vue';
import './left-right-rtl.vue';
import './creative.vue';
import './cool.vue';
import './cool-rtl.vue';
import './cool-rtl2.vue';
import './green.vue';