index.html

---
layout: default
title: work
---

<div class="intro">
I am an artist and programmer based in San Francisco, California.
I work with interactive systems and new technologies relating body, gesture, and physical space.
<a href="{{ "/about" | prepend: site.baseurl }}">More info ➞</a>
</div>


<div id="works">
  <div class="work-sizer"></div>
  <div class="gutter-sizer"></div>
  {% assign sorted_works = site.work | sort:"order" %}
  {% for item in sorted_works | sort:"order"%}{% unless item.hide %}<div class="work {% if item.columns %}work--width{{item.columns}}{% endif %}">
  	<a href="{{ item.url }}">
  	<div>
  	<img src="{{ site.baseurl }}{{ item.thumbnail-path }}" alt="{{ item.thumbnail-alt }}"/>
  	</div>
    <p><span class="work-title-splash">{{ item.title }}</span><span class="work-date"> {{ item.work-date }}</span></p>
  	</a>
	</div>{% endunless %}{% endfor %}
</div>

<script>
  var $grid = $('#works').masonry({
    itemSelector: '.work',
    columnWidth: '.work-sizer',
    percentPosition: true
  });

  console.log($grid);

  $grid.imagesLoaded().progress(function() {
    $grid.masonry('layout');
  });
</script>