create markup for resume
This commit is contained in:
parent
7a748143a5
commit
e913272be2
@ -1,7 +1,189 @@
|
||||
<template>
|
||||
<div class="resume" id="template">
|
||||
<h1>This is a template</h1>
|
||||
</div>
|
||||
<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__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 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>
|
||||
|
||||
<img class="picture"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user