<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
    <title>Scott Dubois</title>

     <!-- Meta -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="Description" content="Scott Dubois" />
    <meta name="keywords" content="Scott, Dubois, Illustration, Design, Web, Environment, Landscape, Education, Cartoon, Shout Science" />

    <!-- My Styles -->
    <link href="css/main.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link href="css/font-awesome.css" rel="stylesheet">
    
    <!-- Google Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Merriweather:300,300italic,400,400italic,700,700italic' rel='stylesheet' type='text/css'>

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

    <!-- Gallery -->
    <link rel="stylesheet" href="css/magnific-popup.css"> 

     <!-- Favicons -->
    <link rel="shortcut icon" href="/img/favicon.png">

    <!-- 57x57 (precomposed) for iPhone 3GS, 2011 iPod Touch and older Android devices -->
    <link rel="apple-touch-icon-precomposed" href="/img/apple-touch-icon-precomposed.png">

    <!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/img/apple-touch-icon-72x72-precomposed.png">

    <!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and 2012 iPod Touch -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/apple-touch-icon-114x114-precomposed.png">

    <!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/img/apple-touch-icon-144x144-precomposed.png">
  
    <!-- Google Fonts -->

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Fox Animation -->
<!--Adobe Edge Runtime-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <script type="text/javascript" charset="utf-8" src="blue-fox-sm_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-32313810 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->

    <!-- Howler Audio -->
    <script type="text/javascript" src="howler.js"></script>
    <script type="text/javascript" src="howl.js"></script>

<!-- JQUERY UNVEIL -->

<script src="js/jquery.unveil.js"></script>

  </head>

  <body>

    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top normal" role="navigation">
      <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <div class="logo"><a href="/index.html"><img src="img/misc/logo.png"></a></div>
      </div>
      <div class="navbar-collapse collapse">
        </ul>
        <ul class="nav navbar-nav navbar-right">
        <li><a href="#projects" class="current">Projects</a></li>
        <li><a href="/about.html">About Me</a></li>
        <li><a href="https://twitter.com/scott_dubois" target="_blank"><i class="fa fa-twitter" style="font-size:20px;"></i></a></li>
        </ul>
      </div>
      </div>
    </nav>


<div class="row mt100" style="background:#4E85B5;padding:40px 0 20px 0;color:#fff;">
    <div class="container">
    <div class="col-md-4 hidden-sm hidden-xs">
   <div style="margin:; text-align:center;cursor: pointer;"
    <div id="Stage" class="EDGE-32313810">
  </div>
    </div>
    <div class="col-md-8 col-sm-12">
      <img src="img/misc/hello.png" style="margin:50px 0 0 12px;width:200px;">
    <p style="font-weight:400;margin:20px 0 0 20px;font-size:22px;line-height:34px;" class="hello">
        I'm a multidisciplinary designer living in Austin, Texas USA. I work at the intersection of digital media, design, and education. <a href="/about.html" style="color:#fff;">Learn more about me...</a>
    </p>
  </div>
  </div>
</div>

  <div class="controls">
    <div class="container" id="projects">
      <div class="col-md-12">
  <h2 style="display:inline;"><i class="fa fa-caret-down" style="color:#16dbc3"></i> My Projects</h2>
  <div class="pull-right">  
  <label>Filter:</label>
  
  <button class="filter mb10" data-filter="all">All</button>
  <button class="filter mb10" data-filter=".category-1">Web Design</button>
  <button class="filter mb10" data-filter=".category-2">Illustration</button>
  <button class="filter mb10" data-filter=".category-3">Art Direction</button>
  <button class="filter mb10" data-filter=".category-4">Environment</button>
  <button class="filter mb10" data-filter=".category-5">Education</button>
  <button class="filter mb10" data-filter=".category-6">Graphic Design</button>
  
  <!--<label>Sort:</label>
  
  <button class="sort" data-sort="myorder:asc">Newest</button>
  <button class="sort" data-sort="myorder:desc">Oldest</button>-->
</div>
</div>
</div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-12">
<div id="SortableDiv" class="sortablediv">

  <a href="projects/andrew-harper.html"><div class="mix category-1 category-3 category-6" data-myorder="1"><div class="mixtxt">Andrew Harper Travel</div><img src="img/ah/andrew-harper-index.jpg" width="100%"></div></a>

    <a href="projects/flac.html"><div class="mix category-1 category-4 category-6" data-myorder="9"><div class="mixtxt">Friends of Lydia Ann Channel</div><img src="img/flac/flac-index.jpg" width="100%"></div></a>

  <a href="projects/shout-science.html"><div class="mix category-1 category-2 category-5" data-myorder="2"><div class="mixtxt">Shout Science!</div><img src="img/science/shout-science-app-index.jpg" width="100%"></div></a>

  <a href="projects/khabele.html"><div class="mix category-1 category-4 category-5 category-6" data-myorder="3"><div class="mixtxt">The Khabele School</div><img src="img/khabele/big-bang-card-index.png" width="100%"></div></a>

  <a href="projects/childrens-illustration.html"><div class="mix category-2" data-myorder="4"><div class="mixtxt">Children's Illustration</div><img src="img/childrens/fish-boy-index-main.jpg" width="100%"></div></a>

  <a href="projects/urban-homestead.html"><div class="mix category-4 category-1 category-6" data-myorder="5"><div class="mixtxt">Garden Design</div><img src="img/garden/fonda-1.jpg" width="100%"></div></a>
  
  <a href="projects/kinky.html"><div class="mix category-1 category-3" data-myorder="8"><div class="mixtxt">Kinky Friedman for Governor</div><img src="img/kinky/kinky-index.jpg" width="100%"></div></a>

  <!--<a href="projects/education.html"><div class="mix category-2 category-4" data-myorder="6"><div class="mixtxt">Educational Diagrams</div><img src="img/diagram/diagram-index.jpg" width="100%"></div></a>-->

  <!--<a href="projects/portrait.html"><div class="mix category-2" data-myorder="6"><div class="mixtxt">Portraits</div><img src="img/portrait/borges-portrait-index.jpg" width="100%"></div></a>-->

  <a href="projects/freelance.html"><div class="mix category-1 category-6" data-myorder="7"><div class="mixtxt">Freelance Design</div><img src="img/freelance/freelance-index.jpg" width="100%"></div></a>

  <a href="projects/personal.html"><div class="mix category-2 category-6" data-myorder="7"><div class="mixtxt">Personal Projects</div><img src="img/personal/personal-index.jpg" width="100%"></div></a>

  <!--<a href="projects/tshirt.html"><div class="mix category-2 category-4" data-myorder="7"><div class="mixtxt">T-Shirts</div><img src="img/tshirt/tshirt-index.jpg" width="100%"></div></a>-->

  <!--<a href="projects/photo.html"><div class="mix" data-myorder="7"><div class="mixtxt">Photo &amp; Video</div><img src="img/garden/fonda-1.jpg" width="100%"></div></a>-->

  <div class="gap"></div>
  <div class="gap"></div>

</div>
</div>
</div>
</div>

  <!-- FOOTER -->  

  <footer class="row">
    <div class="container">
      
      <div class="col-md-6  col-xs-12">
      Copyright 2015 : Scott Dubois<br>
      <div class="circle-footer">
        <a href="https://twitter.com/scott_dubois" target="_blank"><i class="fa fa-twitter"></i></a>
      </div>
      <div class="circle-footer">
        <a href="https://www.behance.net/scottdubois" target="_blank"><i class="fa fa-behance"></i></a>
      </div>
      <div class="circle-footer">
        <a href="mailto:email@scottdubois.me"><i class="fa fa-envelope"></i></a>
      </div>
      </div>

       <div class="col-md-6 col-xs-12">

      <img src="/img/misc/anton.png" class="pull-left" style="margin-right:20px;"><div class="mt20" style="margin-bottom:10px;">ANTON VAN LEEUWENHOEK WANTS YOU<br> TO READ, <strong><a href="http://www.shoutscience.com" target="_blank">SHOUT SCIENCE!</a></strong></div>
      <a href="https://itunes.apple.com/us/app/shout-science!/id672884678?ls=1&mt=8" target="_blank"><img src="img/misc/app-store.svg"></a>
     
      </div>

    </div>
  </footer>


    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    

    <!-- Gallery -->

        <script src="js/jquery.magnific-popup.js"></script> 
    
        <script type="text/javascript">
  
            $(document).ready(function() {
          $('.image-link').magnificPopup({type:'image'});
        });

        $('.img-gallery').magnificPopup({
          delegate: 'a', // child items selector, by clicking on it popup will open
          type: 'image',
          gallery: {
            // options for gallery
            enabled: true,
          },
           removalDelay: 500,
           mainClass: 'mfp-fade',
});
    
    </script>

<!-- Shrinking Navbar -->
    <script>
      $(window).scroll(function() {
      if ($(document).scrollTop() > 40) {
      $('.navbar').addClass('shrink');
      }
      else {
      $('.navbar').removeClass('shrink'); }
      });
    </script>

 <!-- FADE -->   

    <script type="text/javascript">
$(document).ready(function() {
    $("body").css("display", "none");
 
    $("body").fadeIn(500);
 
    $("a.transition").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(200, redirectPage);      
    });
         
    function redirectPage() {
        window.location = linkLocation;
    }
});
</script>

<!-- MIXITUP -->
<script src="js/jquery.mixitup.min.js"></script>
 <script type="text/javascript">
$(function(){
  $('#SortableDiv').mixItUp();
});
</script>

<!-- SMOOTH SCROLL -->

<script type="text/javascript">
$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash;
	    var $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 900, 'swing', function () {
	        window.location.hash = target;
	    });
	});
});
</script>

  </body>
</html>