<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Jens Nordal | Seattle Based Web Developer Portfolio</title>
    <meta name="description" content="Seattle based web developer Jens Nordal's portfolio">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="img/apple-touch-icon-76x76.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="img/apple-touch-icon-120x120.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon-144x144.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="img/apple-touch-icon-152x152.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon-180x180.png" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/animate.css/animate.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
    <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>

<body>
    <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="custom-nav">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Jens Nordal</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right" id="navbar-right">
                    <li><a href="#about">ABOUT ME</a></li>
                    <li><a href="#skills">MY SKILLS</a></li>
                    <li><a href="#portfolio">PORTFOLIO</a></li>
                    <li><a href="#contact">CONTACT</a></li>
                    <!-- TODO: Create modal with contact form <li><a href="#" data-toggle="modal" data-target="#bannerformmodal">CONTACT</a></li> -->
                </ul>
            </div>
            <!--/.navbar-collapse -->
        </div>
    </nav>
    <!-- Main jumbotron -->
    <section>
        <div class="jumbotron">
            <div class="container">
            </div>
        </div>
    </section>
    <section>
        <div class="container-fluid" id="about">
            <div class="row col-md-12">
                <h1>Here comes the elevator pitch!</h1>
                <h2><i class="fa fa-chevron-circle-down" aria-hidden="true"></i></h2>
            </div>
        </div>
        <div class="container-fluid wow fadeIn" id="about-bd">
            <div class="row col-md-12">
                <p>I’m Jens, a Seattle-based code addict and budding front-end web developer with a passion for elegant user experience design. I love creating simple, aesthetically pleasing, easy to use websites utilizing the cleanest code possible. I’m looking to apply my current skill set and positive attitude to add value to your web development team, while enthusiastically learning and honing my craft.</p>
            </div>
        </div>
    </section>
    <section>
        <div class="container" id="skills">
            <div class="row wow fadeIn animated">
                <h2>MY SKILLS</h2>
                <div class="col-md-3 wow fadeIn animated">
                    <img src="img/icons/code.png" alt="Image of empty code tag">
                    <h3>HTML5 and CSS</h3>
                    <p>Sass, Scss and Less</p>
                </div>
                <div class="col-md-3 wow fadeIn animated">
                    <img src="img/icons/rocket.png" alt="Image of a rocket fast javascript">
                    <h3>JavaScript</h3>
                    <p>Jquery and Angular</p>
                </div>
                <div class="col-md-3 wow fadeIn animated">
                    <img src="img/icons/terminal.png" alt="Image of terminal window">
                    <h3>Command Line</h3>
                    <p>Yeoman, Grunt, Bower</p>
                </div>
                <div class="col-md-3 wow fadeIn animated">
                    <img src="img/icons/cup.png" alt="Image of a coffee cup">
                    <h3>Master Coffee Drinker</h3>
                    <p>Lattes, Mochas, Drip</p>
                </div>
            </div>
        </div>
        <!-- /container -->
    </section>
    <section>
        <div class="container" id="portfolio">
            <div class="row wow fadeInUp">
                <div class="col-md-4">
                    <a href="http://jensnordal.com/charging-stations/"><h2>Charging Stations</h2></a>
                    <a href="http://jensnordal.com/charging-stations/">
                        <img src="img/portfolio/charging-stations.png" class="img-responsive" alt="Screenshot of charging stations app"></a>
                    <br>
                    <p>Find and map electric vehicle charging stations. Accesses the U.S. Department of Energy’s API. Built using AngularJS, Yeoman, Grunt and Bower.
                        <br><a href="https://github.com/JensNordal/charging-stations">SEE C<i class="fa fa-github" aria-hidden="true"></i>DE</a></p>
                </div>
                <div class="col-md-4">
                    <a href="http://jensnordal.com/wats1020-mobile-friendly-layout"><h2>VideoPhile</h2></a>
                    <a href="http://jensnordal.com/wats1020-mobile-friendly-layout">
                        <img src="img/portfolio/videophile.png" class="img-responsive" alt="Screenshot of video product company website"></a>
                    <br>
                    <p>Company website for an imaginary video production company. Built using HTML5, CSS, Bootstrap, JavaScript, Jquery, as well as mapping with Leaflet.
                        <br><a href="https://github.com/JensNordal/wats1020-mobile-friendly-layout/">SEE C<i class="fa fa-github" aria-hidden="true"></i>DE</a></p>
                </div>
                <div class="col-md-4">
                    <a href="http://jensnordal.com/wats1010-product-page/"><h2>API Superstore</h2></a>
                    <a href="http://jensnordal.com/wats1010-product-page/">
                        <img src="img/portfolio/api-superstore.png" class="img-responsive" alt="Screenshot of API Superstore company website"></a>
                    <br>
                    <p>An imaginary product page built with HTML5 and CSS. Features Bootstrap carousel and embedded video.
                        <br><a href="https://github.com/JensNordal/wats1010-product-page/">SEE C<i class="fa fa-github" aria-hidden="true"></i>DE</a></p>
                </div>
            </div>
            <div class="row wow fadeInUp">
                <div class="col-md-4">
                    <a href="http://jensnordal.com/wats1010-embedded-media/"><h2>Monkaa</h2></a>
                    <a href="http://jensnordal.com/wats1010-embedded-media/">
                        <img src="img/portfolio/monkaa.png" class="img-responsive" alt="Screenshot of Monkaa the monkey website"></a>
                    <br>
                    <p>Website for Monkaa the monkey. Site features embedded HTML5 video and audio. Built using HTML5 and CSS.
                        <br><a href="https://github.com/JensNordal/wats1010-embedded-media/">SEE C<i class="fa fa-github" aria-hidden="true"></i>DE</a></p>
                </div>
                <div class="col-md-4">
                    <a href="http://jensnordal.com/wats1020-add-a-map/"><h2>Mt. Ranier</h2></a>
                    <a href="http://jensnordal.com/wats1020-add-a-map/">
                        <img src="img/portfolio/mt-ranier.png" class="img-responsive" alt="Screenshot of Mt. Rainier informational website"></a>
                    <br>
                    <p>Mt. Rainier informational site features implementation of mapping using the Leaflet.js library and dynamic tabs. Uses HTML5, CSS and Bootstrap.
                        <br><a href="https://github.com/JensNordal/wats1020-add-a-map/">SEE C<i class="fa fa-github" aria-hidden="true"></i>DE</a></p>
                </div>
                <div class="col-md-4">
                    <a href="http://jensnordal.com/wats1020-dom-manipulation/"><h2>Grace Hopper</h2></a>
                    <a href="http://jensnordal.com/wats1020-dom-manipulation/">
                        <img src="img/portfolio/grace-hopper.png" class="img-responsive" alt="Screenshot of Grace Murray Hopper informational website"></a>
                    <br>
                    <p>Grace Hopper informational site. Dom manipulation using Jquery. Built with HTML5 and Bootstrap.
                        <br><a href="https://github.com/JensNordal/wats1020-dom-manipulation/">SEE C<i class="fa fa-github" aria-hidden="true"></i>DE</a></p>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container-fluid" id="contact">
            <div class="col-md-12 wow fadeIn">
                <h1>Still curious?</h1>
                <p>Learn more about me and check out my code...</p>
            </div>
            <div class="col-md-5"></div>
            <div class="col-md-1 wow fadeInLeft">
                <a href="http://www.linkedin.com/in/jensnordal"><img src="img/icons/linkedin.png" class="img-responsive" alt="See my LinkedIn profile"></a>
            </div>
            <div class="col-md-1 wow fadeInRight">
                <a href="http://www.github.com/jensnordal"><img src="img/icons/github.png" class="img-responsive" alt="Check out my code on my GitHub profile "></a>
            </div>
            <div class="col-md-5"></div>
        </div>
        <div class="container-fluid contact-2">
            <div class="col-md-7 leftColumn wow fadeIn">
                <h2>Say hello</h2>
                <h3>I'd love to chat...</h3>
                <p>Let's discuss how we can work together to acheive
                    <br>great things. I'll even buy the coffee!</p>
            </div>
            <div class="col-md-5 rightColumn wow fadeIn">
                <ul>
                    <li>
                        <a href="tel:(206)465-5669"><img src="img/icons/phone.png" alt="Give me a call and let's chat">(206)465-5669</a>
                    </li>
                    <li>
                        <a href="mailto:jensnordal@gmail.com"><img src="img/icons/inbox.png" alt="Send me an email and I'll write you back">Email Me</a>
                    </li>
                    <li>
                        <a href="http://www.twitter.com/jensnordal"><img src="img/icons/twitter.png" alt="Hit me up on Twitter @jensnordal">@jensnordal</a>
                    </li>
                </ul>
            </div>
            <footer>
                <p>&copy; Jens Nordal 2016</p>
            </footer>
        </div>
    </section>
    <a href="#0" class="scrollTop-btn scrollTop-is-visible scrollTop-fade-out"></a>
    <!-- /container -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')
    </script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <script src="js/wow.js"></script>
    <!-- Google Analytics -->
    <script>
    (function(b, o, i, l, e, r) {
        b.GoogleAnalyticsObject = l;
        b[l] || (b[l] =
            function() {
                (b[l].q = b[l].q || []).push(arguments)
            });
        b[l].l = +new Date;
        e = o.createElement(i);
        r = o.getElementsByTagName(i)[0];
        e.src = '//www.google-analytics.com/analytics.js';
        r.parentNode.insertBefore(e, r)
    }(window, document, 'script', 'ga'));
    ga('create', 'UA-86918958-1', 'auto');
    ga('send', 'pageview');
    </script>
</body>

</html>
