A New Site

Well, after a couple years, I have finally re-crafted my site. Before:

Old Site

After. My previous site was developed using Text Pattern. I loved the flexibility of Text Pattern, but it seemed a bit overkill for a simple portfolio site like mine. Fast forward two years, and I discovered a little site generator called Jekyll. I’m hosting the site on Github pages. You can check out the repo on my Github account.

The site is a run of the mill Jekyll site. The only “fancy” thing I have done is use callback functions provided by the Vimeo Player API to change the background of a project page when a video is playing. I only needed the Event Listeners the API provided, so I carved up the example Vimeo provides to this:

// Listen for the ready event for any vimeo video players on the page
var vimeoPlayers = document.querySelectorAll('iframe'), player;

for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
  player = vimeoPlayers[i];
  $f(player).addEvent('ready', ready);
}

function addEvent(element, eventName, callback) {
  if (element.addEventListener) {
    element.addEventListener(eventName, callback, false);
  }
  else {
    element.attachEvent('on' + eventName, callback);
  }
}

function ready(player_id) {
  var froogaloop = $f(player_id);
  function setupEventListeners() {
    function onPlay() {
      froogaloop.addEvent('play', function(data) {
          console.log('play event');
          // The dark class changes the background image for the body tag
          $('body').addClass('dark');
      });
    }
    function onPause() {
      froogaloop.addEvent('pause', function(data) {
          console.log('pause event');
          $('body').removeClass('dark');
      });
    }
    function onFinish() {
      froogaloop.addEvent('finish', function(data) {
          console.log('finish');
          $('body').removeClass('dark');
      });
    }
    onPlay();
    onPause();
    onFinish();
  }
  setupEventListeners();
}

One thing to note is that when you embed your video, you must include an “id” attribute to the iframe, and add a “player_id” parameter to the source url of the video with the same value, like so:

<iframe class="vimeo" id="vid_1" src="http://player.vimeo.com/video/23647752?api=1&amp;player_id=vid_1&amp;title=0&amp;byline=0&amp;portrait=0" width="805" height="453" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

I’m happy with the way the site turned out. There is a lot less overhead to draft and write new content. Hopefully this will be the first site that I actually continue to update.

← Back