<!DOCTYPE html>
<html lang="en">

  <head>
  <meta charset="UTF-8">
  <link href="http://gmpg.org/xfn/11" rel="profile">

  <!-- Enable responsiveness on mobile devices-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

  <title>
    
      ITWS &middot; The IT Workshop
    
  </title>

  <!-- Fonts -->
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic' rel='stylesheet' type='text/css'>

  <!-- CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/paper/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/styles.css">

  <!-- Icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/apple-touch-icon-precomposed.png">
  <link rel="shortcut icon" href="/public/favicon.ico">

  <!-- RSS -->
  <link rel="alternate" type="application/atom+xml" title="ITWS" href="/atom.xml">
</head>


  <body class="template-home">
    <div class="blur-container inactive">
      <h1>Benjamin Klein</h1>
<h2>Trust me, I'm a software engineer</h2>

<section class="personal-tags">
    Ruby Enthusiast. Web Software Engineer. Linux Fanboy. Open Source Developer. Photographer. Husband. Gamer.
</section>

<section class="social-icons">
    <span class="phortx">
        @phortx
    </span>

    <ul>
        <li>
            <a href="https://github.com/phortx" target="_blank" class="hover-icon">
                <i class="icon ion-social-github-outline"></i>
                <i class="icon ion-social-github show-on-hover"></i>
            </a>
        </li>

        <li>
            <a href="https://twitter.com/phortx" target="_blank" class="hover-icon">
                <i class="icon ion-social-twitter-outline"></i>
                <i class="icon ion-social-twitter show-on-hover"></i>
            </a>
        </li>

        <li>
            <a href="https://plus.google.com/" target="_blank" class="hover-icon">
                <i class="icon ion-social-googleplus-outline"></i>
                <i class="icon ion-social-googleplus show-on-hover"></i>
            </a>
        </li>

        <li>
            <a href="/atom.xml" target="_blank" class="hover-icon">
                <i class="icon ion-social-rss-outline"></i>
                <i class="icon ion-social-rss show-on-hover"></i>
            </a>
        </li>
    </ul>
</section>
    </div>

    <a href="#" class="navigation-link hover-icon">
  <i class="icon ion-ios-more-outline"></i>
  <i class="icon ion-ios-more show-on-hover"></i>
</a>

<nav class="navigation-container">
  <div class="navigation navigation-hidden">
    <ul>
      <li>
        <a href="/" class="hover-icon">
          <i class="icon ion-ios-home-outline"></i>
          <i class="icon ion-ios-home show-on-hover"></i>

          <span>Home</span>
        </a>
      </li>

      <li>
        <a href="/about" class="hover-icon">
          <i class="icon ion-ios-person-outline"></i>
          <i class="icon ion-ios-person show-on-hover"></i>

          <span>About Me</span>
        </a>
      </li>

      <li>
        <a href="/blog" class="hover-icon">
          <i class="icon ion-ios-bookmarks-outline"></i>
          <i class="icon ion-ios-bookmarks show-on-hover"></i>

          <span>Blog</span>
        </a>
      </li>

      <li>
        <a href="https://github.com/phortx" target="_blank" class="hover-icon">
          <i class="icon ion-ios-flask-outline"></i>
          <i class="icon ion-ios-flask show-on-hover"></i>

          <span>Projects</span>
        </a>
      </li>

      <li>
        <a href="https://500px.com/phortx" target="_blank" class="hover-icon">
          <i class="icon ion-ios-camera-outline"></i>
          <i class="icon ion-ios-camera show-on-hover"></i>

          <span>Photos</span>
        </a>
      </li>

      <li>
        <a href="/hire" class="hover-icon">
          <i class="icon ion-ios-briefcase-outline"></i>
          <i class="icon ion-ios-briefcase show-on-hover"></i>

          <span>Hire Me</span>
        </a>
      </li>

      <li>
        <a href="#" class="hover-icon contact-link">
          <i class="icon ion-ios-email-outline"></i>
          <i class="icon ion-ios-email show-on-hover"></i>

          <span>Contact</span>
        </a>
      </li>

      <li>
        <a href="#" class="hide-navigation-button hover-icon">
          <i class="icon ion-ios-close-outline"></i>
          <i class="icon ion-ios-close show-on-hover"></i>

          <span>Hide</span>
        </a>
      </li>
    </ul>

    <footer>
      ITWS - The IT Workshop - powered by Benjamin Klein
    </footer>
  </div>
</nav>


<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
  $(function() {
    var blurContainer = $('.blur-container'),
            navigation = $('.navigation'),
            navigationContainer = $('.navigation-container');

    $('.navigation-link').on('click', function(event) {
      navigation.css('transform', 'rotateX(0)');
      navigation.css('opacity', 1);
      navigationContainer.css('top', '2rem');
      blurContainer.removeClass('inactive');
    });

    $('.hide-navigation-button').on('click', function(event) {
      navigation.css('transform', 'rotateX(-100deg)');
      navigation.css('opacity', 0);
      navigationContainer.css('top', '-100%');
      blurContainer.addClass('inactive');
    });

    var mt = ['ma', 'il', 'to', ':', 'be', 'nn', 'y@', 'it', 'ws.', 'de']
    $('.contact-link').attr('href', mt.join(''));
  });


  // GA
  (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-36474743-1', 'auto');
  ga('send', 'pageview');
</script>
  </body>
</html>
