<!DOCTYPE html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="/stylesheets/app.css">
  <script src="/js/vendor/modernizr-2.6.2.min.js"></script>
  <script type="text/javascript" src="//use.typekit.net/svz3djh.js"></script>
  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<!--[if lt IE 7]>
    <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
  <div class="page-wrapper">

      <div class="hero">
        <p>Matthew Forr is a UX developer and designer who loves building digital products.</p>
        <p class="contact">You can reach him via <a href="mailto:matt@pixlehacking.com">email</a> or <a href="http://twitter.com/matthewforr">twitter</a>. Currently, I am not accepting freelance gigs.</p>
      </div>

      <p class="recent">This is my recent work.</p>

      <div class="container">
        <section class="year">
<!--           <div class="date">
            <hr>
            <p>2013</p>
          </div> -->

          <article class="project">
            <div class="description">
              <h2>Catapult Mobile</h2>
              <p><a href="http://mobile.catapult.org">Catapult.org</a> is a non-profit startup that connects projects that empower women in the developing world with donors. Sort of like a non-profit Kickstarter. I was the lead UX Designer and Javascript developer of their new mobile website.</p>
            </div>

            <div class="controls">
              <a href="#"><i class="fa fa-chevron-right fa-border"></i></a>
              <a href="#"><i class="fa fa-chevron-left disabled fa-border"></i></a>
            </div>

            <div class="pictures">
              <div class="slider" data-pos="0">
                <div class="ipad-iphone group">
                  <img src="images/catapult-home-ipad.png" class="ipad">
                  <img src="images/catapult-home-iphone.png" class="iphone">
                </div>

                <div class="ipad-iphone group">
                  <img src="images/catapult-search-ipad.png" class="ipad">
                  <img src="images/catapult-search-iphone.png" class="iphone">
                </div>

                <div class="ipad-iphone group">
                  <img src="images/catapult-project-ipad.png" class="ipad">
                  <img src="images/catapult-project-iphone.png" class="iphone">
                </div>
              </div>
            </div>
          </article>

          <article class="project iphone no-controls">
            <div class="description">
              <h2>Air National Guard Mobile</h2>
              <p>When Vim Interactive joined the LM&amp;O team the first project they asked us to complete was a mobile site for the <a href="http://mobile.goang.com">Air National Guard</a>. This had been on their wishlist for a long time but never seemed to go anywhere. We knocked it out in a few weeks.</p>
            </div>

            <div class="pictures">
              <div class="slider" data-pos="0">
                <div class="iphone group">
                  <img src="images/ang-home-iphone.png" class="iphone">
                </div>

                <div class="iphone group">
                  <img src="images/ang-menu-iphone.png" class="iphone">
                </div>

                <div class="iphone group">
                  <img src="images/ang-new-iphone.png" class="iphone">
                </div>
              </div>
            </div>
          </article>

          <article class="project web">
            <div class="description">
              <h2>Public Knowledge</h2>
              <p><a href="http://www.publicknowledge.org">Public Knowledge</a> is a DC based non-profit that works to promote free and open access to the internet. I worked with them to revamp their information architecture and wireframe a new site. As a web designer and developer I was proud to help an organization with a mission so close to what I do.</p>
            </div>

            <div class="controls">
              <a href="#"><i class="fa fa-chevron-right fa-border"></i></a>
              <a href="#"><i class="fa fa-chevron-left disabled fa-border"></i></a>
            </div>

            <div class="pictures">
              <div class="slider" data-pos="0">
                <div class="web-iphone group">
                  <img src="images/pk-home-web.png" class="web">
                  <img src="images/pk-home-iphone.png" class="iphone">
                </div>

                <div class="web-iphone group">
                  <img src="images/pk-issues-web.png" class="web">
                  <img src="images/pk-issues-iphone.png" class="iphone">
                </div>

                <div class="web-iphone group">
                  <img src="images/pk-issue-web.png" class="web">
                  <img src="images/pk-issue-iphone.png" class="iphone">
                </div>
              </div>
            </div>
          </article>

          <article class="project web no-controls">
            <div class="description">
              <h2>Watchtower</h2>
              <p><a href="http://www.getwatchtower.com">This project</a> started as a simple internal tool for us to keep track of our clients MediaTemple servers. I took the original concept and turned it into a fully featured application. I coded the entire application using Laravel 4 and Backbone.js.</p>
            </div>

            <div class="controls">
              <a href="#"><i class="fa fa-chevron-right fa-border"></i></a>
              <a href="#"><i class="fa fa-chevron-left disabled fa-border"></i></a>
            </div>

            <div class="pictures">
              <div class="slider" data-pos="0">
                <div class="web-iphone group">
                  <img src="images/watchtower-home-web.png" class="web">
                  <img src="images/watchtower-home-iphone.png" class="iphone">
                </div>
              </div>
            </div>
          </article>

<!--           <article class="project">
            <div class="description">
              <h2>Twitter Takeover</h2>
              <p>The social media team at LM&amp;O ran the first twitter takeover as a simple concept with Dan Ernhart and the results were so stellar we moved forward with building a platform to make the concept really awesome. I lead the design studio to concept the initial product and coded up a functional prototype based on the sketches of the team.</p>
            </div>

            <div class="controls">
              <a href="#"><i class="fa fa-chevron-right fa-border"></i></a>
              <a href="#"><i class="fa fa-chevron-left disabled fa-border"></i></a>
            </div>

            <div class="pictures">
              <div class="slider" data-pos="0">
                <div class="ipad-iphone group">
                  <img src="images/catapult-home-ipad.png" class="ipad">
                  <img src="images/catapult-home-iphone.png" class="iphone">
                </div>

                <div class="ipad-iphone group">
                  <img src="images/catapult-search-ipad.png" class="ipad">
                  <img src="images/catapult-search-iphone.png" class="iphone">
                </div>

                <div class="ipad-iphone group">
                  <img src="images/catapult-project-ipad.png" class="ipad">
                  <img src="images/catapult-project-iphone.png" class="iphone">
                </div>
              </div>
            </div>
          </article> -->

<!--           <div class="date">
            <hr>
            <p>2012</p>
          </div>
 -->
       <!--   <article class="project iphone no-controls">
            <div class="description">
              <h2>AccessMT Multi-TouchTable</h2>
              <p>While at UMBC I built a multi-touch table for Dr. Shaun Kane. I worked with him to come up with the design and then constructed the table and installed the hardware to make it work. After building it we calibrated it and it's been used in research since then.</p>
            </div>

            <div class="controls">
              <a href="#"><i class="fa fa-chevron-right fa-border"></i></a>
              <a href="#"><i class="fa fa-chevron-left disabled fa-border"></i></a>
            </div>

            <div class="pictures">
              <video width="560" height="336" controls>
                <source src="images/AccessMTVideo.mp4" type="video/mp4">
                Your browser does not support the video tag.
              </video>
               <div class="slider" data-pos="0">
                <div class="web-iphone group">
                  <img src="images/watchtower-home-web.png" class="web">
                  <img src="images/watchtower-home-iphone.png" class="iphone">
                </div>
              </div>
            </div>
          </article> -->

          <!-- <article class="project iphone no-controls">
            <div class="description">
              <h2>Howard County Library System</h2>
              <p>After five years without a redesign the <a href="http://www.hclibrary.org">Howard County Library System's</a> (HCLS) website had grown to the point where it was difficult to navigate and no longer attractive. I helped them to architect a new one by conducting user research, stakeholder interviews and building an interactive prototype.</p>
            </div>

            <div class="controls">
              <a href="#"><i class="fa fa-chevron-right fa-border"></i></a>
              <a href="#"><i class="fa fa-chevron-left disabled fa-border"></i></a>
            </div>

            <div class="pictures">
              <div class="slider" data-pos="0">
                <div class="web-iphone group">
                  <img src="images/watchtower-home-web.png" class="web">
                  <img src="images/watchtower-home-iphone.png" class="iphone">
                </div>
              </div>
            </div>
          </article>-->

          <article class="project web">
            <div class="description">
              <h2>Betascape 2012</h2>
              <p>For the third Betascape event I was responsible for the Physical Computing Lab and development of the <a href="http://www.betascape.org">betascape.org</a> website. With speakers from across the eastern seaboard and 250 attendees this was the largest and most successful event to date.</p>
            </div>

            <div class="controls">
              <a href="#"><i class="fa fa-chevron-right fa-border"></i></a>
              <a href="#"><i class="fa fa-chevron-left disabled fa-border"></i></a>
            </div>

            <div class="pictures">
              <div class="slider" data-pos="0">
                <div class="web group">
                  <img src="images/betascape-home-web.png" class="web">
                </div>

                <div class="web group">
                  <img src="images/betascape-schedule-web.png" class="web">
                </div>
              </div>
            </div>
          </article>

          <article class="project web no-controls">
            <div class="description">
              <h2>Second Baltimore Hackathon</h2>
              <p>During the spring of 2012 we decided it was time to make the <a href="http://www.baltimorehackathon.org">Baltimore Hackathon</a> happen again. I led the team that organized this event where we had 120 attendees and gave away $3,125 in prizes.</p>
            </div>

            <div class="controls">
              <a href="#"><i class="fa fa-chevron-right fa-border"></i></a>
              <a href="#"><i class="fa fa-chevron-left disabled fa-border"></i></a>
            </div>

            <div class="pictures">
              <div class="slider" data-pos="0">
                <div class="web-iphone group">
                  <img src="images/second-baltimore-hackathon.png" class="web">
                  <!-- <img src="images/watchtower-home-iphone.png" class="iphone"> -->
                </div>
              </div>
            </div>
          </article>

        </section>
      </div>

    </div>
      <footer>
        <div class="social">
          <div class="row">
            <div class="large-10 large-centered columns">
              <p>
                <a href="https://github.com/matthewforr"><i class="fa fa-github-alt"></i></a>
                <a href="https://www.facebook.com/matthew.forr"><i class="fa fa-facebook"></i></a>
                <a href="https://twitter.com/matthewforr"><i class="fa fa-twitter"></i></a>
              </p>
            </div>
          </div>
        </div>

        <div class="copyright">
          <div class="row">
            <div class="large-10 large-centered columns">
              <p>Copyright 2013 - Matthew Forr. Thanks for visiting ┬─┬ノ( º _ ºノ)</p>
            </div>
          </div>
        </div>
      </footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
<script src="/js/plugins.js"></script>
<script src="/js/script.js"></script>

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-42958980-1', 'pixelhacking.com');
  ga('send', 'pageview');

</script>
</body>
</html>