Merge branch 'rootasjey-add-creative-resume'

resume/data.yml

@@ -17,6 +17,7 @@ experience:
   position: Developer
   timeperiod: since January 2016
   description: Programming and watching cute cat videos.
+  website: https://example.com
 
 - company: Company B
   position: Frontend Developer
@@ -32,6 +33,7 @@ education:
 - degree: Master of Arts
   timeperiod: March 2012 - December 2013
   description: Major in Hacking and Computer Penetration, University A, New York, USA.
+  website: https://example.com
 
 - degree: Bachelor of Science
   timeperiod: March 2009 - December 2011
@@ -58,6 +60,26 @@ skills:
 knowledge: Also proficient in Adobe Photoshop and Illustrator, grew up bilingual
   (English and Klingon).
 
+projects:
+- name: best-resume-ever
+  platform: Vue
+  description: 👔 💼 Build fast 🚀 and easy multiple beautiful resumes and create your best CV ever! Made with Vue and LESS.
+  url: https://github.com/salomonelli/best-resume-ever
+
+hobbies:
+- name: Video Games
+  iconClass: fa fa-gamepad
+  url: https://example.com
+
+- name: Drawing
+  iconClass: fa fa-pencil
+  url: https://example.com
+
+contributions:
+- name: best-resume-ever
+  description: 👔 💼 Build fast 🚀 and easy multiple beautiful resumes.
+  url: https://github.com/salomonelli/best-resume-ever
+
 contact:
   email: john.doe@email.com
   phone: 0123 456789

src/lang/ca.js

@@ -1,8 +1,11 @@
+// Catalan
 const lang = {
   contact: 'Contacte',
   experience: 'Experiència',
   education: 'Educació',
   skills: 'Habilitats',
+  projects: 'Projectes',
+  contributions: 'Contribucions',
   about: 'Sobre mi'
 };
 export default lang;

src/lang/cn.js

@@ -1,8 +1,11 @@
+// Chinese (Simplified)
 const lang = {
   contact: '联系方式',
   experience: '工作经历',
   education: '教育经历',
   skills: '技能专长',
+  projects: '项目',
+  contributions: '捐款',
   about: '自我介绍'
 };
 export default lang;

src/lang/de.js

@@ -1,3 +1,4 @@
+// Dutch
 const lang = {
   contact: 'Kontakt',
   born: 'Geboren',
@@ -5,6 +6,8 @@ const lang = {
   experience: 'Berufserfahrung',
   education: 'Schulbildung',
   skills: 'Qualifikationen',
+  projects: 'Projecten',
+  contributions: 'Bijdragen',
   about: 'Über mich'
 };
 export default lang;

src/lang/en.js

@@ -1,3 +1,4 @@
+// English
 const lang = {
   contact: 'Contact',
   born: 'Born',
@@ -5,6 +6,8 @@ const lang = {
   experience: 'Experience',
   education: 'Education',
   skills: 'Skills',
+  projects: 'Projects',
+  contributions: 'Contributions',
   about: 'About me'
 };
 export default lang;

src/lang/es.js

@@ -1,8 +1,11 @@
+// Spanish
 const lang = {
   contact: 'Contacto',
   experience: 'Experiencia',
   education: 'Educación',
   skills: 'Habilidades',
+  projects: 'Proyectos',
+  contributions: 'Contribuciones',
   about: 'Sobre mi'
 };
 export default lang;

src/lang/fr.js

@@ -1,3 +1,4 @@
+// French
 const lang = {
   contact: 'Contact',
   born: 'Né en',
@@ -5,6 +6,8 @@ const lang = {
   experience: 'Expérience professionelle',
   education: 'Formation',
   skills: 'Compétences',
+  projects: 'Projets',
+  contributions: 'Contributions',
   about: 'À propos de moi'
 };
 export default lang;

src/lang/he.js

@@ -1,8 +1,11 @@
+// Hebrew
 const lang = {
   contact: 'יצירת קשר',
   experience: 'ניסיון',
   education: 'השכלה',
   skills: 'כישורים',
+  projects: 'פרויקטים',
+  contributions: 'תרומות',
   about: 'תמצית'
 };
 export default lang;

src/lang/hu.js

@@ -1,8 +1,11 @@
+// Hungarian
 const lang = {
   contact: 'Kapcsolat',
   experience: 'Munkatapasztalat',
   education: 'Tanulmány',
   skills: 'Készségek',
+  projects: 'Projektek',
+  contributions: 'Hozzájárulások',
   about: 'Rólam'
 };
 export default lang;

src/lang/id.js

@@ -1,8 +1,11 @@
+// Indonesian
 const lang = {
   contact: 'Kontak',
   experience: 'Pengalaman',
   education: 'Pendidikan',
   skills: 'Keterampilan',
+  projects: 'Proyek',
+  contributions: 'Kontribusi',
   about: 'Tentang Saya'
 };
 export default lang;

src/lang/it.js

@@ -1,8 +1,11 @@
+// Italian
 const lang = {
   contact: 'Contatti',
   experience: 'Esperienza professionale',
   education: 'Formazione',
   skills: 'Competenze',
+  contributions: 'Contributi',
+  projects: 'Progetti',
   about: 'Su di me'
 };
 export default lang;

src/lang/ja.js

@@ -1,8 +1,11 @@
+// Japanese
 const lang = {
   contact: '連絡先',
   experience: '職務経歴',
   education: '学歴',
   skills: 'スキル',
+  projects: 'プロジェクト',
+  contributions: '貢献',
   about: '自己紹介'
 };
 export default lang;

src/lang/ko.js

@@ -1,8 +1,11 @@
+// Korean
 const lang = {
   contact: '연락처',
   experience: '경력',
   education: '학력',
   skills: '보유스킬',
+  projects: '프로젝트',
+  contributions: '기고',
   about: '자기소개'
 };
 export default lang;

src/lang/nl.js

@@ -1,8 +1,11 @@
+// Nederlands
 const lang = {
   contact: 'Contact',
   experience: 'Ervaringen',
   education: 'Opleidingen',
   skills: 'Skills',
+  projects: 'Projecten',
+  contributions: 'Bijdragen',
   about: 'Over mij'
 };
 export default lang;

src/lang/pl.js

@@ -1,8 +1,11 @@
+// Polish
 const lang = {
   contact: 'Kontakt',
   experience: 'Doświadczenie',
   education: 'Wykształcenie',
   skills: 'Umiejętności',
+  projects: 'Projektowanie',
+  contributions: 'Składki',
   about: 'O mnie'
 };
 export default lang;

src/lang/pt-br.js

@@ -1,9 +1,12 @@
+// Portuguese
 const lang = {
   contact: 'Contato',
   experience: 'Experiência Profissional',
   /* You can choose, "Educação" or "Formação Acadêmica"! But the second one is more professional and is more used. */
   education: 'Formação Acadêmica',
   skills: 'Competências',
+  projects: 'Projetos',
+  contributions: 'Contribuições',
   about: 'Sobre'
 };
 export default lang;

src/lang/pt.js

@@ -1,8 +1,11 @@
+// Portuguese
 const lang = {
   contact: 'Contactos',
   experience: 'Experiência Profissional',
   education: 'Educação',
   skills: 'Competências',
+  projects: 'Projetos',
+  contributions: 'Contribuições',
   about: 'Sobre mim'
 };
 export default lang;

src/lang/ru.js

@@ -1,8 +1,11 @@
+// Russian
 const lang = {
   contact: 'Контакты',
   experience: 'Опыт',
   education: 'Образование',
   skills: 'Навыки',
+  projects: 'проектов',
+  contributions: 'взносы',
   about: 'Обо мне'
 };
 

src/pages/home.vue

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

src/resumes/creative.vue

@@ -0,0 +1,499 @@
+<template>
+  <div class="resume" id="resume2">
+    <div class="left-column">
+      <div>
+        <div class="headline">
+          <span> {{ person.name.first }} {{ person.name.middle }} </span>
+          <span class="uppercase"> {{ person.name.last }} </span>
+        </div>
+
+        <p>
+          <span class="txt-full-white"> {{ person.position }} </span>
+          <br/>
+          <span> {{ person.contact.city }} </span>
+        </p>
+      </div>
+
+      <div class="multi-line-txt">
+        {{ person.about }}
+      </div>
+
+      <div class="multi-line-txt">
+        {{ person.knowledge }}
+      </div>
+
+      <a :href="'mailto:' + person.contact.email">
+        <div class="block-marged txt-full-white">
+          {{ person.contact.email }}
+        </div>
+      </a>
+
+      <div class="block-marged txt-full-white">
+        {{ person.contact.phone }}
+      </div>
+
+      <div class="social-container">
+        <a v-if="person.contact.website"
+          :href="person.contact.website">
+
+          <div class="block-marged txt-full-white">
+            <i class="fa fa-globe contact-icon"></i>
+            {{ person.contact.website }}
+          </div>
+        </a>
+
+        <a v-if="person.contact.github"
+          :href="'https://github.com/' + person.contact.github"
+          class="external-link">
+
+          <i class="fa fa-github contact-icon"></i>
+          <span class="block-marged txt-full-white">
+            {{ person.contact.github }}
+          </span>
+        </a>
+
+        <a v-if="person.contact.codefights"
+          :href="'https://codefights.com/profile/' + person.contact.codefights"
+          class="external-link">
+
+          <svg width="20" height="20" viewBox="0 0 24 24"
+            class="contact-icon-svg">
+            <path d="M12 15.2L9.2 4.8 0 3.2l1.7 2.6 5.7.7.7 2.3-3.7-.4 1.3 2 3 .3L12 20.8l3.3-10.1 3-.3 1.3-2-3.7.4.7-2.3 5.7-.7L24 3.2l-9.2 1.6">
+            </path>
+          </svg>
+
+          <span class="block-marged txt-full-white">
+            {{ person.contact.codefights }}
+          </span>
+        </a>
+
+        <a v-if="person.contact.medium"
+          :href="'https://medium.com/@' + person.contact.medium"
+          class="external-link">
+          <i class="fab fa-medium contact-icon"></i>
+          <span class="block-marged txt-full-white">
+            {{ person.contact.medium }}
+          </span>
+        </a>
+      </div>
+
+      <div class="hobbies-container">
+        <!-- <span class="subheadline">Hobbies</span> -->
+        <div class="hobbies-content">
+          <a v-for="(hobby, index) in person.hobbies" :key="index"
+            class="hobby-item"
+            :href="hobby.url">
+
+            <i v-if="hobby.iconClass" :class="hobby.iconClass + ' hobby-item__icon'"></i>
+            <span class="hobby-item__icon-label"> {{ hobby.name }} </span>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="left-column-bg">
+      <!-- <div><a href="/otot">toto</a></div> -->
+    </div>
+
+    <div class="right-column">
+      <div class="experience-section section">
+        <div class="icon">
+          <i class="material-icons small-icon">work</i>
+          <span class="section-headline">{{ lang.experience }}</span>
+        </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>
+            <div class="section-content__text"> {{ experience.timeperiod }}</div>
+            <span class="section-content__text--light"> {{ experience.description }}</span>
+          </a>
+        </div>
+      </div>
+
+      <div class="education-section section">
+        <div class="icon">
+          <i class="material-icons">school</i>
+          <span class="section-headline">{{ lang.education }}</span>
+        </div>
+
+        <div class="section-content">
+          <a v-for="(education, index) in person.education" :key="index"
+            class="section-content__item"
+            :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="projects-section section">
+        <div class="icon">
+          <i class="material-icons">code</i>
+          <span class="section-headline"> {{ lang.projects }} </span>
+        </div>
+
+        <div class="section-content">
+          <a v-for="(project, index) in person.projects" :key="index"
+            class="section-content__item"
+            :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>
+            <span class="section-content__text--light"> {{ project.url }} </span>
+          </a>
+        </div>
+      </div>
+
+      <div v-if="person.skills"
+        class="skills-section section">
+        <div class="icon">
+          <i class="material-icons">done_all</i>
+          <span class="section-headline"> {{ lang.skills }} </span>
+        </div>
+
+        <div class="section-content-grid">
+          <a v-for="(skill, index) in person.skills" :key="index"
+            class="grid-item"
+            :href="skill.url">
+
+            <i v-if="skill.iconClass" :class="'lang-icon ' + skill.iconClass"></i>
+
+            <span v-else class="squarred-grid-item"> {{ skill.name }} </span>
+          </a>
+        </div>
+      </div>
+
+      <div v-if="person.contributions"
+        class="contributions-section section">
+
+        <div class="icon">
+          <i class="fa fa-heart font-awesome-icons"></i>
+          <span class="section-headline"> {{lang.contributions}} </span>
+        </div>
+
+        <div class="section-content-grid">
+          <a v-for="(contribution, index) in person.contributions" :key="index"
+            :href="contribution.url"
+            class="section-content__item-grid">
+
+            <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>
+</template>
+
+<script>
+import Vue from 'vue';
+import { getVueOptions } from './options';
+
+let name = 'creative';
+
+export default Vue.component(name, getVueOptions(name));
+</script>
+
+<style lang="less" scoped>
+
+@accent-color: #A800FA;
+
+.resume {
+  display: flex;
+  position: relative;
+
+  font-family:'Roboto' !important;
+  font-size: 0.9em;
+}
+
+.left-column {
+  width: 30%;
+  height: 100%;
+  padding: 30px;
+  padding-top: 45px;
+  text-align: left;
+
+  color: #ffffff;
+  color:rgba(255,255,255,0.59);
+  background-color: @accent-color;
+  overflow: hidden;
+  display: block;
+  z-index: 2;
+
+  opacity: 1; // lower this value (0.7 approx.) to see the cover image
+  position: absolute;
+}
+
+// Background cover displayed on the left-column side
+// ------------
+.left-column-bg {
+  // You can put your own cover image in the url path
+  // --------------------------------------
+  // background: url('../assets/cover.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 25% 25%;
+  opacity: .4; // up this value to contrast the cover image
+
+  height: 100%;
+  width: 35%;
+  padding: 30px;
+  padding-top: 45px;
+
+  display: block;
+  overflow: hidden;
+  position: relative;
+  top: 0;
+  z-index: 1;
+}
+
+.right-column {
+  display: flex;
+  flex-direction: column;
+  padding: 30px;
+
+  height: 100%;
+  width: 65%;
+}
+
+a {
+  color: inherit;
+  cursor:pointer;
+  text-decoration-line: none;
+
+  &:visited {
+    color: inherit;
+  }
+}
+
+.material-icons {
+  color: @accent-color;
+  position: relative;
+  top: 5px;
+}
+
+.font-awesome-icons {
+  color: @accent-color;
+  font-size: 1.3em;
+  margin-right: 6px;
+}
+
+.small-icon {
+  top: 2.5px;
+  font-size: 1.4em;
+}
+
+.contact-icon {
+  color: white;
+  font-size: 1.5em;
+  margin-right: 10px;
+
+  top: 2px;
+  position: relative;
+}
+
+.contact-icon-svg {
+  margin-top: -2.5px;
+  margin-right: 10px;
+
+  transform: scale(1);
+
+  top: 5px;
+  position: relative;
+}
+
+.contact-icon-svg path {
+  fill: white;
+}
+
+.external-link {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.block-marged {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.multi-line-txt {
+  margin-top: 30px;
+  margin-bottom: 20px;
+}
+
+.social-container {
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+
+.headline {
+  color: white;
+  font-size: 1.3em;
+  font-weight: bold;
+}
+
+.txt-full-white {
+  color: white;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.section-headline {
+  color: @accent-color;
+  display: inline-block;
+  font-size: 1.2em;
+  margin-left: 5px;
+}
+
+.section-content {
+  margin-top: 10px;
+  padding-left: 32px;
+}
+
+.section-content__item {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.section-content__item-grid {
+  flex: 1 1 0;
+
+  margin-bottom: 10px;
+  padding-right: 10px;
+}
+
+.section-content-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-left: 32px;
+}
+
+.grid-item {
+  padding-right: 20px;
+}
+
+.section-content__header {
+  display: block;
+
+  font-size: 1.1em;
+  font-weight: 500;
+}
+
+.squarred-grid-item {
+  display: block;
+
+  border: 1px solid @accent-color;
+
+  background-color: @accent-color;
+  color: white;
+
+  margin-top: 5px;
+  padding: 5px;
+
+  transition: .5s;
+
+  &:hover {
+    background-color: transparent;
+    color: @accent-color;
+    transition: .5s;
+  }
+}
+
+.section-content__subheader {
+  display: block;
+  font-weight: 400;
+}
+
+.section-content__text {
+  display: block;
+  font-weight: 300;
+}
+
+.section-content__text--light {
+  color: rgba(0,0,0,0.42);
+  font-weight: 300;
+}
+
+.section-content__subheader,
+.section-content__text--light,
+.section-content__header {
+  line-height: 1.5em;
+}
+
+.section {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.lang-icon {
+  color: rgba(0,0,0,0.72);
+  font-size: 3em;
+
+  &:hover {
+    color: @accent-color;
+  }
+}
+
+.hobbies-container {
+  margin-top: 30px;
+}
+
+.hobbies-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.hobby-item {
+  display: grid;
+  grid-template-columns: 30px auto;
+
+  color: rgba(255, 255, 255, .6);
+
+  margin-right: 25px;
+  margin-bottom: 10px;
+
+  transition: .5s;
+
+  &:hover {
+    color: rgba(255, 255, 255, .8);
+    transition: .5s;
+  }
+}
+
+.hobby-item__icon {
+  font-size: 1.3em;
+}
+
+.hobby-item__icon-label {
+  top: 2.5px;
+  position: relative;
+}
+
+.subheadline {
+  color: rgba(255, 255, 255, .8);
+  font-size: 1.2em;
+
+  display: block;
+  margin-bottom: 10px;
+}
+
+</style>

src/resumes/resumes.js

@@ -6,3 +6,4 @@ import './side-bar.vue';
 import './purple.vue';
 import './side-bar-rtl.vue';
 import './left-right-rtl.vue';
+import './creative.vue';