resume.html

---
layout: default
title: Resume
permalink: /resume/
categories: resume
---

<div class="Resume-header u-flex u-clearfix">
  <ul class="Resume-contact u-mb-0" aria-label="Contact information">
    <li class="Resume-contactItem u-pt-visible">{% include logo.html source='resume' %}</li>
    <li class="Resume-contactItem u-pt-hidden" aria-hidden="true"><img class="Resume-avatar u-ns-visible u-floatRight u-circle" src="{{ '/assets/img/self_thumb.jpg' | prepend: site.baseurl }}"></a></li>
    <li class="Resume-contactItem"><i class="fa fa-fw fa-globe u-ns-hidden u-pt-hidden u-textGray" aria-hidden="true"></i> <a href="//stephensuen.com">stephensuen.com</a></li>
    <li class="Resume-contactItem"><i class="fa fa-fw fa-envelope u-ns-hidden u-pt-hidden u-textGray" aria-hidden="true"></i> <a href="mailto:stephen@cloudstitch.com">stephen@cloudstitch.com</a></li>
    <li class="Resume-contactItem"><i class="fa fa-fw fa-twitter u-ns-hidden u-pt-hidden u-textGray" aria-hidden="true"></i> <a href="//twitter.com/s2tephen">@s2tephen</a></li>
    <li class="Resume-contactItem"><i class="fa fa-fw fa-phone u-ns-hidden u-pt-hidden u-textGray" aria-hidden="true"></i> 805 252 4498</li>
  </ul>
  <div class="Resume-title">
    <h1 class="Resume-name u-mb-0 u-textYellow" aria-label="Stephen J Suen"><span class="u-block" aria-hidden="true">Stephen</span><span class="u-block" aria-hidden="true">J Suen</span></h1>
    <div class="u-textNoWrap">
      <h3 class="Resume-role u-inlineBlock u-mb-0 u-textUppercase u-textGray" aria-hidden="true">Front-end Developer / <span class="u-sm-wbr u-mt-0"><span class="u-md-hidden">Product </span>Designer</span></h3>
      <h2 class="u-ariaLabel u-pt-hidden" aria-hidden="false">Front-end Developer and Product Designer</h2>
      <a class="Resume-button Button u-pt-hidden" href="{{ '/assets/files/stephen-suen-resume-2017.pdf' | prepend: site.baseurl }}" aria-label="Download as PDF"><i class="Button-icon fa fa-fw fa-cloud-download"></i><span class="u-ns-hidden u-textUppercase"> Download</span><span class="u-inline u-xs-hidden u-sm-hidden"> PDF</span></a>
    </div>
  </div>
</div>

<div class="Resume-experience u-clearfix">
  <div class="Resume-aside">
    <h3 class="Resume-section u-textYellow">Experience</h3>
  </div>
  {% for hash in site.data.resume.experience %}
    <div class="Resume-item u-mr-0{% unless hash.print %} u-pt-hidden{% endunless %}">
      <h3 class="Resume-itemTitle"><strong>{{ hash.title }}</strong> <span class="Resume-itemLocation">{{ hash.location }}</span></h3>
      <h3 class="Resume-itemSubtitle u-textGray"><strong>{{ hash.role }}</strong><span class="u-xs-hidden u-sm-hidden" aria-hidden="true"> — </span><span class="u-sm-wbr u-mt-0">{{ hash.date }}</span></h3>
      <p class="Resume-itemDescription">{{ hash.description }}</p>
    </div>
  {% endfor %}
</div>

<div class="Resume-education u-clearfix">
  <div class="Resume-aside">
    <h3 class="Resume-section u-textYellow">Education</h3>
  </div>
  {% assign education = site.data.resume.education %}
  <div class="Resume-item u-mr-0">
    <h3 class="Resume-itemTitle"><strong>{{ education.title }}</strong> <span class="Resume-itemLocation">{{ education.location }}</span></h3>
    <h3 class="Resume-itemSubtitle u-textGray"><strong>{{ education.role }}</strong><span class="u-xs-hidden u-sm-hidden" aria-hidden="true"> — </span><span class="u-sm-wbr u-mt-0">{{ education.date }}</span></h3>
    <p class="Resume-itemDescription">Relevant Courses: {{ education.courses | join: ', ' }}</p>
  </div>
</div>

<div class="Resume-skills u-clearfix">
  <div class="Resume-aside">
    <h3 class="Resume-section u-textYellow">Skills</h3>
  </div>
  {% for hash in site.data.resume.skills %}
    <div class="Resume-item u-mr-0">
      <h3 class="Resume-itemTitle"><strong>{{ hash.category }}</strong></h3>
      <p class="Resume-itemDescription" role="" aria-label="{{ hash.skills | join: ', ' }}">{% for line in hash.skills %}{% if forloop.first %}<span aria-hidden="true">{{ line | join: ', ' }}</span><span class="u-ns-hidden u-pt-hidden" aria-hidden="true">, </span>{% else %}<span class="u-ns-wbr u-mt-0" aria-hidden="true">{{ line | join: ', ' }}</span>{% unless forloop.last %}<span class="u-ns-hidden u-pt-hidden" aria-hidden="true">, </span>{% endunless %}{% endif %}{% endfor %}</p>
    </div>
  {% endfor %}
</div>