<%- css("/css/8d8ebf8c.css")%>

<div class="resume scrollbar-obtrusive">
  <div class="container">
    <aside>
      <div class="base">
        <figure>
          <img src="/img/avatar.png" alt="">
        </figure>
        <h3><%- page.name %></h3>
        <div class="badge">
          <span><%- page.role %></span>
        </div>
        <div class="seperation"></div>
        <ul>
          <li>
            <span class="icon girdle-box">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="3" y="5" width="18" height="14" rx="2"></rect>
                  <path d="M3 7l9 6l9-6"></path>
                </g>
              </svg>
            </span>
            <div>
              <p>email</p>
              <h4><%- page.email %></h4>
            </div>
          </li>
          <li>
            <span class="icon girdle-box">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                <path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
            <div>
              <p>phone</p>
              <h4><%- page.phone %></h4>
            </div>
          </li>
          <li>
            <span class="icon girdle-box">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="4" y="5" width="16" height="16" rx="2"></rect>
                  <path d="M16 3v4"></path>
                  <path d="M8 3v4"></path>
                  <path d="M4 11h16"></path>
                  <path d="M11 15h1"></path>
                  <path d="M12 15v3"></path>
                </g>
              </svg>
            </span>
            <div>
              <p>BIRTHDAY</p>
              <h4><%- page.birth %></h4>
            </div>
          </li>
          <li>
            <span class="icon girdle-box">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                <path d="M21 3l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1L21 3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
            <div>
              <p>LOCATION</p>
              <h4><%- page.location %></h4>
            </div>
          </li>
        </ul>
        <div class="social">
          <% if (page.social) { %>
          <% page.social.forEach(function(item) { %>
          <a href="<%= item.link %>" class="tip" data-tip="<%= item.name %>">
            <%- item.icon %>
          </a>
          <% }) %>
          <% } %>
        </div>
      </div>
    </aside>
    <main>
      <h2><%- __('text-resume') %></h2>
      <!-- introduction -->
      <div class="about-me">
        <% if (page.about) { %>
        <% page.about.forEach(function(text) { %>
        <p><%- text %></p>
        <% }) %>
        <% } %>
      </div>
      <h4><%- __('text-skill') %></h4>
      <ul class="skill">
        <% if (page.skill) { %>
        <% page.skill.forEach(function(text) { %>
        <li><%- text %></li>
        <% }) %>
        <% } %>
      </ul>
      <!-- edutcation -->
      <ul>
        <li class="title">
          <span class="girdle-box">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 9L12 5L2 9l10 4l10-4v6"></path>
                <path d="M6 10.6V16a6 3 0 0 0 12 0v-5.4"></path>
              </g>
            </svg>
          </span>
          <h4><%- __('text-education') %></h4>
        </li>
        <li class="item">
          <% if (page.education) { %>
          <% page.education.forEach(function(item) { %>
          <p class="name"><%- item.school %></p>
          <div class="period"><%- item.time %></div>
          <% }) %>
          <% } %>
        </li>
      </ul>
      <!-- experience -->
      <ul>
        <li class="title">
          <span class="girdle-box">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M8 9l5 5v7H8v-4m0 4H3v-7l5-5m1 1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v17h-8"></path>
                <path d="M13 7v.01"></path>
                <path d="M17 7v.01"></path>
                <path d="M17 11v.01"></path>
                <path d="M17 15v.01"></path>
              </g>
            </svg>
          </span>
          <h4><%- __('text-workExp') %></h4>
        </li>
        <% if (page.workExp) { %>
        <% page.workExp.forEach(function(item) { %>
        <li class="item">
          <p class="name"><%- item.inc %></p>
          <div class="period"><%- item.time %></div>
        </li>
        <% }) %>
        <% } %>
      </ul>
      <!-- Project experience  -->
      <ul class="project">
        <li class="title">
          <span class="girdle-box">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M7 8l-4 4l4 4"></path>
                <path d="M17 8l4 4l-4 4"></path>
                <path d="M14 4l-4 16"></path>
              </g>
            </svg>
          </span>
          <h4><%- __('text-project') %></h4>
        </li>
        <% if (page.projectExp) { %>
        <% page.projectExp.forEach(function(item) { %>
        <li class="item">
          <p class="name">
            <label class="tip left" data-tip="<%- __('text-project-name') %>"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M12 15H5.5a2.5 2.5 0 1 1 0-5H6"></path>
                  <path d="M15 12v6.5a2.5 2.5 0 1 1-5 0V18"></path>
                  <path d="M12 9h6.5a2.5 2.5 0 1 1 0 5H18"></path>
                  <path d="M9 12V5.5a2.5 2.5 0 0 1 5 0V6"></path>
                </g>
              </svg>
            </label><%- item.name %>
          </p>
          <div class="desc"><%- item.desc %></div>
          <ul class="list">
            <% if (item.list) { %>
            <% item.list.forEach(function(detail) { %>
            <li><%- detail %></li>
            <% }) %>
            <% } %>
          </ul>
        </li>
        <% }) %>
        <% } %>
      </ul>
    </main>
  </div>
</div>

<%- js("/js/31d6cfe0.js")%>