<!doctype html>  

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> 
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>James Andres</title>
  <meta name="description" content="James Andres is a creative programmer living in Vancouver, Canada.">
  <meta name="author" content="James Andres">

  <!--  Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->


  <!-- CSS : implied media="all" -->
  <link rel="stylesheet" href="css/style.css?v=2">

  <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
  <script src="js/libs/modernizr-1.6.min.js"></script>

</head>

<body>
  <div id="container">
    <header>
      <div id="masthead">
        <div id="hcard-James-Andres" class="vcard">
          <img src="http://jamesandres.com/images/james-andres.png" alt="photo of James" class="photo"/>
          <h1><a class="url fn" href="http://jamesandres.com">James Andres</a></h1>
          <div class="adr">
            <span class="locality">Vancouver</span>,
            <span class="region">British Columbia</span>
            <span class="country-name">Canada</span>
          </div>
        </div>

        <p>Hello, I'm James, a creative programmer living in Vancouver, Canada.</p>
        <p>I write software, build websites and lead teams to do both.</p>
      </div>
    </header>

    <div id="main"><div id="main-inner">
      <div id="content">
        <div id="bio">
          <h2 class="centered"><span>About me</span></h2>
          <p>Welcome, scroll down to find a bit of information about my recent projects.</p>
          <p>I've been building sites using the Drupal CMS for 5 years.  I'm skilled with
             various other PHP frameworks too.  In addition I do a lot of scripting with
             Ruby and Bash.  I also write a little Python for fun.</p>
          <p>Besides software, I enjoy drawing, photography, rock climbing
             and cycling.</p>
          <p>If you would like to contact me use
             <a href="http://ca.linkedin.com/in/jamesjandres">Linked In</a>,
             <a href="http://drupal.org/user/33827">Drupal.org</a> or
             <a href="http://www.facebook.com/JamesJAndres">Facebook</a>.</p>
        </div>

        <div id="software" class="clearfix">
          <h2 class="centered"><span>I develop using</span></h2>
          <a href="http://drupal.org/user/33827" class="software-link drupal-logo"><img src="images/logo-drupal.png" alt="Drupal CMS logo" /></a>
          <a href="http://www.php.net" class="software-link php-logo"><img src="images/logo-php.png" alt="PHP language logo" /></a>
          <a href="http://www.ruby-lang.org" class="software-link ruby-logo"><img src="images/logo-ruby.png" alt="Ruby language logo" /></a>
          <a href="http://www.linux.com" class="software-link linux-logo"><img src="images/logo-linux.png" alt="Linux kernel logo" /></a>
          <a href="http://www.apple.com/macosx" class="software-link macos-logo"><img src="images/logo-macos.png" alt="Apple Mac OS logo" /></a>
        </div>

        <h2 class="centered"><span>Recently built</span></h2>
        <div class="brand-box stick-left">
          <div class="box-blurb">
            <p><a href="http://www.mattel.com"><strong>www.mattel.com</strong></a>: A from-scratch rebuild of Mattel.com using the Drupal CMS.  After the success of this project there was a large scale adoption of Drupal within Mattel.</p>
            <p><a href="http://chooconnection.jimmychoo.com/"><strong>chooconnection.jimmychoo.com</strong></a>: A visual, interactive timeline showcasing the history of Jimmy Choo.  Developed using the Raphaël JavaScript library, jQuery and Drupal.</p>
          </div>
          <a href="#mattel" class="brand-link"><img src="images/logo-mattel.png" /></a>
          <a href="#jimmychoo" class="brand-link"><img src="images/logo-jimmychoo.png" /></a>
        </div>

        <div class="brand-box stick-right">
          <div class="box-blurb">
            <p><a href="http://www.designspark.com"><strong>www.designspark.com</strong></a>: The fastest growing online community for electronics engineers, powered by Drupal.</p>
            <p><a href="http://www.thecleanestcar.com"><strong>www.thecleanestcar.com</strong></a>: 3M's Drupal powered car detailing social media campaign.</p>
          </div>
          <a href="#3m" class="brand-link"><img src="images/logo-3m.png" /></a>
          <a href="#designspark" class="brand-link"><img src="images/logo-designspark.png" /></a>
        </div>

        <div class="brand-box stick-left">
          <div class="box-blurb">
            <p><a href="http://virtual.mtv.com"><strong>virtual.mtv.com</strong></a> and <strong>www.vles.com</strong>: Virtual MTV and the vLES are an online 3D virtual meca for all things MTV.  A custom Drupal platform ties it all together.</p>
            <p><a href="http://community.tmlewin.co.uk/"><strong>community.tmlewin.co.uk</strong></a>: The online community behind the business wear retailer, running on a Drupal platform and integrated with the main TM Lewin eCommerce store.</p>
          </div>
          <a href="#mtv" class="brand-link"><img src="images/logo-mtv.png" /></a>
          <a href="#tmlewin" class="brand-link"><img src="images/logo-tmlewin.png" /></a>
        </div>

        <div class="brand-box stick-right">
          <div class="box-blurb">
            <p><a href="http://2009.workatplay.com"><strong>2009.workatplay.com</strong></a>: A ground up brand experience built for the launch of the Work at Play brand (site concept co-developed by <a href="http://www.emptycan.com">Jesse Korzan</a> and <a href="http://ca.linkedin.com/in/jmleroux">Jean-Michel Leroux</a>).  www.workatplay.com was regarded as <a href="http://www.workatplay.com/think/2009-work-play-website-retired">one of the best sites of 2009</a>.</p>
          </div>
          <a href="#workatplay" class="brand-link"><img src="images/logo-workatplay.png" /></a>
          <div class="brand-filler"><!-- Space filler --></div>
        </div>
      </div> <!--! end of #content -->
    </div></div> <!--! end of #main-inner, #main -->

  </div> <!--! end of #container -->

  <footer>
    <p>Copyright © 2011 James Andres. All rights reserved.</p>
    <p>I created the masthead illustration for this site using<br />
       Mike Beauregard's <a href="http://www.flickr.com/photos/31856336@N03/4212800523/">Short Stack</a> and<br />
       Bradley Davis' (BackpackPhotography) <a href="http://www.flickr.com/photos/backpackphotography/460766868/">Vancouver Island Pacific Rim</a>.</p>
  </footer>

  <!-- Javascript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>
  
  
  <!-- scripts concatenated and minified via ant build script-->
  <script src="js/script.js"></script>
  <!-- end concatenated and minified scripts-->
  
  
  <!--[if lt IE 7 ]>
    <script src="js/libs/dd_belatedpng.js"></script>
    <script> DD_belatedPNG.fix('img, .png_bg'); //fix any <img> or .png_bg background-images </script>
  <![endif]-->

  <!-- yui profiler and profileviewer - remove for production -->
  <!-- <script src="js/profiling/yahoo-profiling.min.js"></script> -->
  <!-- <script src="js/profiling/config.js"></script> -->
  <!-- end profiling code -->


  <!-- asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet 
       change the UA-XXXXX-X to be your site's ID -->
  <script>
   var _gaq = [['_setAccount', 'UA-3553677'], ['_trackPageview']];
   (function(d, t) {
    var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
    g.async = true;
    g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g, s);
   })(document, 'script');
  </script>
  
</body>
</html>