format.html

<!-- Project Samples -->
<section class="pt-4 pb-2">
  <!-- Section Title -->
  <div class="container align-center">
    <h2 id="work">Work Samples</h2>
    <p class="sub-header mb-2 mw-35em md-pr-pl-3">Below are some examples of my recent work. I work on all types of design projects so please let me know if I can help
      or if you have any questions.</p>
  </div>
  <!-- Work Examples -->
  <div class="container-fluid flex-layout l-media-grid">
    <!-- Concordus -->
    <figure class="media-item">
      <a class="media-wrap img" href="#0">
        <img class="lazyload" data-src="images/content-img/16x9/img-16x9-Concordus-RWD-MD.jpg" data-srcset="images/content-img/16x9/img-16x9-Concordus-RWD-LG.jpg 2000w, images/content-img/16x9/img-16x9-Concordus-RWD-MD.jpg 1900w"
          alt="Concordus landing page design and development for Kentico CMS.">
        <time class="time-stamp" datetime="2017">
          <span class="sr-only">Successfully delivered</span>2017</time>
        <figcaption class="media-caption" aria-hidden="true">
          <span class="project-title">Concordus Applications</span>
        </figcaption>
      </a>
      <noscript>
        <figure class="media-item">
          <a href="#0">
            <img src="images/content-img/16x9/img-16x9-Concordus-RWD-MD.jpg" srcset="images/content-img/16x9/img-16x9-Concordus-RWD-LG.jpg 2000w, images/content-img/16x9/img-16x9-Concordus-RWD-MD.jpg 1900w"
              alt="Concordus landing page design and development for Kentico CMS.">
            <time class="time-stamp" datetime="2017">
              <span class="sr-only">Successfully delivered</span>2017</time>
            <figcaption class="media-caption" aria-hidden="true">
              <span class="project-title">Concordus Applications</span>
            </figcaption>
          </a>
        </figure>
      </noscript>
    </figure>
    <!-- MaxCentive -->
    <figure class="media-item media-light">
      <a class="media-wrap img" href="#0">
        <img class="lazyload" data-src="images/content-img/16x9/img-16x9-MaxCentive-2-MD.jpg" data-srcset="images/content-img/16x9/img-16x9-MaxCentive-2-LG.jpg 2000w, images/content-img/16x9/img-16x9-MaxCentive-2-MD.jpg 1900w"
          alt="Samples of my CSS Grid collection on CodePen.">
        <time class="time-stamp" datetime="2017">
          <span class="sr-only">Currently working on this project since February</span>2017</time>
        <figcaption class="media-caption" aria-hidden="true">
          <span class="project-title">MaxCentive</span>
        </figcaption>
      </a>
      <noscript>
        <figure class="media-item media-light">
          <a href="#0">
            <img src="images/content-img/16x9/img-16x9-MaxCentive-2-MD.jpg" srcset="images/content-img/16x9/img-16x9-MaxCentive-2-LG.jpg 2000w, images/content-img/16x9/img-16x9-MaxCentive-2-MD.jpg 1900w"
              alt="Samples of my CSS Grid collection on CodePen.">
            <time class="time-stamp" datetime="2017">
              <span class="sr-only">Currently working on this project since February</span>2017</time>
            <figcaption class="media-caption" aria-hidden="true">
              <span class="project-title">MaxCentive</span>
            </figcaption>
          </a>
        </figure>
      </noscript>
    </figure>
    <!-- Swiss Ritual -->
    <figure class="media-item">
      <a class="media-wrap img" href="//codepen.io/collection/DRGMBP/">
        <img class="lazyload" data-src="images/content-img/16x9/img-16x9-SR-Future-Islands-MD.jpg" data-srcset="images/content-img/16x9/img-16x9-SR-Future-Islands-LG.jpg 2000w, images/content-img/16x9/img-16x9-SR-Future-Islands-MD.jpg 1900w"
          alt="Samples of some coded art done in CodePen.">
        <time class="time-stamp" datetime="2017">
          <span class="sr-only">Successfully delivered</span>2017</time>
        <figcaption class="media-caption" aria-hidden="true">
          <span class="project-title">Swiss Ritual</span>
        </figcaption>
      </a>
      <noscript>
        <figure class="media-item">
          <a href="//codepen.io/collection/DRGMBP/">
            <img class="lazyload" src="images/content-img/16x9/img-16x9-SR-Future-Islands-MD.jpg" srcset="images/content-img/16x9/img-16x9-SR-Future-Islands-LG.jpg 2000w, images/content-img/16x9/img-16x9-SR-Future-Islands-MD.jpg 1900w"
              alt="Samples of some coded art done in CodePen.">
            <time class="time-stamp" datetime="2017">
              <span class="sr-only">Successfully delivered</span>2017</time>
            <figcaption class="media-caption" aria-hidden="true">
              <span class="project-title">Swiss Ritual</span>
            </figcaption>
          </a>
        </figure>
      </noscript>
    </figure>
    <!-- CSS Grid Samples -->
    <figure class="media-item">
      <a class="media-wrap img" href="//codepen.io/collection/XWovqe/">
        <img class="lazyload" data-src="images/content-img/16x9/img-16x9-CSS-Grid-samples-MD.jpg" data-srcset="images/content-img/16x9/img-16x9-CSS-Grid-samples-LG.jpg 2000w, images/content-img/16x9/img-16x9-CSS-Grid-samples-MD.jpg 1900w"
          alt="Samples of my CSS Grid collection on CodePen.">
        <time class="time-stamp" datetime="2017">
          <span class="sr-only">Collection built in</span>2017</time>
        <figcaption class="media-caption" aria-hidden="true">
          <span class="project-title">CSS Grid Collection</span>
        </figcaption>
      </a>
      <noscript>
        <figure class="media-item">
          <a href="//codepen.io/collection/XWovqe/">
            <img src="images/content-img/16x9/img-16x9-CSS-Grid-samples-MD.jpg" srcset="images/content-img/16x9/img-16x9-CSS-Grid-samples-LG.jpg 2000w, images/content-img/16x9/img-16x9-CSS-Grid-samples-MD.jpg 1900w"
              alt="Samples of my CSS Grid collection on CodePen.">
            <time class="time-stamp" datetime="2017">
              <span class="sr-only">Collection built in</span>2017</time>
            <figcaption class="media-caption" aria-hidden="true">
              <span class="project-title">CSS Grid Collection</span>
            </figcaption>
          </a>
        </figure>
      </noscript>
    </figure>
    <!-- in2M Logo -->
    <figure class="media-item media-light">
      <a class="media-wrap img" href="#0">
        <img class="lazyload" data-src="images/content-img/16x9/img-16x9-in2M-logo-MD.jpg" data-srcset="images/content-img/16x9/img-16x9-in2M-logo-LG.jpg 2000w, images/content-img/16x9/img-16x9-in2M-logo-MD.jpg 1900w"
          alt="in2Marketplace logo design">
        <time class="time-stamp" datetime="2016">
          <span class="sr-only">Successfully delivered</span>2016</time>
        <figcaption class="media-caption" aria-hidden="true">
          <span class="project-title">in2Marketplace</span>
        </figcaption>
      </a>
      <noscript>
        <figure class="media-item media-light">
          <a href="#0">
            <img src="images/content-img/16x9/img-16x9-in2M-logo-MD.jpg" srcset="images/content-img/16x9/img-16x9-in2M-logo-LG.jpg 2000w, images/content-img/16x9/img-16x9-in2M-logo-MD.jpg 1900w"
              alt="in2Marketplace logo design">
            <time class="time-stamp" datetime="2016">
              <span class="sr-only">Successfully delivered</span>2016</time>
            <figcaption class="media-caption" aria-hidden="true">
              <span class="project-title">in2Marketplace</span>
            </figcaption>
          </a>
        </figure>
      </noscript>
    </figure>
    <!-- Adobe XD Contest -->
    <figure class="media-item">
      <a class="media-wrap img" href="#0">
        <img class="lazyload" data-src="images/content-img/16x9/img-16x9-XD-profile-contest-MD.jpg" data-srcset="images/content-img/16x9/img-16x9-XD-profile-contest-LG.jpg 2000w, images/content-img/16x9/img-16x9-XD-profile-contest-MD.jpg 1900w"
          alt="Samples of some coded art done in CodePen.">
        <time class="time-stamp" datetime="2017">
          <span class="sr-only">Built with Adobe XD</span>2017</time>
        <figcaption class="media-caption" aria-hidden="true">
          <span class="project-title">Adobe XD Contest</span>
        </figcaption>
      </a>
      <noscript>
        <figure class="media-item">
          <a href="#0">
            <img src="images/content-img/16x9/img-16x9-XD-profile-contest-MD.jpg" srcset="images/content-img/16x9/img-16x9-XD-profile-contest-LG.jpg 2000w, images/content-img/16x9/img-16x9-XD-profile-contest-MD.jpg 1900w"
              alt="Samples of some coded art done in CodePen.">
            <time class="time-stamp" datetime="2017">
              <span class="sr-only">Built with Adobe XD</span>2017</time>
            <figcaption class="media-caption" aria-hidden="true">
              <span class="project-title">Adobe XD Contest</span>
            </figcaption>
          </a>
        </figure>
      </noscript>
    </figure>
    <!-- Nav20s -->
    <figure class="media-item">
      <a class="media-wrap img" href="#0">
        <img class="lazyload" data-src="images/content-img/16x9/img-16x9-Nav20s-MD.jpg" data-srcset="images/content-img/16x9/img-16x9-Nav20s-MD.jpg 2000w, images/content-img/16x9/img-16x9-Nav20s-SM.jpg 1900w"
          alt="Nav20s.com home page website design concept.">
        <time class="time-stamp" datetime="2016">
          <span class="sr-only">Successfully delivered</span>2016</time>
        <figcaption class="media-caption" aria-hidden="true">
          <span class="project-title">Nav20s</span>
        </figcaption>
      </a>
      <noscript>
        <figure class="media-item">
          <a href="#0">
            <img src="images/content-img/16x9/img-16x9-Nav20s-MD.jpg" srcset="images/content-img/16x9/img-16x9-Nav20s-MD.jpg 2000w, images/content-img/16x9/img-16x9-Nav20s-SM.jpg 1900w"
              alt="Nav20s home page website design concept.">
            <time class="time-stamp" datetime="2016">
              <span class="sr-only">Successfully delivered</span>2016</time>
            <figcaption class="media-caption" aria-hidden="true">
              <span class="project-title">Nav20s</span>
            </figcaption>
          </a>
        </figure>
      </noscript>
    </figure>
    <!-- Nav World Wide -->
    <figure class="media-item">
      <a class="media-wrap img" href="#0">
        <img class="lazyload" data-src="images/content-img/16x9/img-16x9-NWW-MD.jpg" data-srcset="images/content-img/16x9/img-16x9-NWW-MD.jpg 2000w, images/content-img/16x9/img-16x9-NWW-SM.jpg 1900w"
          alt="Navigators World Wide home website design">
        <time class="time-stamp" datetime="2015">
          <span class="sr-only">Successfully delivered</span>2015</time>
        <figcaption class="media-caption" aria-hidden="true">
          <span class="project-title">Nav World Wide</span>
        </figcaption>
      </a>
      <noscript>
        <figure class="media-item">
          <a href="#0">
            <img src="images/content-img/16x9/img-16x9-NWW-MD.jpg" srcset="images/content-img/16x9/img-16x9-NWW-MD.jpg 2000w, images/content-img/16x9/img-16x9-NWW-SM.jpg 1900w"
              alt="Navigators World Wide home website design">
            <time class="time-stamp" datetime="2016">
              <span class="sr-only">Successfully delivered</span>2015</time>
            <figcaption class="media-caption" aria-hidden="true">
              <span class="project-title">Nav World Wide</span>
            </figcaption>
          </a>
        </figure>
      </noscript>
    </figure>
    <!-- DPI -->
    <figure class="media-item media-light">
      <a class="media-wrap img" href="#0">
        <img class="lazyload" data-src="images/content-img/16x9/img-16x9-DPI-home-MD.jpg" data-srcset="images/content-img/16x9/img-16x9-DPI-home-MD.jpg 2000w, images/content-img/16x9/img-16x9-DPI-home-SM.jpg 1900w"
          alt="Disciple Portal web design.">
        <time class="time-stamp" datetime="2016">
          <span class="sr-only">Successfully delivered</span>2016</time>
        <figcaption class="media-caption" aria-hidden="true">
          <span class="project-title">Disciple Portal</span>
        </figcaption>
      </a>
      <noscript>
        <figure class="media-item media-light">
          <a href="#0">
            <img src="images/content-img/16x9/img-16x9-DPI-home-MD.jpg" srcset="images/content-img/16x9/img-16x9-DPI-home-MD.jpg 2000w, images/content-img/16x9/img-16x9-DPI-home-SM.jpg 1900w"
              alt="Disciple Portal web design.">
            <time class="time-stamp" datetime="2016">
              <span class="sr-only">Successfully delivered</span>2016</time>
            <figcaption class="media-caption" aria-hidden="true">
              <span class="project-title">Disciple Portal</span>
            </figcaption>
          </a>
        </figure>
      </noscript>
    </figure>
    <!-- HPG -->
    <figure class="media-item">
      <a class="media-wrap img" href="#0">
        <img class="lazyload" data-src="images/content-img/16x9/img-16x9-HPG-MD.jpg" data-srcset="images/content-img/16x9/img-16x9-HPG-MD.jpg 2000w, images/content-img/16x9/img-16x9-HPG-SM.jpg 1900w"
          alt="HealthPlanG home page redesign">
        <time class="time-stamp" datetime="2016">
          <span class="sr-only">Successfully delivered</span>2016</time>
        <figcaption class="media-caption" aria-hidden="true">
          <span class="project-title">HealthPlanG</span>
        </figcaption>
      </a>
      <noscript>
        <figure class="media-item">
          <a href="#0">
            <img src="images/content-img/16x9/img-16x9-HPG-MD.jpg" srcset="images/content-img/16x9/img-16x9-HPG-MD.jpg 2000w, images/content-img/16x9/img-16x9-HPG-SM.jpg 1900w"
              alt="HealthPlanG home page redesign">
            <time class="time-stamp" datetime="2016">
              <span class="sr-only">Successfully delivered</span>2016</time>
            <figcaption class="media-caption" aria-hidden="true">
              <span class="project-title">HealthPlanG</span>
            </figcaption>
          </a>
        </figure>
      </noscript>
    </figure>
    <!-- Adobe XD Dashboard UI Kit -->
    <figure class="media-item">
      <a class="media-wrap img" href="#0">
        <img class="lazyload" data-src="images/content-img/16x9/img-16x9-XD-dashboard-MD.jpg" data-srcset="images/content-img/16x9/img-16x9-XD-dashboard-LG.jpg 2000w, images/content-img/16x9/img-16x9-XD-dashboard-MD.jpg 1900w"
          alt="Samples of my CSS Grid collection on CodePen.">
        <time class="time-stamp" datetime="2016">
          <span class="sr-only">Successfully delivered</span>2016</time>
        <figcaption class="media-caption" aria-hidden="true">
          <span class="project-title">Dashboard UI Kit</span>
        </figcaption>
      </a>
      <noscript>
        <figure class="media-item">
          <a href="#0">
            <img src="images/content-img/16x9/img-16x9-XD-dashboard-MD.jpg" srcset="images/content-img/16x9/img-16x9-XD-dashboard-LG.jpg 2000w, images/content-img/16x9/img-16x9-XD-dashboard-MD.jpg 1900w"
              alt="Samples of my CSS Grid collection on CodePen.">
            <time class="time-stamp" datetime="2016">
              <span class="sr-only">Successfully delivered</span>2016</time>
            <figcaption class="media-caption" aria-hidden="true">
              <span class="project-title">in2Marketplace</span>
            </figcaption>
          </a>
        </figure>
      </noscript>
    </figure>
    <!-- The 104 Initiative logo -->
    <figure class="media-item">
      <a class="media-wrap img" href="#0">
        <img class="lazyload" data-src="images/content-img/16x9/img-16x9-104v2-logo-MD.jpg" data-srcset="images/content-img/16x9/img-16x9-104v2-logo-MD.jpg 2000w, images/content-img/16x9/img-16x9-104v2-logo-SM.jpg 1900w"
          alt="The 104 Initiative logo redesign">
        <time class="time-stamp" datetime="2016">
          <span class="sr-only">Successfully delivered</span>2016</time>
        <figcaption class="media-caption" aria-hidden="true">
          <span class="project-title">The 104 Intiative</span>
        </figcaption>
      </a>
      <noscript>
        <figure class="media-item">
          <a href="#0">
            <img src="images/content-img/16x9/img-16x9-104v2-logo-MD.jpg" srcset="images/content-img/16x9/img-16x9-104v2-logo-MD.jpg 2000w, images/content-img/16x9/img-16x9-104v2-logo-SM.jpg 1900w"
              alt="The 104 Initiative logo redesign">
            <time class="time-stamp" datetime="2016">
              <span class="sr-only">Successfully delivered</span>2016</time>
            <figcaption class="media-caption" aria-hidden="true">
              <span class="project-title">The 104 Intiative</span>
            </figcaption>
          </a>
        </figure>
      </noscript>
    </figure>
  </div>
  <!--<a class="cta-link" href="portfolio/">View Portfolio</a>-->
</section>

<!-- About -->
<section id="about" class="pt-pb-2">
  <div class="container-fluid">
    <div class="about-me">
      <!-- About Me -->
      <div class="info-block info-block-about">
        <figure class="circle-mask mug hidden">
          <img class="lazyload" data-src="../images/content-img/1x1/img-1x1-avatar.jpg" alt="Eric Thayer">
        </figure>
        <noscript>
          <figure class="mug circle-mask">
            <img src="../images/content-img/1x1/img-1x1-avatar.jpg" alt="Eric Thayer">
          </figure>
        </noscript>
        <h2 id="my-background">Background</h2>
        <p class="mw-35em mb-0">I started out in San Diego as a
          <a href="motion-reel/">post-production artist</a> but since moving to Denver I have worked with
          <a href="//www.linkedin.com/in/commonmovement/"
            title="view my LinkedIn profile">small and large companies</a> with a focus on web design and front-end development.</p>
        <!-- example links -->
        <div class="example-links flex flex-wrap pt-sm text-md">
          <h3 class="small-header sr-only">current project: in2Marketplace.com</h3>
          <!-- Resume -->
          <div class="flex ai-center pt-pb-tiny pr-sm">
            <strong class="text-sm Roboto">View Resume</strong>
            <a href="../Eric-Thayer-Resume-Web-Designer-and-Front-end-Developer.pdf" class="has-tooltip" title="view my resume in PDF form">
              <svg class="icon ml-mr-0 text-lg-r">
                <use xlink:href="#icon-pdf" />
              </svg>
              <span class="tooltip">View Resume</span>
            </a>
          </div>
        </div>
      </div>
      <!-- My Status -->
      <div class="info-block info-block-status hidden">
        <h2 id="current-status" class="mb-sm">Current Status</h2>
        <p class="mb-0">
          <a href="../hire-me/" class="text-link text-md">I'm looking for a team to call my own.</a> Although I enjoy the freedom of freelancing, I want to be part of a
          product design or development team that cares deeply about
          <a href="//blog.producthive.org/design-is-a-team-sport-with-jared-spool-a32d73786412/">communication</a>,
          <a href="http://www.standardista.com/standards/making-basic-web-pages-accessible/">accessibility</a> and
          <a href="//adactio.com/articles/9465/">performance</a> based solutions.</p>
      </div>
      <!-- My Focus -->
      <div class="info-block info-block-skills">
        <h2 id="my-focus">My Focus</h2>
        <ul class="content-list feature-list">
          <li>Responsive Web Design</li>
          <li>Front-end Development</li>
          <li>Performance Audits</li>
          <li>Inclusive Display Patterns</li>
          <li>
            <abbr title="user interface and user experience design">UI/UX</abbr> Design Systems</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- Contact -->
<section id="contact" class="pt-pb-2">
  <div class="container align-center">
    <h2>Contact Me</h2>
    <p class="sub-header mb-3 mw-35em md-pr-pl-2">Please fill out the contact form or feel free to send me an email.</p>
  </div>
  <div class="container container-fluid">
    <!-- Contact Form -->
    <form class="contact-form" name="contact" netlify-honeypot="bot-field" action="../thank-you/" netlify>
      <!-- Form Build -->
      <div class="form-wrap flex flex-wrap">
        <!-- Form Group (left) -->
        <div class="form-group form-group-left flex flex-wrap">
          <!-- Name -->
          <div class="input-row">
            <label class="flex" for="Name">Name
              <span class="req-mark ml-a text-sm-r">required</span>
            </label>
            <input id="Name" name="Name" type="text" class="required" title="This is a required field" required>
          </div>
          <!-- Email Address -->
          <div class="input-row">
            <label class="flex" for="Email">Email
              <span class="req-mark ml-a text-sm-r">required</span>
            </label>
            <input id="Email" name="Email" type="email" class="required" title="This is a required field" required>
          </div>
          <!-- Phone Number -->
          <div class="input-row">
            <label for="Phone">Phone</label>
            <input id="Phone" name="Phone" type="tel" title="your best contact phone number">
          </div>
        </div>
        <!-- Form Group (right) -->
        <div class="form-group form-group-right flex flex-wrap">
          <!-- Message Detail -->
          <div class="input-row">
            <label for="Message">Message</label>
            <textarea id="Message" name="Message" title="leave me a message if you want"></textarea>
          </div>
        </div>
        <p class="sr-only hidden">
          <label>Don’t fill this out:
            <input name="bot-field">
          </label>
        </p>
        <!-- Submit -->
        <div class="submit-input pt-sm md-pt-1">
          <button class="submit-button text-sm" type="submit" tabindex="0">
            <span>Send</span>
          </button>
        </div>
      </div>
    </form>
  </div>
</section>


    <!-- {{ $PatternLibrarySCSS := resources.Get "css/pattern-library/pattern-library.scss" }}
    {{ $PatternLibraryCSS := $PatternLibrarySCSS | resources.ToCSS (dict "targetPath" "css/pattern-library/pattern-library.css" "enableSourceMap" false) }}
    {{ $PatternLibraryAutoprefixed := $PatternLibraryCSS | resources.PostCSS }}
    {{ $PatternLibraryMinified := $PatternLibraryAutoprefixed | resources.Minify }}
    {{ $PatternLibrary := resources.Get "css/pattern-library/pattern-library.scss" | toCSS | postCSS | minify }} -->
    <!-- <link rel="stylesheet" href="{{ $PatternLibrary.Permalink }}"> -->
    <!-- <link rel="stylesheet" href="{{ .Site.BaseURL }}css/pattern-library/pattern-library.min.css"> -->