index.html

---
layout: default
title: Home
description: A collection of common components used in classic websites
keywords: home, quarks
---

<section style="background-image: url(https://images.unsplash.com/photo-1449247709967-d4461a6a6103?crop=entropy&dpr=2&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1025g); background-position: bottom center;" class="h-full dt bg-cv w-100">
<div  class="dtc v-mid phm">
  <h1 class="f3 tc ttu tracked mono black"> my name is</h1>
  <h1 class="f1 b tc ttu tracked mono gold"> Jeff! </h1>
</div>
</section>

<section id="about" class="mv6 center measure">
  <h2 class="f2 ttu tracked lh-heading black"> About </h2>
  <p class="lh-body"> I'm <span class="gold">Jeff Free</span> — lover of Jesus, coffee, beards, and all things usable, simple, and efficient.</p>
  <p class="lh-body"> While not <a href="https://www.behance.net/notjefffree" class="gold underline">designing</a> or <a href="https://github.com/notjefffree" class="gold underline">coding</a>, as Dazzling Unicorn (AKA communications designer), you can find me biking, reading, debating, studying, or answering your <a href="#contact" class="gold underline">pings</a> about any of them.</p>
</section>

<section id="portfolio" class="measure center mv6">
  <h2 class="f2 ttu tracked lh-heading black"> Portfolio </h2>
  <ul class="mono">
  <li class="black">
    <h3 class="f3"><a class="gold" href="https://www.behance.net/gallery/36593435/EnergiZe-Gum">EnergiZe Gum</a></h3>
    <p class="ttu tracked"><small><strong>Branding</strong></small></p>
  </li>
  <li class="black">
    <h3 class="f3"><a class="gold" href="https://www.behance.net/gallery/36429607/Fitness-Board">Fitness Board</a></h3>
    <p class="ttu tracked"><small><strong>Branding</strong></small></p>
  </li>
  <li class="black">
    <h3 class="f3"><a class="gold" href="http://draconic.esportsify.com">Draconic eSports</a></h3>
    <p class="ttu tracked"><small><strong>Web, Content</strong></small></p>
  </li>
  <li class="black">
    <h3 class="f3"><a class="gold" href="http://svggaming.com">Savage Gaming</a></h3>
    <p class="ttu tracked"><small><strong>Web, Content</strong></small></p>
  </li>
  <li class="black">
    <h3 class="f3"><a class="gold" href="http://vwas.cf">VWAS Studios</a></h3>
    <p class="ttu tracked"><small><strong>Marketing, Design Lead</strong></small></p>
  </li>
  </ul>
</section>

<section id="writing" class="measure center mv6">
  <h2 class="f2 ttu tracked lh-heading black"> Writing </h2>
  <ul class="mono">
  {% for post in site.posts %}	
  <li class="black">
    <h3 class="f3"><a class="gold" href="{{ post.url }}">{{ post.title }}</a></h3>
    <p class="tracked ttu"><small><strong>{{ post.date | date: "%B %e, %Y" }}</strong></small></p>
  </li>
  {% endfor %}	
  </ul>
</section>

<section id="contact" class="tc bg-black pa6-ns mt6">
  <h2 class="f2 ttu tracked lh-heading white center measure"> Contact </h2>
  <ul class="list mb4">
    <li class="mr4-ns dib">
      <a href="http://twitter.com/notjefffree" class="f2 gold icon ion-social-twitter"></a>
    </li>
    <li class="mr4-ns dib">
      <a href="http://github.com/notjefffree" class="f2 gold icon ion-social-github"></a>
    </li>
    <li class="mr4-ns dib">
      <a href="http://behance.net/notjefffree" class="f2 gold icon ion-ios-albums"></a>
    </li>
    <li class="mr4-ns dib">
      <a href="skype:enociz" class="f2 gold icon ion-social-skype"></a>
    </li>
    <li class="dib">
      <a href="mailto:notjefffree@gmail.com" class="f2 gold icon ion-email"></a>
    </li>
  </ul>
  
  
  <div class="tweetwrapper">
    <a class="twitter-timeline" href="https://twitter.com/notjefffree" data-widget-id="726617309012353024">Tweets by @notjefffree</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  </div>
</section>