profile.html

---
layout: page
title: "Profile & Information"
meta: Somewhere on the boundary between design and code.
permalink: /profile/
gutenberg: true
---
<div class="profile-feature" id="feature-container">
  <div class="profile-feature__item" data-lag="7">
    {% img 2016/06/north.jpg alt:"Up North" %}
  </div>
  <div class="profile-feature__item" data-lag="2">
    {% img 2016/06/shard.jpg alt:"The Shard London" %}
  </div>
  <div class="profile-feature__item" data-lag="3">
    {% img 2016/06/london.jpg alt:"St Pauls" %}
  </div>
  <div class="profile-feature__item" data-lag="1">
    {% img 2016/06/leopards.jpg alt:"Danger" %}
  </div>
  <div class="profile-feature__item" data-lag="4">
    {% img 2016/06/render.jpg alt:"Render Conf" %}
  </div>
</div>

<div class="grid">
  <div class="grid__small-12 grid__medium-6 grid__columns">
    <p>I'm Alex, a front-end engineer in London, currently working at Pusher. As part of the Creative team at Pusher, I work with other teams around the company (from marketing to product) to find the best solutions to building out the user-facing side of our products.</p>
  </div>
  <div class="grid__small-12 grid__medium-6 grid__columns">
    <p>Although I spend most of my day working with the front-end and design, I always enjoy playing around with server-side tech. But most of all, I enjoy making tools. You can find me on <a href="{{site.social.twitter}}" class="social-link twitter">Twitter</a>, <a href="{{site.social.codepen}}" class="social-link codepen">CodePen</a>, <a href="{{site.social.github}}" class="social-link github">GitHub</a>, and <a href="{{site.social.dribbble}}" class="social-link dribbble">Dribbble</a>.</p>
  </div>
</div>

<hr>

<div class="grid">
  <div class="grid__small_12 grid__medium-4 grid__large-6 grid__columns">
    <h2>Experience</h2>
  </div>
  <div class="grid__small_12 grid__medium-8 grid__large-6 grid__columns">
    <h3>Pusher <span>September 2015 - Current</span></h3>
    <p class="no-first-of">Working in London for Pusher as a front-end engineer. Implemented the front-end of our new dashboard and marketing site.</p>
    <h3>Rareloop <span>February - May 2015</span></h3>
    <p class="no-first-of">Creative developer at Rareloop two days a week whilst finishing my degree. Worked on several live client briefs.</p>
    <h3>Brave <span>June - July 2014</span></h3>
    <p class="no-first-of">Spent a month as a digital design intern contributing to live briefs. Clients included John Frieda and Panasonic. Also redesigned and developed an internal 'weekly digest' email.</p>
  </div>
</div>
<hr>
<div class="grid">
  <div class="grid__small_12 grid__medium-4 grid__large-6 grid__columns">
    <h2>Writing</h2>
  </div>
  <div class="grid__small_12 grid__medium-8 grid__large-6 grid__columns">
    <h3>How to get started with pattern libraries <span>Net Mag - June 2016</span></h3>
    <p class="no-first-of">Article published in the summer edition of Net Mag exploring best practices when starting a pattern libraries. Also introduces Vault, a boilerplate tool that I built at Pusher.</p>
    <h3>Design Challenge <span>Net Mag - Summer 2014</span></h3>
    <p class="no-first-of">Invited to take part in the design challenge for the summer edition of Net magazine.</p>
    <h3>Spotlight Interview <span>WebDesignerMagazine - January 2014</span></h3>
    <p class="no-first-of">Interview and recent work published in January edition of Web Designer magazine.</p>
  </div>
</div>
<hr>
<div class="grid">
  <div class="grid__small_12 grid__medium-4 grid__large-6 grid__columns">
    <h2>Education</h2>
  </div>
  <div class="grid__small_12 grid__medium-8 grid__large-6 grid__columns">
    <h3>Southampton Solent University <span>2012 - 2015</span></h3>
    <p class="no-first-of">Graduated with a first class honours degree in Web Design. Also awarded first prize at the <a href="http://official.blog.solent.ac.uk/press-releases/bridging-the-innovation-gap-from-necessity-to-invention/">WRTI awards</a> for my final year project.</p>
    <br>
    <p class="no-first-of"><small><em>* Photo courtesy of <a href="https://www.flickr.com/photos/106173127@N06/">Vicky Carmichael</a></em></small></p>
  </div>
</div>
<div class="signpost">
  <a href="mailto:{{ site.email_secure }}?subject=Hey there!" class="btn btn--massive">{{ site.email_secure }}</a>
  <span class="signpost__helper">I'm available for small projects</span>
</div>

<script>
  var containerWidth = getComputedStyle(document.getElementById('feature-container')).width.slice(0, -2),
      containerHeight = getComputedStyle(document.getElementById('feature-container')).height.slice(0, -2),
      featureElements = document.getElementsByClassName('profile-feature__item');

  document.addEventListener('mousemove', function(event) {
    var rx = (containerHeight / 2 - event.pageY) / 50,
        ry = (containerWidth / 2 - event.pageX) / 100;

    for(var i = 0, l = featureElements.length; i < l; i++) {
      _dm = featureElements[i].getAttribute('data-lag')
      _x = (ry * 2) / _dm;
      _y = (rx * 2) / _dm;
      featureElements[i].style.transform = "matrix(1,0,0,1," + _x + "," + _y + ")";
    }
    
  })
</script>