<!doctype html>
<html lang="{{ lang }}">
  <head>
    <meta charset="utf-8" />
    <title>{{ resume.basics.name }}</title>
    <meta name="description" content="{{resume.basics.summary}}" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" />
    <style>
      :root {
  /* Colors */
  --primaryColor: #212529;
  --secondaryColor: #95a5a6;
  --accentColor: #f1c40f;
  --linkColor: #2ecc71;
  --mutedColor: #f4f6f6;

  /* Typography */
  --ratio: 1.25;
  --scale0: 1rem;
  --scale1: calc(var(--scale0) * var(--ratio));
  --scale2: calc(var(--scale1) * var(--ratio));
  --scale3: calc(var(--scale2) * var(--ratio));
  --scale4: calc(var(--scale3) * var(--ratio));
  --scale5: calc(var(--scale4) * var(--ratio));
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
}

body {
  color: var(--primaryColor);
  display: grid;
  font: 1em/1.5 Lato, sans-serif;
  gap: 2em;
  grid-template-columns:
    [full-start]
    1fr
    [main-start side-start]
    minmax(min-content, 12em)
    [side-end content-start]
    minmax(min-content, 36em)
    [main-end content-end]
    1fr
    [full-end];
  grid-template-rows: auto [content] 0;
  margin-bottom: 4em;
}

body::before {
  content: '';
  grid-column: full;
  grid-row: content;
}

ol,
ul {
  padding-left: 1em;
}

li + li {
  margin-top: 0.2em;
}

li::marker {
  color: var(--mutedColor);
}

a {
  color: var(--linkColor);
  text-decoration: none;
  transition: color 0.2s;
}

a:focus,
a:hover {
  color: var(--accentColor);
}

h1,
h2,
h3,
h5 {
  font-weight: normal;
}

h1,
h2,
h3 {
  line-height: 1.2;
}

h1 {
  font-size: var(--scale5);
}

h2 {
  color: var(--secondaryColor);
  font-size: var(--scale4);
}

h3 {
  color: var(--accentColor);
  font-size: var(--scale3);
  grid-column: side;
  margin-bottom: 1rem;
}

h4 {
  font-size: var(--scale2);
}

h5 {
  font-size: var(--scale1);
}

h6 {
  font-size: var(--scale0);
}

p:not(:first-child) {
  margin-top: 1em;
}

p:not(:last-child) {
  margin-bottom: 1em;
}

blockquote {
  border-left: 0.2em solid var(--mutedColor);
  padding-left: 1em;
}

cite {
  color: var(--secondaryColor);
  font-style: inherit;
}

cite::before {
  content: '— ';
}

header {
  background: var(--mutedColor);
  display: inherit;
  gap: inherit;
  grid-column: full;
  grid-template-columns: inherit;
  padding: 4em 0;
  row-gap: 0;
}

header > *,
section {
  grid-column: main;
}

.stack {
  display: grid;
  gap: 1.5em;
}

.grid-list {
  display: grid;
  gap: 1em;
}

.spaced-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.spaced-list:first-child::before {
  border-bottom: 1px solid var(--mutedColor);
  content: '';
  flex-grow: 1;
  margin: 0 1em;
  order: 1;
}

.spaced-list > :nth-child(2) {
  order: 2;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

.tag-list > li {
  background: var(--mutedColor);
  margin: 0 0.2em 0.2em 0;
  padding: 0.2em 0.6em;
}

@media (min-width: 48em) {
  h3 {
    text-align: right;
    margin-bottom: inherit;
  }

  header > *,
  section {
    grid-column: content;
  }

  section {
    display: contents;
  }

  .grid-list {
    grid-template-columns: 1fr 1fr;
  }
}

    </style>
  </head>
  <body>
<header>
    <h1>{{ resume.basics.name }}</h1>
    <h2>{{ resume.basics.label}}</h2>
</header>
<section id="contact">
  <h3>Contact</h3>
  <div class="grid-list">
      <div>
        <h6>Email</h6>
        <a href="mailto:{{ resume.basics.email }}">{{ resume.basics.email }}</a>
      </div>
      <div>
        <h6>Phone</h6>
        {{ resume.basics.phone }}
      </div>
    {% if resume.basics.url %}
      <div>
        <h6>Website</h6>
        <a href="{{ resume.basics.url }}">{{ resume.basics.url }}</a>
      </div>
    {% endif %}
  </div>
</section>
  <section id="about">
    <h3>About</h3>
    <div>
      <p>{{ resume.basics.summary }}</p>
    </div>
  </section>
{% if resume.basics.profiles %}
  <section id="profiles">
    <h3>Profiles</h3>
    <div class="grid-list">
      {% for item in resume.basics.profiles %}
        <div>
            <h6>{{ item.network }}</h6>
          {% if item.username %}
            {% if item.url %}
              <a href="{{ item.url }}">{{ item.username }}</a>
            {% else %}
              {{ item.username }}
            {% endif %}
          {% else %}
            {% if item.url %}
              <a href="{{ item.url }}">{{ item.url }}</a>
            {% endif %}
          {% endif %}
        </div>
      {% endfor %}
    </div>
  </section>
{% endif %}

{% if resume.work %}
  <section id="work">
    <h3>Work</h3>
    <div class="stack">
      {% for item in resume.work %}
        <article>
          <div class="spaced-list">
            <h4>{{ item.name }}</h4>
            <span>
              <time datetime="{{ item.startDate }}">{{ item.startDate|datetime_format }}</time> –
              {% if item.endDate %}<time datetime="{{ item.endDate}}">{{ item.endDate|datetime_format }}</time>{% else %}Present{% endif %}
            </span>
          </div>
          <div class="spaced-list">
              <strong>{{ item.position }}</strong>
              <a href="{{ item.url }}">{{ item.url }}</a>
          </div>
            <p>{{ item.summary }}</p>
          {% if item.highlights %}
            <h5>Highlights</h5>
            <ul>
              {% for highlight in item.highlights %}
                <li>{{ highlight }}</li>
              {% endfor %}
            </ul>
          {% endif %}
        </article>
      {% endfor %}
    </div>
  </section>
{% endif %}
{% if resume.volunteer %}
  <section id="volunteer">
    <h3>Volunteer</h3>
    <div class="stack">
      {% for item in resume.volunteer %}
        <article>
          <div class="spaced-list">
            <h4>{{ item.organization }}</h4>
            <span>
              <time datetime="{{ item.startDate }}">{{ item.startDate|datetime_format }}</time> –
              {% if item.endDate %}<time datetime="{{ item.endDate }}">{{ item.endDate|datetime_format }}</time>{% else %}Present{% endif %}
            </span>
          </div>
          <div class="spaced-list">
              <strong>{{ item.position }}</strong>
              <a href="{{ item.url }}">{{ item.url }}</a>
          </div>
            {% if item.summary %}<p>{{ item.summary }}</p>{% endif %}
          {% if item.highlights %}
            <h5>Highlights</h5>
            <ul>
              {% for item in highlights %}
                <li>{{ item }}</li>
              {% endfor %}
            </ul>
          {% endif %}
        </article>
      {% endfor %}
    </div>
  </section>
{% endif %}
{% if resume.education %}
  <section id="education">
    <h3>Education</h3>
    <div class="stack">
      {% for item in resume.education %}
        <article>
          <div class="spaced-list">
            <h4>{{ item.institution }}</h4>
            <span>
              <time datetime="{{ item.startDate }}">{{ item.startDate|datetime_format }}</time> –
              {% if item.endDate %}<time datetime="{{ item.endDate }}">{{ item.endDate|datetime_format }}</time>{% else %}Present{% endif %}
            </span>
          </div>
          <div class="spaced-list">
              <strong>{{ item.area }}</strong>
              <a href="{{ item.url }}">{{ item.url }}</a>
          </div>
            <p>{{ item.studyType}}</p>
          {% if item.courses %}
            <h5>Courses</h5>
            <ul>
              {% for item in courses %}
                <li>{{ item}}</li>
              {% endfor %}
            </ul>
          {% endif %}
        </article>
      {% endfor %}
    </div>
  </section>
{% endif %}
{% if resume.projects %}
  <section id="projects">
    <h3>Projects</h3>
    <div class="stack">
      {% for item in resume.projects %}
        <article>
          <div class="spaced-list">
            <h4>{{ item.name }}</h4>
            <span>
              <time datetime="{{ item.startDate }}">{{ item.startDate|datetime_format }}</time> –
              {% if item.endDate %}<time datetime="{{ item.endDate }}">{{ item.endDate|datetime_format }}</time>{% else %}Present{% endif %}
            </span>
          </div>
          <div class="spaced-list">
            <span>
              {% if item.roles %}
                <strong>{{ ''.join(item.roles) }}</strong>
              {% endif %}
                at <strong>{{ item.entity }}</strong>
            </span>
              <a href="{{ item.url }}">{{ item.url }}</a>
          </div>
            <p>{{ item.description }}</p>
          {% if item.highlights %}
            <h5>Highlights</h5>
            <ul>
              {% for highlight in highlights %}
                <li>{{ highlight }}</li>
              {% endfor %}
            </ul>
          {% endif %}
        </article>
      {% endfor %}
    </div>
  </section>
{% endif %}
{% if resume.awards %}
  <section id="awards">
    <h3>Awards</h3>
    <div class="stack">
      {% for award in resume.awards %}
        <article>
          <div class="spaced-list">
            <h4>{{ award.title }}</h4>
              <time datetime="{{ award.date }}">{{ award.date }}</time>
          </div>
          <div class="spaced-list">
              <div>
                Awarded by <strong>{{ award.awarder }}</strong>
              </div>
          </div>
            <p>{{ award.summary }}</p>
        </article>
      {% endfor %}
    </div>
  </section>
{% endif %}
{% if resume.publications %}
  <section id="publications">
    <h3>Publications</h3>
    <div class="stack">
      {% for publication in resume.publications %}
        <article>
          <div class="spaced-list">
            <h4>{{ publication.name }}</h4>
            <time datetime="{{ publication.releaseDate }}">{{ releaseDate }}</time>
          </div>
          <div class="spaced-list">
              <span>
                Published by <strong>{{ publication.publisher }}</strong>
              </span>
              <a href="{{ publication.url }}">{{ publication.url }}</a>
          </div>
            <p>{{ publication.summary }}</p>
        </article>
      {% endfor %}
    </div>
  </section>
{% endif %}
{% if resume.skills %}
  <section id="skills">
    <h3>Skills</h3>
    <div class="grid-list">
      {% for skill in resume.skills %}
        <div>
            <h5>{{ skill.name }}</h5>
          {% if skill.keywords %}
            <ul class="tag-list">
              {% for keyword in skill.keywords %}
                <li>{{ keyword }}</li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  </section>
{% endif %}
{% if resume.languages %}
  <section id="languages">
    <h3>Languages</h3>
    <div class="grid-list">
      {% for language in resume.languages %}
        <div>
            <h6>{{language.language}}</h6>
          {{ language.fluency }}
        </div>
      {% endfor %}
    </div>
  </section>
{% endif %}
{% if resume.interests %}
  <section id="interests">
    <h3>Interests</h3>
    <div class="grid-list">
      {% for interest in resume.interests %}
        <div>
            <h5>{{ interest.name }}</h5>
          {% if interest.keywords %}
            <ul class="tag-list">
              {% for keyword in interest.keywords %}
                <li>{{ keyword }}</li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  </section>
{% endif %}
{% if resume.references %}
  <section id="references">
    <h3>References</h3>
    <div class="stack">
      {% for reference in resume.references %}
          <blockquote>
            <p>{{ reference.reference}}</p>
              <p>
                <cite>{{ reference.name}}</cite>
              </p>
          </blockquote>
      {% endfor %}
    </div>
  </section>
{% endif %}
  </body>
</html>
