<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>    
  <title>Justin B. Evans | Web Designer, Developer, &amp; Artist</title>
  <meta name="description" content="Howdy! I am a web designer, web developer, and artist in the Washington D.C. area.">
  <script type="text/javascript">
    var loading = 0;
    setInterval(function(){
      loading++;
      document.getElementById('loading-text').innerHTML = "Loading." + new Array(loading % 8).join('.');
    }, 250);
  </script>
      <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="canonical" href="http://www.justinbevans.com">
        
    <!-- Icons! -->
    <link rel="apple-touch-icon" sizes="152x152" href="http://www.justinbevans.com/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="144x144" href="http://www.justinbevans.com/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="120x120" href="http://www.justinbevans.com/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="114x114" href="http://www.justinbevans.com/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="76x76" href="http://www.justinbevans.com/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="72x72" href="http://www.justinbevans.com/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="60x60" href="http://www.justinbevans.com/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="57x57" href="http://www.justinbevans.com/apple-touch-icon-57x57.png">
    
    <link rel="icon" type="image/png" href="http://www.justinbevans.com/favicon-196x196.png" sizes="196x196">
    <link rel="icon" type="image/png" href="http://www.justinbevans.com/favicon-160x160.png" sizes="160x160">
    <link rel="icon" type="image/png" href="http://www.justinbevans.com/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="http://www.justinbevans.com/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="http://www.justinbevans.com/favicon.ico" sizes="16x16">
    <meta name="msapplication-TileColor" content="#99ff99">
    <meta name="msapplication-TileImage" content="http://www.justinbevans.com/mstile-144x144.png">
    
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@justinbevans">
    <meta name="twitter:title" content="Justin B. Evans">
    <meta name="twitter:description" content="Web Designer, Front-End Developer, and Artist.">
    <meta name="twitter:image:src" content="http://www.justinbevans.com/icon-justinbevans-twitter.png">
    
    <!-- Facebook/OG -->
    <meta property="fb:admins" content="1254722295">
    <meta property="og:url" content="http://www.justinbevans.com">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Justin B. Evans">
    <meta property="og:image" content="http://www.justinbevans.com/icon-justinbevans-og.png"/>
    <meta property="og:description" content="Web Designer, Front-End Developer, and Artist.">
    <meta property="og:site_name" content="Justin B. Evans">
    
    <!-- The Google -->
    <meta itemprop="name" content="Justin B. Evans">
    <meta itemprop="description" content="Web Designer, Front-End Developer, and Artist.">
    <meta itemprop="image" content="http://www.justinbevans.com/icon-justinbevans-plus.png"> 
    
    <!-- Styles n' scripts -->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/scripts/html5shiv.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="/css/style.css" type="text/css" />
    
    <!--
    <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-3402570-1', 'auto');
        ga('send', 'pageview');    
    </script>
    -->  
</head>
<body class="world-homepage startup" >

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PCHM7J"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PCHM7J');</script>
<!-- End Google Tag Manager -->

<header id="toolbar"> 

  <div id="toolbar-left">  
  
    <div id="life-bar">
      <label>LIFE</label>
      <img src="/images/heart.gif" alt="" />
      <img src="/images/heart.gif" alt="" />
      <img src="/images/heart.gif" alt="" />
    </div>      
    
    <div id="score">
      <label>SCORE</label>
      <span id="score-total"></span>
    </div>  
    
  </div>  
  
  <button id="menu">Menu</button>  
  
  <div id="breadcrumbs">
    <label>WORLD</label>
    &ndash; homepage &ndash;
  </div> 
  
</header><nav id="navigation">
  <div id="navigation-inner">
    <div class="padding">    
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/web-design-development">Web</a></li>
        <li><a href="/portfolio">Art</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>      
    </div>
    <div id="navigation-bottom"></div>
  </div>      
  <p id="social-icons">
    <!--<a href="https://www.etsy.com/shop/justinbevans" class="etsy" target="_blank">Etsy</a>-->
    <a href="https://twitter.com/justinbevans" class="twitter" target="_blank">Twitter</a>
    <a href="http://instagram.com/justinbevans" class="instagram" target="_blank">Instagram</a>
    <a href="https://www.linkedin.com/in/justinbevans" class="linkedin" target="_blank">Linkedin</a>
    <!--<a href="http://evandonuts.tumblr.com/" class="tumblr" target="_blank">Tumblr</a>-->
    <!--<a href="https://www.youtube.com/user/bwishstudios/videos" class="youtube" target="_blank">Youtube</a>-->
  </p>
</nav>
<div id="loading-container">
  <div id="loading-text">
    Loading
  </div>
</div>

<div id="container">

  <section id="page">
  <div class="padding">

    <h1 class="start">
      <img src="/images/logo.png" alt="Justin B. Evans" /><br />
      <span>Web Designer/Developer &amp; Artist</span>
    </h1>  
    <p id="press-a">&ndash; Press <button>A</button> &ndash;</p>

    <div id="birds"></div>
    
    <div id="trees">
      <div class="tree treeline-0"></div>
      <div id="heroes">
        <a href="#more" id="alert"></a>
      </div>
      <div class="tree treeline-1"></div>
      <div class="tree treeline-2"></div>
      <div class="tree treeline-3"></div>
      <div class="tree treeline-4"></div>
    </div>
        
  </div>
  </section>

  <a name="more"></a>
  <section id="sub-page">
  <div class="padding">
    
    
    <article id="mini-about">
      <h2>About Justin B. Evans</h2>
      <img src="/images/avatar-homepage.gif" title="The B stands for &lt;br /&gt; yo'self!" alt="The B stands for &lt;br /&gt; yo'self!" />
      <p>Justin is a web designer, developer, and artist in the Washington D.C. area who writes in the 3rd person. A husband, father of twins, and tame beard grower, he likes to design and build websites on his own and at <a href="http://chongandkoster.com/">Chong + Koster</a>. In his (increasingly) spare time, Justin likes to drink coffee, make artsy stuff, fix things, tinker with electronics and <!--<span style="text-decoration: line-through;" title="stupid offseason...">watch</span> think--> watch football.</p>
      <p>Feel free to <a href="/about">learn more about me</a>, check out my <a href="/portfolio">artwork</a>, see what I do to <a href="/web-design-development">websites</a>, or just <a href="/contact">say hi</a>!</p>
    </article>    
    
    <div id="recent">
      <div id="latest-tweet">
        <h2>Latest Tweet</h2>   
        <img class="twitter-avatar" src="/images/twitter-homepage.gif" title="Tweet tweet!" alt="Tweet tweet!" /> 
        <div id="twitter"><p><span class="status">Managed to roll a 0 in D&amp;D tonight and was immediately dogpiled and arrested by the townsguard <a href="https://t.co/FQJAeK1OQt">https://t.co/FQJAeK1OQt</a></span><span class="meta"> <a href="http://twitter.com/justinbevans/status/1290862309926219783">August 5, 2020 4:08 AM</a></span></p></div>      </div>
      <div id="current-projects">
        <h2>Current Projects</h2>   
        <p><img src="/images/projects/p1.gif" alt="" /><br />???</p>
        <p><img src="/images/projects/p2.gif" alt="" /><br />???</p>
        <p><img src="/images/projects/p3.gif" alt="" /><br />???</p>
      </div>
    </div>
    
    <footer id="footer">        
      <p>&copy; JUSTIN B. EVANS 1999-2020</p>
    </footer>
    
  </div>
  </section>
  
</div>
<script type="text/javascript" src="/scripts/scripts.min.js"></script>
<script type="text/javascript">

  $(document).ready(function() {    

    $('body').addClass('startup'); 
  
    setTimeout(function () { 
      $('body').removeClass('startup');  
      $('#loading-container').addClass('hide');            
    }, 1500); 
    setTimeout(function () { 
      $('#alert').fadeIn(500);          
    }, 5000); 
      
  }); 
  
  $(document).bind('keydown', function(e) {
    if(e.keyCode == 65) {
      $('#menu,#navigation').addClass('active');
    }
  });
  
  $(window).bind('scroll', function(){  
    var x = $(this).scrollTop();
    $('#trees').css('background-position', 'center ' + -(parseInt(-x / 25)) + 'px');
    $('.treeline-1').css('background-position', 'center ' + -(parseInt(-x / 25)) + 'px');
    $('#heroes').css('background-position', 'inherit ' + -(parseInt(-x / 25)) + 'px');
    $('.treeline-2').css('background-position', 'center ' + -(parseInt(-x / 9)) + 'px');
    $('.treeline-3').css('background-position', 'center ' + -(parseInt(-x / 7)) + 'px');
    $('.treeline-4').css('background-position', 'center ' + -(parseInt(-x / 5)) + 'px');
  });
  
</script>
  
</body>
</html>