From e913272be26268c89297fa0d8fd7ed61bac6fd50 Mon Sep 17 00:00:00 2001
From: Karthik Siddarth <karthik.durai@stanzaliving.com>
Date: Sun, 14 Apr 2019 21:49:29 +0530
Subject: [PATCH] create markup for resume

---
 src/resumes/cool-rtl.vue | 188 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 185 insertions(+), 3 deletions(-)

diff --git a/src/resumes/cool-rtl.vue b/src/resumes/cool-rtl.vue
index af1f3b9..c9120ee 100755
--- a/src/resumes/cool-rtl.vue
+++ b/src/resumes/cool-rtl.vue
@@ -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>