update

package.json

@@ -32,6 +32,8 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^6.2.2",
     "prettier": "^1.19.1",
+    "pug": "^3.0.2",
+    "pug-plain-loader": "^1.1.0",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/components/DownloadCV.vue

@@ -1,14 +1,16 @@
-<template>
-  <p class="download-cv">
-    <a :href="$store.state.filePDF" class="trans link" download>
-      <BaseIconDownload classname="is-large" />
-    </a>
-  </p>
+<template lang="pug">
+  p.download-cv
+    a.trans.link(:href='getFilePDF' download='')
+      BaseIconDownload(classname='is-large')
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 export default {
-  name: "DownloadCV"
+  name: "DownloadCV",
+  computed: {
+    ...mapGetters(["getFilePDF"])
+  }
 };
 </script>
 
@@ -23,4 +25,7 @@ export default {
   display: inline-block
   color: #888
   padding: 10px
+@media (max-width: 480px)
+  .download-cv
+    font-size: 10px
 </style>

src/components/ExperienceItem.vue

@@ -1,36 +1,25 @@
-<template>
-  <div class="timeline-item experience-item">
-    <p class="timeline-date">
-      <span class="lable strong">
-        {{ experience.time }}
-      </span>
-    </p>
-    <p class="timeline-job">
-      <span class="margin-r10"><BaseIconBriefcase /></span>
-      <span class="middle">{{ experience.position }}</span>
-    </p>
-    <p class="timeline-school">
-      <span class="margin-r10"><BaseIconCompany /></span>
-      <span class="middle">{{ experience.company }}</span>
-    </p>
-    <div class="text-inner">
-      <ul>
-        <li v-for="(todo, todoIndex) in experience.todos" :key="todoIndex">
-          {{ todo }}
-        </li>
-      </ul>
-      <p
-        class="timeline-desc"
-        v-if="experience.desc"
-        v-html="experience.desc"
-      ></p>
-    </div>
-    <ul class="d-flex flex-wrap margin">
-      <li v-for="(tag, tagIndex) in experience.tags" :key="tagIndex">
-        <Tag :tag="tag" />
-      </li>
-    </ul>
-  </div>
+<template lang="pug">
+  .timeline-item.experience-item
+    p.timeline-date
+      span.lable.strong
+        | {{ experience.time }}
+    p.timeline-job
+      span.icon.margin-r10
+        BaseIconBriefcase
+      span.middle {{ experience.position }}
+    p.timeline-school
+      span.icon.margin-r10
+        BaseIconCompany
+      span.middle {{ experience.company }}
+    .text-inner
+      ul
+        li(v-for='(todo, todoIndex) in experience.todos' :key='todoIndex')
+          | {{ todo }}
+      p.timeline-desc(v-if='experience.desc' v-html='experience.desc')
+    ul.d-flex.flex-wrap.margin
+      li(v-for='(tag, tagIndex) in experience.tags' :key='tagIndex')
+        tag(:tag='tag')
+
 </template>
 
 <script>

src/components/Hamburger.vue

@@ -1,7 +1,6 @@
-<template>
-  <div class="hamburger">
-    <BaseIconBars />
-  </div>
+<template lang="pug">
+  .hamburger
+    BaseIconBars
 </template>
 
 <script>

src/components/Modal.vue

@@ -1,18 +1,14 @@
-<template>
-  <div class="modal">
-    <div class="inner">
-      <div class="header">
-        <span class="icon trans" @click="$emit('close')">
-          <BaseIconClose />
-        </span>
-        <slot name="header"></slot>
-      </div>
-      <div class="main">
-        <slot name="main"></slot>
-      </div>
-    </div>
-    <div class="over" @click="$emit('close')"></div>
-  </div>
+<template lang="pug">
+  .modal
+    .inner
+      .header
+        span.icon.trans(@click="$emit('close')")
+          BaseIconClose
+        slot(name='header')
+      .main
+        slot(name='main')
+    .over(@click="$emit('close')")
+
 </template>
 
 <script>
@@ -80,4 +76,7 @@ export default {
     right: 0
     transform: translateY(-50%)
     color: #000
+  @media (max-width: 576px)
+    .inner
+      width: 90%
 </style>

src/components/NavPrimary.vue

@@ -1,29 +1,23 @@
-<template>
-  <nav class="nav-primary">
-    <ul class="nav-menu">
-      <li class="nav-item d-md-none">
-        <router-link tag="a" class="nav-link link trans" to="/person">
-          <div class="avatar-item">
-            <img src="@/assets/avatar.jpg" alt="Võ Tấn Đạt" />
-          </div>
-        </router-link>
-      </li>
-      <li
-        class="nav-item"
-        v-for="(item, index) in $store.state.menuPrimary"
-        :key="index"
-      >
-        <router-link tag="a" class="nav-link link trans" :to="item.to">
-          <component class="is-large" :is="item.icon" />
-        </router-link>
-      </li>
-    </ul>
-  </nav>
+<template lang="pug">
+  nav.nav-primary
+    ul.nav-menu
+      li.nav-item.d-md-none
+        router-link.nav-link.link.trans(tag='a' to='/person')
+          .avatar-item
+            img(src='@/assets/avatar.jpg' alt='Võ Tấn Đạt')
+      li.nav-item(v-for='(item, index) in getMenuPrimary' :key='index')
+        router-link.nav-link.link.trans(tag='a' :to='item.to')
+          component.is-large(:is='item.icon')
+
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 export default {
-  name: "NavPrimary"
+  name: "NavPrimary",
+  computed: {
+    ...mapGetters(["getMenuPrimary"])
+  }
 };
 </script>
 
@@ -57,4 +51,8 @@ export default {
         transform: scale(1.2)
       &:hover
         opacity: 1
+  @media (max-width: 320px)
+    &-link
+      .icon-svg
+        font-size: 22px
 </style>

src/components/PortfolioItem.vue

@@ -1,28 +1,17 @@
-<template>
-  <div class="portfolio">
-    <div class="portfolio-card">
-      <a
-        href="#"
-        class="portfolio-link"
-        @click.prevent="showModal = !showModal"
-      >
-        <p class="portfolio-heading">{{ heading }}</p>
-        <div class="portfolio-image">
-          <img :src="img" :alt="heading" />
-        </div>
-      </a>
-    </div>
-    <transition name="dropdown">
-      <Modal v-if="showModal" @close="showModal = false">
-        <p class="title" slot="header">
-          {{ heading }}
-        </p>
-        <div slot="main">
-          <img :src="img" :alt="heading" class="w-full image" />
-        </div>
-      </Modal>
-    </transition>
-  </div>
+<template lang="pug">
+  .portfolio
+    .portfolio-card
+      a.portfolio-link(href='#' @click.prevent='showModal = !showModal')
+        p.portfolio-heading {{ heading }}
+        .portfolio-image
+          img(:src='img' :alt='heading')
+    transition(name='dropdown')
+      Modal(v-if='showModal' @close='showModal = false')
+        p.title(slot='header')
+          | {{ heading }}
+        div(slot='main')
+          img.w-full.image(:src='img' :alt='heading')
+
 </template>
 
 <script>

src/components/ProgressBar.vue

@@ -1,15 +1,11 @@
-<template>
-  <div class="progress-bar">
-    <div class="d-flex justify-content-between align-items-center">
-      <p class="title">
-        {{ title }}
-      </p>
-      <p class="value text-green">{{ value }}%</p>
-    </div>
-    <div class="line">
-      <span class="active" :style="{ width: value + '%' }"></span>
-    </div>
-  </div>
+<template lang="pug">
+  .progress-bar
+    .d-flex.justify-content-between.align-items-center
+      p.title
+        | {{ title }}
+      p.value.text-green {{ value }}%
+    .line
+      span.active(:style="{ width: value + '%' }")
 </template>
 
 <script>
@@ -21,7 +17,7 @@ export default {
       default: "ProgressBar"
     },
     value: {
-      type: Number,
+      type: [Number, String],
       default: 90
     }
   }
@@ -38,6 +34,7 @@ export default {
     font-weight: 700
     color: #fff
     letter-spacing: .05em
+    line-height: 1.4
     text-transform: lowercase
   .line
     position: relative

src/components/Social.vue

@@ -1,23 +1,19 @@
-<template>
-  <div class="social-wrapper">
-    <ul class="d-flex justify-content-center align-items-center">
-      <li>
-        <a href="#" class="trans pointer-none" target="_blank">
-          <BaseIconLinkedin />
-        </a>
-      </li>
-      <li>
-        <a href="#" class="trans pointer-none" target="_blank">
-          <BaseIconFacebook />
-        </a>
-      </li>
-      <li>
-        <a href="#" class="trans pointer-none" target="_blank">
-          <BaseIconTwitter />
-        </a>
-      </li>
-    </ul>
-  </div>
+<template lang="pug">
+  .social-wrapper
+    ul.d-flex.justify-content-center.align-items-center.mb-0
+      li
+        a.trans(href='https://www.linkedin.com/in/datvt243' target='_blank')
+          BaseIconLinkedin
+      li
+        a.trans(href='https://github.com/datvt243' target='_blank')
+          BaseIconGithub
+      li
+        a.trans.pointer-none(href='#' target='_blank')
+          BaseIconFacebook
+      li
+        a.trans.pointer-none(href='#' target='_blank')
+          BaseIconTwitter
+
 </template>
 
 <script>

src/components/Tag.vue

@@ -1,12 +1,9 @@
-<template>
-  <span class="tag">
-    <span class="icon" v-if="icon != ''">
-      <component :is="icon" />
-    </span>
-    <span class="text">
-      {{ tag }}
-    </span>
-  </span>
+<template lang="pug">
+  span.tag
+    span.icon(v-if="icon != ''")
+      component(:is='icon')
+    span.text
+      | {{ tag }}
 </template>
 
 <script>
@@ -38,4 +35,7 @@ export default {
   .icon, .text
     display: inline-block
     vertical-align: middle
+  @media (max-width: 576px)
+    font-size: 12px
+    padding: 4px 10px
 </style>

src/components/icon/BaseIcon.vue

@@ -1,6 +1,6 @@
 <template>
   <span class="icon-svg" :class="classname">
-    <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <svg role="img" xmlns="http://www.w3.org/2000/svg" :viewBox="viewbox">
       <path fill="currentColor" :d="d"></path>
     </svg>
   </span>
@@ -17,6 +17,10 @@ export default {
     d: {
       type: String,
       default: ""
+    },
+    viewbox: {
+      type: String,
+      default: "0 0 448 512"
     }
   }
 };

src/components/icon/BaseIconGithub.vue

@@ -0,0 +1,22 @@
+<template>
+  <BaseIcon
+    :classname="classname"
+    d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4.2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9.2 36.5.2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9.4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7.6 3.9 1.9.3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2.2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7.9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2.4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8.9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1.9-1.1 2.8-.9 4.3.6 1.3 1.3 1.8 3.3.9 4.1zm-9.1-9.1c-.9.6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9.9-2.4.4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5.9-.9 2.4-.4 3.5.6 1.1 1.3 1.3 2.8.4 3.5zm-6.7-7.4c-.4.9-1.7 1.1-2.8.4-1.3-.6-1.9-1.7-1.5-2.6.4-.6 1.5-.9 2.8-.4 1.3.7 1.9 1.8 1.5 2.6z"
+  />
+</template>
+
+<script>
+import BaseIcon from "@/components/icon/BaseIcon.vue";
+export default {
+  name: "IconGithub",
+  components: {
+    BaseIcon
+  },
+  props: {
+    classname: {
+      type: String,
+      default: ""
+    }
+  }
+};
+</script>