<!DOCTYPE html>
<!--
  This awesome resume was created {{#if resume.basics.name}}by {{resume.basics.name}} {{/if}}with the JSON resume schema: https://jsonresume.org/
  It uses the Foundation Zurb theme: https://github.com/DavidEngland/jsonresume-theme-zurb.git
-->
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{resume.basics.name}}</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Titillium+Web:400,400i,700,700i" rel="stylesheet">
  <!-- <link href="assets/css/foundation-icons.css" rel="stylesheet" > -->
  <!-- <link href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css" rel="stylesheet"> -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.min.css" />
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/foundation.min.css" integrity="sha256-haz1W/Eq5M2zCNvLT8+8rjKxmMvlrNJCHuiELtL8/a4=" crossorigin="anonymous" /> -->
  <!-- <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet"> -->
  <link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?libdco">
  <style>
  {{{ css }}}
  </style>

</head>

<body>
  <div class="column row">
    <div id="resume" itemscope itemtype="http://schema.org/Person">
      {{#resume.basics}}
        <div id="info" class="media-object stack-for-small">
          {{#if picture}}
            <div class="media-object-section middle">
              <div class="thumbnail">
                <img src="{{picture}}" alt="Photo of {{name}}" class="avatar" itemprop="image">
              </div>
            </div>
          {{/if}}
          <div class="media-object-section">
            <h1 itemprop="name">{{name}}</h1>
            <h2 class="subheader" itemprop="description">{{label}}</h2>
            <ul class="bar">
              {{#if phone}}
                <li class="phone">
                  &nbsp;<a href="tel://{{phone}}" class="link-disguise info" itemprop="telephone">{{phone}}</a>
                </li>
              {{/if}}
              {{#if website}}
                <li class="website">
                  &nbsp;<a href="{{website}}" target="_blank" itemprop="url">{{website}}</a>
                </li>
              {{/if}}
              {{#if email}}
                <li class="email">
                  &nbsp;<a href="mailto:{{email}}" class="link-disguise info" itemprop="email">{{email}}</a>
                </li>
              {{/if}}
            </ul>
            {{#location}}
              <!-- <div class="row"> -->
              <div id="location" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                <ul class="bar">
                  {{#if address}}
                    <li itemprop="streetAddress" class="address">
                      {{address}}
                    </li>
                  {{/if}}
                  {{#if city}}
                    <li itemprop="addressLocality" class="city">{{city}}</li>
                  {{/if}}
                  {{#if region}}
                    <li itemprop="addressRegion" class="region">{{region}}</li>
                  {{/if}}
                  {{#if postalCode}}
                    <li itemprop="postalCode" class="postalCode">{{postalCode}}</li>
                  {{/if}}
                  {{#if countryCode}}
                    <li itemprop="addressCountry" class="countryCode">{{countryCode}}</li>
                  {{/if}}
                </ul>
              </div>
            {{/location}}
            {{#if profiles.length}}
                <div id="profiles" class="rounded-social-buttons">
                  {{#each profiles}}
                    {{#if network}}
                      <a href="{{url}}" itemprop="sameAs" class="social-button {{santify url network}}" target="_blank"><span class="socicon socicon-{{santify url network}}"></span><span></span></a>
                    {{/if}}
                  {{/each}}
                </div>
            {{/if}}
          </div>
        </div>
      {{/resume.basics}}
      {{#if resume.skills.length}}
        <div id="skills" itemscope itemtype="http://schema.org/ListItem">
          <h2 itemprop="name" itemref="#skills">Skills</h2>
          <div class="row align-spaced">
            {{#each resume.skills}}
              <!-- <div class="small-6 medium-4 large-3 columns"> -->
              <div class="column small-12 medium-4 large-3">
                <div class="callout-card {{map level}} radius">
                  {{#if level}}
                    <div class="card-label">
                      <div class="label-text">{{level}}</div>
                    </div>
                  {{/if}}
                  <div class="callout-card-content">
                  {{#if name}}
                    <h3 class="small text-center name">{{name}}</h3>
                    <!-- <meta name="position" content="{{@index}}" /> -->
                  {{/if}}
                  {{#if keywords.length}}
                      <ul class="csv keywords">
                        {{#each keywords}}
                          <!-- <meta name="position" content="{{@index}}" /> -->
                          <li itemprop="item">{{.}}</li>
                        {{/each}}
                      </ul>
                  {{/if}}
                  </div>
                </div>
              </div>
            {{/each}}
          </div>
        </div>
      {{/if}}
      {{#if resume.work.length}}
        <div id="work">
          <h2>Work Experience</h2>
          {{#each resume.work}}
            <div class="row" itemprop="worksFor" itemscope itemtype="http://schema.org/OrganizationRole">
              <meta itemprop="startDate" content="{{startDate}}" />
              {{#if endDate}}
                <meta itemprop="endDate" content="{{endDate}}" />
              {{/if}}
              <div itemprop="worksFor" itemscope itemtype="http://schema.org/Organization" class="callout-card radius primary">
                <div class="row">
                  <div class="callout-card-content">
                    <div class="row">
                      {{#if position}}
                        <div class="small-12 medium-5 large-5 columns">
                          <h4 class="position">{{position}}</h4>
                        </div>
                      {{else}}
                        <div class="small-12 medium-5 large-5 columns"></div>
                      {{/if}}
                      {{#if company}}
                        <div class="small-12 medium-5 large-5 columns">
                          {{#if website}}
                            <a itemprop="url" href="{{website}}" target="_blank"><h3 class="small" itemprop="name">{{company}}</h3></a>
                          {{else}}
                            <h3 class="small" itemprop="name">{{company}}</h3>
                          {{/if}}
                        </div>
                      {{else}}
                        <div class="small-12 medium-5 large-5 columns"></div>
                      {{/if}}
                      <div class="small-12 medium-2 large-2 columns">
                        <p class="dates">
                          {{#if startDate}}
                            <span class="startDate">{{prettifyDate startDate}}</span>&nbsp;&ndash;&nbsp;
                          {{/if}}
                          {{#if endDate}}
                            <span class="endDate">{{prettifyDate endDate}}</span>
                          {{else}}
                            <span class="endDate">Present</span>
                          {{/if}}
                        </p>
                      </div>
                    </div>
                    <div class="row">
                      {{#if summary}}
                        <div class="small-12 medium-12 large-12 columns">
                          <p class="summary">{{summary}}</p>
                        </div>
                      {{/if}}
                    </div>
                    {{#if highlights.length}}
                      <div class="row">
                        <div class="small-12 medium-12 large-12 columns">
                          <ul class="highlights">
                            {{#each highlights}}
                              <li>{{.}}</li>
                            {{/each}}
                          </ul>
                        </div>
                      </div>
                    {{/if}}
                  </div>
                </div>
              </div>
            </div>
          {{/each}}
        </div>
      {{/if}}
      {{#if resume.volunteer.length}}
            <div id="volunteer">
              <h2>Volunteer</h2>
              {{#each resume.volunteer}}
              <div class="row">
                <div class="callout-card radius primary">
                  <div class="row">
                    <div class="callout-card-content">
                      <div class="row">
                        {{#if position}}
                          <div class="small-12 medium-5 large-5 columns">
                            <span class="position">{{position}}</span>
                          </div>
                        {{else}}
                          <div class="small-12 medium-5 large-5 columns"></div>
                        {{/if}}
                        {{#if company}}
                          <div class="small-12 medium-4 large-4 columns">
                            {{#if website}}
                              <a href="{{website}}" target="_blank">{{organization}}</a>
                            {{else}}
                              <span>{{organization}}</span>
                            {{/if}}
                          </div>
                        {{else}}
                          <div class="small-12 medium-4 large-4 columns"></div>
                        {{/if}}
                        <div class="small-12 medium-3 large-3 columns">
                          <p class="dates">
                            {{#if startDate}}
                              <span class="startDate">{{prettifyDate startDate}}</span>&nbsp;&ndash;&nbsp;
                            {{/if}}
                            {{#if endDate}}
                              <span class="endDate">{{prettifyDate endDate}}</span>
                            {{else}}
                              <span class="endDate">Present</span>
                            {{/if}}
                          </p>
                        </div>
                      </div>
                      <div class="row">
                        {{#if summary}}
                          <div class="small-12 medium-12 large-12 columns">
                            <p class="summary">{{summary}}</p>
                          </div>
                        {{/if}}
                      </div>
                      {{#if highlights.length}}
                        <div class="row">
                          <div class="small-12 medium-12 large-12 columns">
                            <ul class="csv highlights">
                              {{#each highlights}}
                                <li>{{.}}</li>
                              {{/each}}
                            </ul>
                          </div>
                        </div>
                      {{/if}}
                    </div>
                  </div>
                </div>
              </div>
              {{/each}}
        </div>
      {{/if}}
      {{#if resume.education.length}}
        <div id="education">
          <h2>Education</h2>
          {{#each resume.education}}
            <div itemprop="alumniOf" itemscope itemtype="http://schema.org/OrganizationRole"
              class="row">
              <div class="callout-card radius secondary">
                <meta itemprop="startDate" content="{{startDate}}" />
                {{#if endDate}}
                  <meta itemprop="endDate" content="{{endDate}}" />
                {{/if}}
                <div itemprop="alumniOf" itemscope itemtype="http://schema.org/EducationalOrganization">
                  <div class="callout-card-content">
                    {{#if studyType}}
                      <div class="small-12 medium-3 large-3 columns">
                        <h4 class="studyType">{{studyType}}</h4>
                        {{#if area}}
                          <span class="area">{{area}}</span>
                        {{/if}}
                        {{#if gpa}}
                          <p class="gpa">
                            <span class="label">GPA:</span>&nbsp;&nbsp;
                            <span class="value">{{gpa}}</span>
                          </p>
                        {{/if}}
                      </div>
                    {{else}}
                      <div class="small-12 medium-3 large-3 columns"> </div>
                    {{/if}}
                    {{#if institution}}
                      <div class="small-12 medium-7 large-7 columns">
                        <h3 itemprop="name" class="institution">{{institution}}</h3>
                      </div>
                    {{/if}}
                    <div class="small-12 medium-2 large-2 columns">
                      <p class="dates">
                        {{#if startDate}}
                          <span class="startDate">{{prettifyDate startDate}}</span>&nbsp;&ndash;&nbsp;
                        {{/if}}
                        {{#if endDate}}
                          <span class="endDate">{{prettifyDate endDate}}</span>
                        {{else}}
                          <span class="endDate">Present</span>
                        {{/if}}
                      </p>
                    </div>
                    {{#if courses.length}}
                      <div class="row">
                        <div class="small-12 columns">
                          <ul class="csv courses">
                            {{#each courses}}
                              <li>{{.}}</li>
                            {{/each}}
                          </ul>
                        </div>
                      </div>
                      {{else}}
                        <div class="row"> </div>
                    {{/if}}
                  </div>
                </div>
              </div>
            </div>
          {{/each}}
        </div>
      {{/if}}
      {{#if resume.awards.length}}
        <div id="awards">
          <h2>Awards</h2>
          {{#each resume.awards}}
            <div class="row">
              <div class="callout-card radius success">
                <div class="row">
                  <div class="callout-card-content">
                    <div class="row">
                      {{#if title}}
                        <div class="small-12 medium-6 large-6 columns">
                          {{title}}
                        </div>
                      {{/if}}
                      {{#if awarder}}
                        <div class="small-12 medium-4 large-4 columns">
                          from:  {{awarder}}
                        </div>
                      {{/if}}
                      {{#if date}}
                        <div class="dates small-12 medium-2 large-2 columns">
                          {{prettifyDate date}}
                        </div>
                      {{/if}}
                    </div>
                    {{#if summary}}
                      <div class="row">
                        <div class="small-12 medium-12 large-12 columns">
                          <p class="summary">{{summary}}</p>
                        </div>
                      </div>
                    {{/if}}
                  </div>
                  </div>
                </div>
              </div>
            </div>
          {{/each}}
        </div>
      {{/if}}
      {{#if resume.languages.length}}
        <div id="languages" class="row">
          <h2>Languages</h2>
          <div class="row">
            {{#each resume.languages}}
              <div class="small-6 large-6 columns">
                <button class="hollow button secondary">
                {{#if language}}
                  <div class="language">
                    {{language}}
                  </div>
                {{/if}}
                {{#if fluency}}
                  <div class="fluency">
                    {{fluency}}
                  </div>
                {{/if}}
              </button>
              </div>
            {{/each}}
          </div>
        </div>
      {{/if}}
      {{#if resume.interests.length}}
        <div id="interests" class="row">
          <h2>Interests</h2>
          <div class="row columns">
            {{#each resume.interests}}
              <button class="hollow button secondary">
                {{#if name}}
                  <span class="name">
                    {{name}}
                  </span>
                {{/if}}
                {{#if keywords.length}}
                  <ul class="csv keywords">
                    {{#each keywords}}
                      <li>{{.}}</li>
                    {{/each}}
                  </ul>
                {{/if}}
              </button>
            {{/each}}
          </div>
        </div>
      {{/if}}
      {{#if resume.references.length}}
        <div id="references" class="row">
          <h2>References</h2>
          {{#each resume.references}}
            <div class="row">
              <div class="item columns">
                {{#if reference}}
                  <blockquote class="reference">
                    {{reference}}
                  </blockquote>
                {{/if}}
                {{#if name}}
                  <cite itemprop="colleague"><span itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{name}}</span></span></cite>
                {{/if}}
              </div>
            </div>
          {{/each}}
        </div>
      {{/if}}
      {{#if resume.publications.length}}
        <div id="publications" class="row">
          <h2>Publications</h2>
          {{#each resume.publications}}
            <div class="callout-card radius secondary">
              <div class="callout-card-content" itemscope itemtype="http://schema.org/CreativeWork">
                {{#if name}}
                  <span class="name" itemprop="name">{{name}}</span>.&nbsp;&nbsp;
                {{/if}}
                {{#if publisher}}
                  <span class="publisher" itemprop="publisher">{{publisher}}</span>
                {{/if}}
                {{#if releaseDate}}
                  , <span class="releaseDate" itemprop="datePublished" content="{{releaseDate}}">{{prettifyDate releaseDate}}</span>
                {{/if}}
                {{#if website}}
                  <div class="website"> &nbsp;<a itemprop="sameAs" href="{{website}}" target="_blank">{{decodeURI website}}</a></div>
                {{/if}}
                {{#if summary}}
                  <div class="summary">
                    <p itemprop="description">{{summary}}</p>
                  </div>
                {{/if}}
              </div>
            </div>
          {{/each}}
        </div>
      {{/if}}
      </div>
    </div>
    <div class="row">
    <div class="copywrite">Copyright &copy; {{theYear}} {{resume.basics.name}}. All rights reserved. Modification is not permitted with respect to this document. All copies of this document must be verbatim.</div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
  $(window).on("load",function() {
    $('img').each(function() {
      var maxWidth = 128; // Max width for the image
      var maxHeight = 128; // Max height for the image
      var ratio = 0; // Used for aspect ratio
      var width = $(this).width(); // Current image width
      var height = $(this).height(); // Current image height

      // Check if the current width is larger than the max
      if (width > maxWidth) {
        ratio = maxWidth / width; // get ratio for scaling image
        $(this).css("width", maxWidth); // Set new width
        $(this).css("height", height * ratio); // Scale height based on ratio
        height = height * ratio; // Reset height to match scaled image
        width = width * ratio; // Reset width to match scaled image
      }

      // Check if current height is larger than max
      if (height > maxHeight) {
        ratio = maxHeight / height; // get ratio for scaling image
        $(this).css("height", maxHeight); // Set new height
        $(this).css("width", width * ratio); // Scale width based on ratio
        width = width * ratio; // Reset width to match scaled image
      }
    });
  });
  </script>
</body>

</html>
