create markup for resume

This commit is contained in:
Karthik Siddarth 2019-04-14 21:49:29 +05:30
parent 7a748143a5
commit e913272be2

View File

@ -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>