<div class="container">
  <div class="row jumbotron indexBKGD">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1">
        <div class="row">
           <div class="col-12 col-sm-12 col-lg-12" style="text-align: center;">
             <div class="panel panel-default">
               <div class="panel-body">
                 <h2 style="text-align: center;"><strong>Nathaniel Buechler</strong></h2>
                 <h6 style="text-align: center;"><i>Multifaceted Specialist</i></h6>
                 <h6 style="text-align: center;">
                   <a class="btn btn-default" href="https://github.com/nbuechler"><i class="fa fa-2x fa-github"></i></a>
                   <a class="btn btn-default" href="https://www.linkedin.com/in/nathaniel-buechler"><i class="fa fa-2x fa-linkedin-square"></i></a>
                   <a class="btn btn-default" href="mailto:natebuechler@gmail.com?Subject=Hello%20Nathaniel"><i class="fa fa-2x fa-envelope"></i></a>
                   <a class="btn btn-default" href="/resume/Nathaniel_Buechler-Sr_UX_Engineer.pdf"><i class="fa fa-2x fa-file-text"></i></a>
                 </h6>
                 <hr></hr>
                 <h6 class="well" style="text-align: center;">
                   <i>Where is my attention?</i><br></br>
                   My talents as a Full-Stack JavaScript Engineer combined with my Python experience allow me to actively experiment with basic ML, AC, NLP, IoT, and microservices to solve real problems.
                 </h6>
                 <h6 style="text-align: center;">
                   I'm passionate about connecting many different themes with many "lenses" of knowledge.
                   If you would like to learn more about me, below you will see a few different clickable icons to spark your interest about my interests. Please, enjoy my website!
                 </h6>
               </div>
             </div>
           </div>
        </div>
        <div class="row">
          <div class="col-sm-12 col-lg-5 mobile" style="text-align: center; padding-bottom: 5%; padding-top: 6%;">
            <a href="http://nathanielbuechler.com/"><img style="height: 220px; cursor: default;" onclick="alert('You found the secret!!')" src="images/default-hex.png" alt="Nathaniel" /></a>
          </div>
          <div class="col-xs-12 mobile" id="roleBarMobile">
            <div class="hextopshift">
              <a ui-sref="artist"><img class="roleIcon-hex" src="images/web-rdy_icons/artist-hex.png" alt="artist" /></a>
              <a ui-sref="painter"><img class="roleIcon-hex" src="images/web-rdy_icons/painter-hex.png" alt="painter" /></a>
            </div>

            <div class="hextopshift hexrightshift">
              <a ui-sref="photographer"><img class="roleIcon-hex" src="images/web-rdy_icons/photographer-hex.png" alt="photographer" /></a>
            </div>

            <div class="hextopshift">
              <a ui-sref="graphic-designer"><img class="roleIcon-hex" src="images/web-rdy_icons/graphic-designer-hex.png" alt="graphic-designer" /></a>
              <a ui-sref="sound-designer"><img class="roleIcon-hex" src="images/web-rdy_icons/sound-designer-hex.png" alt="sound-designer" /></a>
            </div>

            <div class="hextopshift hexrightshift">
              <a ui-sref="musician"><img class="roleIcon-hex" src="images/web-rdy_icons/musician-hex.png" alt="musician" /></a>
            </div>

            <div class="hextopshift">
              <a ui-sref="journalist"><img class="roleIcon-hex" src="images/web-rdy_icons/journalist-hex.png" alt="journalist" /></a>
              <a ui-sref="world-historian"><img class="roleIcon-hex" src="images/web-rdy_icons/world-historian-hex.png" alt="world historian" /></a>
            </div>

            <div class="hextopshift hexrightshift">
              <a ui-sref="political-economist"><img class="roleIcon-hex" src="images/web-rdy_icons/political-economist-hex.png" alt="political economist" /></a>
            </div>

            <div class="hextopshift">
              <a ui-sref="social-activist"><img class="roleIcon-hex" src="images/web-rdy_icons/social-activist-hex.png" alt="social activist" /></a>
              <a ui-sref="social-scientist"><img class="roleIcon-hex" src="images/web-rdy_icons/social-scientist-hex.png" alt="social_scientist" /></a>
            </div>

            <div class="hextopshift hexrightshift">
              <a ui-sref="comparative-institutionalist"><img class="roleIcon-hex" src="images/web-rdy_icons/comparative-institutionalist-hex.png" alt="comparative institutionalist"/></a>
            </div>

            <div class="hextopshift">
              <a ui-sref="cultural-anthropologist"><img class="roleIcon-hex" src="images/web-rdy_icons/cultural-anthropologist-hex.png" alt="cultural_anthropologist" /></a>
              <a ui-sref="linguist"><img class="roleIcon-hex" src="images/web-rdy_icons/linguist-hex.png" alt="linguist" /></a>
            </div>

            <div class="hextopshift hexrightshift">
              <a ui-sref="computer-programmer"><img class="roleIcon-hex" src="images/web-rdy_icons/computer-programmer-hex.png" alt="computer_programmer" /></a>
            </div>

            <div class="hextopshift">
              <a ui-sref="back-end-developer"><img class="roleIcon-hex" src="images/web-rdy_icons/back-end-developer-hex.png" alt="back-end developer"/></a>
              <a ui-sref="front-end-developer"><img class="roleIcon-hex" src="images/web-rdy_icons/front-end-developer-hex.png" alt="front-end developer" /></a>
            </div>

            <div class="hextopshift hexrightshift">
              <a ui-sref="natural-scientist"><img class="roleIcon-hex" src="images/web-rdy_icons/natural-scientist-hex.png" alt="natural_scientist" /></a>
            </div>

            <div class="hextopshift">
              <a ui-sref="engineer"><img class="roleIcon-hex" src="images/web-rdy_icons/engineer-hex.png" alt="engineer" /></a>
              <a ui-sref="biologist"><img class="roleIcon-hex" src="images/web-rdy_icons/biologist-hex.png" alt="biologist" /></a>
            </div>

            <div class="hextopshift hexrightshift">
              <a ui-sref="affective-engineer"><img class="roleIcon-hex" src="images/web-rdy_icons/affective-engineer-hex.png" alt="affective-engineer"/></a>
            </div>

            <div class="hextopshift">
              <a ui-sref="software-engineer"><img class="roleIcon-hex" src="images/web-rdy_icons/software-engineer-hex.png" alt="software-engineer" /></a>
              <a ui-sref="botanist"><img class="roleIcon-hex" src="images/web-rdy_icons/botanist-hex.png" alt="botanist" /></a>
            </div>

<!--
            <div class="hextopshift hexrightshift">
              <a ui-sref="hardware-engineer"><img class="roleIcon-hex" src="images/web-rdy_icons/hardware-engineer-hex.png" alt="hardware-engineer" /></a>
              <a ui-sref="chemist"><img class="roleIcon-hex" src="images/web-rdy_icons/chemist-hex.png" alt="chemist" /></a>
            </div>
-->
          </div>

          <!-- Mobile above, desktop below -->

          <div class="col-sm-12 col-lg-5 desktop" style="text-align: center; padding-bottom: 5%; padding-top: 6%;">
            <a href="http://nathanielbuechler.com/"><img style="height: 320px; cursor: default;" onclick="alert('You found the secret!!')" src="images/default-hex.png" alt="Nathaniel" /></a>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-7 desktop" id="roleBarDesktop">
              <div class="hextopshift">
                <a ui-sref="artist"><img class="roleIcon-hex" src="images/web-rdy_icons/artist-hex.png" alt="artist" /></a>
                <a ui-sref="painter"><img class="roleIcon-hex" src="images/web-rdy_icons/painter-hex.png" alt="painter" /></a>
                <a ui-sref="photographer"><img class="roleIcon-hex" src="images/web-rdy_icons/photographer-hex.png" alt="photographer" /></a>
              </div>

              <div class="hextopshift hexrightshift">
                <a ui-sref="graphic-designer"><img class="roleIcon-hex" src="images/web-rdy_icons/graphic-designer-hex.png" alt="graphic-designer" /></a>
                <a ui-sref="sound-designer"><img class="roleIcon-hex" src="images/web-rdy_icons/sound-designer-hex.png" alt="sound-designer" /></a>
              </div>

              <div class="hextopshift">
                <a ui-sref="musician"><img class="roleIcon-hex" src="images/web-rdy_icons/musician-hex.png" alt="musician" /></a>
                <a ui-sref="journalist"><img class="roleIcon-hex" src="images/web-rdy_icons/journalist-hex.png" alt="journalist" /></a>
                <a ui-sref="world-historian"><img class="roleIcon-hex" src="images/web-rdy_icons/world-historian-hex.png" alt="world historian" /></a>
              </div>

              <div class="hextopshift hexrightshift">
                <a ui-sref="political-economist"><img class="roleIcon-hex" src="images/web-rdy_icons/political-economist-hex.png" alt="political economist" /></a>
                <a ui-sref="social-activist"><img class="roleIcon-hex" src="images/web-rdy_icons/social-activist-hex.png" alt="social activist" /></a>
              </div>

              <div class="hextopshift">
                <a ui-sref="social-scientist"><img class="roleIcon-hex" src="images/web-rdy_icons/social-scientist-hex.png" alt="social_scientist" /></a>
                <a ui-sref="comparative-institutionalist"><img class="roleIcon-hex" src="images/web-rdy_icons/comparative-institutionalist-hex.png" alt="comparative institutionalist"/></a>
                <a ui-sref="cultural-anthropologist"><img class="roleIcon-hex" src="images/web-rdy_icons/cultural-anthropologist-hex.png" alt="cultural_anthropologist" /></a>
              </div>

              <div class="hextopshift hexrightshift">
                <a ui-sref="linguist"><img class="roleIcon-hex" src="images/web-rdy_icons/linguist-hex.png" alt="linguist" /></a>
                <a ui-sref="computer-programmer"><img class="roleIcon-hex" src="images/web-rdy_icons/computer-programmer-hex.png" alt="computer_programmer" /></a>
              </div>

              <div class="hextopshift">
                <a ui-sref="back-end-developer"><img class="roleIcon-hex" src="images/web-rdy_icons/back-end-developer-hex.png" alt="back-end developer"/></a>
                <a ui-sref="front-end-developer"><img class="roleIcon-hex" src="images/web-rdy_icons/front-end-developer-hex.png" alt="front-end developer" /></a>
                <a ui-sref="natural-scientist"><img class="roleIcon-hex" src="images/web-rdy_icons/natural-scientist-hex.png" alt="natural_scientist" /></a>
              </div>

              <div class="hextopshift hexrightshift">
                <a ui-sref="engineer"><img class="roleIcon-hex" src="images/web-rdy_icons/engineer-hex.png" alt="engineer" /></a>
                <a ui-sref="biologist"><img class="roleIcon-hex" src="images/web-rdy_icons/biologist-hex.png" alt="biologist" /></a>
              </div>

              <div class="hextopshift">
                <a ui-sref="affective-engineer"><img class="roleIcon-hex" src="images/web-rdy_icons/affective-engineer-hex.png" alt="affective-engineer"/></a>
                <a ui-sref="software-engineer"><img class="roleIcon-hex" src="images/web-rdy_icons/software-engineer-hex.png" alt="software-engineer" /></a>
                <a ui-sref="botanist"><img class="roleIcon-hex" src="images/web-rdy_icons/botanist-hex.png" alt="botanist" /></a>
              </div>
<!--
              <div class="hextopshift hexrightshift">
                <a ui-sref="hardware-engineer"><img class="roleIcon-hex" src="images/web-rdy_icons/hardware-engineer-hex.png" alt="hardware-engineer" /></a>
                <a ui-sref="chemist"><img class="roleIcon-hex" src="images/web-rdy_icons/chemist-hex.png" alt="chemist" /></a>
              </div>
-->
          </div>
        </div>
        <br></br>
        <div class="row">
           <div class="col-12 col-sm-12 col-lg-12" style="text-align: center;">
             <div class="panel panel-default">
               <div class="panel-body">
                 <h2 style="text-align: center;"><strong>>30 Seconds</strong></h2>
                 <h6 style="text-align: center;"><i>About Me</i></h6>
                 <hr></hr>
                 <h6 style="text-align: center;">
                   A dream job would be working on trying to solve societal and institutional problems. For more information on that, consider reading <i><a style="color: #A1A1A1;" href="https://books.google.com/books/about/Philosophy_and_the_Social_Problem_Schola.html?id=pw48rgEACAAJ&hl=en">'Philosophy and the Social Problem'</a></i> by Will Durant. It's available for free on Google Books. If your familiar with some of these ideas, then you might become more aware of some of my personal motivations. If you aren't familiar, I can summarize my goals by stating that I'm interested in working on software that improves the emotional intelligence of people.
                 </h6>
                 <hr></hr>
                 <h6 style="text-align: center;">
                   In a technology sense, my latest intrigue is focused on the field of <i><a style="color: #A1A1A1;" href="https://en.wikipedia.org/wiki/Affective_computing">Affective Computing.</a></i> I'm learning Tensorflow and other machine learning tools as a way to get a working knowledge. Additionally, I am interested in more conventional programming languages, but my main expertise is actually in JavaScript. I have been considering the next wave of JavaScript, and React.js is where I am focusing my time.
                 </h6>
                 <hr></hr>
                 <h6 style="text-align: center;">
                   As for other technologies, I prefer using Flask and configuration based frameworks, but I am additionally looking into polyglot programming and polyglot persistence as it pertains to microservices. If you want more information on that, Google <i><a style="color: #A1A1A1;" href="http://lmgtfy.com/?q=Netflix+microservices">'Netflix microservices'</a></i> and the first few articles do a good job of explaining the concept. I try to continue learning tools and tech, so as time goes on, my interests will change.
                 </h6>
                 <hr></hr>
                 <h6 style="text-align: center;">
                   Lastly, I had some experience watching others program with iOS and Android, and I'm continuing to pay attention to the intersection of mobile and cloud computing. This is one area which is very nebulous to me, but I would be interested in discovering more about the 'Internet of Things' ecosystem. I've made a plan to begin experimenting with a Raspberry Pi, but haven't been able to do much with it.
                 </h6>
                 <hr></hr>
                 <h6>
                   <h5 class="well" style="text-align: center;"><strong>Still Interested?</strong> <a class="btn btn-md btn-default" href="/resume/Nathaniel_Buechler-Sr_UX_Engineer.pdf" style="color: white; margin: 10px;">Download my Résumé</a></h5>
                 </h6>
               </div>
             </div>
           </div>
        </div>

    </div><!--/span-->
  </div><!--/row-->
</div><!--/container-->

<div class="row jumbotron mainBKGD">
  <div class="container">
    <div class="col-xs-12">
      <div class="panel panel-default">
        <div class="panel-heading">Role Perspective</div>
        <div class="panel-body">
        	<div id="roleFocus" class="well col-lg-3 col-md-12 col-sm-12" style="text-align: center; height: 420px">
            <div style='margin-top: 80px'><span><img height="150" src="images/default-hex.png" alt="Nathaniel" /><br><h6 class="well">Multifaceted Specialist</h6></div>
          </div>
          <div class="col-lg-9 col-md-12 col-sm-12 content canvasHolderBkgd">
          	<div id="roleChart" style="font: white; text-align: center;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div ng-controller="homeController">
  <div ui-view="artist"></div>
  <div ui-view="social-scientist"></div>
  <div ui-view="computer-programmer"></div>
  <div ui-view="natural-scientist"></div>
  <div ui-view="engineer"></div>
</div>

<div class="row jumbotron mainBKGD">
  <div class="container">
    <div class="col-xs-12">
      <div class="panel panel-default">
        <div class="panel-heading">Skill Perspective</div>
        <div class="panel-body">
          <div id="skillFocus" class="well col-lg-3 col-md-12 col-sm-12" style="text-align: center; height: 460px">
            <div style='margin-top: 80px'><span><img height="150" src="images/default-hex.png" alt="Nathaniel" /><br><h6 class="well">Multifaceted Specialist</h6></div>
          </div>
          <div class="col-lg-9 col-md-12 col-sm-12 content canvasHolderBkgd">
            <div id="navSunBurst" style="font: white; text-align: center;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="row jumbotron mainBKGD">
  <div class="container">
    <div class="col-xs-12">

      <div class="row">
         <div class="col-12 col-sm-12 col-lg-12" style="text-align: center;">
           <div class="panel panel-default">
             <div class="panel-body">
               <h2 style="text-align: center;"><strong>Software Documentation</strong></h2>
               <h6 style="text-align: center;"><i>Project Notes from Nathaniel Buechler</i></h6>
               <hr></hr>
               <div class="well">
                 <div class="row">
                   <h6>Maybe one day, someone else will want to use some of my code, and I want to make it easier for them. Also, I want to make it easier for myself to use as a reference in the distant future.</h6>
                   <h6>Over 25 repositories are show on this site, but some of the projects more documented due to their importance and complexity. My hope is that this documentation makes it easier for you to understand the projects that I have created.</h6>
                 </div>
               </div>
               <hr></hr>
               <h5 class="well" style="text-align: center;">
                 <a href="http://nathanielbuechler.io/" class="btn btn-default">
                   <i class="fa fa-book fa-2x"
                      aria-hidden="true"
                      style="vertical-align: middle;"></i>
                   <span style="display: inline-block; vertical-align: middle;">
                     View the project documentation
                   </span>
                 </a>
               </h5>
             </div>
           </div>
         </div>
      </div>

    </div><!--/span-->
  </div><!--/row-->
</div><!--/container-->


<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1">

      <div class="row">
         <div class="col-12 col-sm-12 col-lg-12" style="text-align: center;">
           <div class="panel panel-default">
             <div class="panel-body">
               <h2 style="text-align: center;"><strong>Recap</strong></h2>
               <h6 style="text-align: center;"><i>Roles of this Multifaceted Specialist</i></h6>
               <hr></hr>
               <div class="well">
                 <div class="row">
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="affective-engineer">Affective Engineer</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="artist">Artist</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="back-end-developer">Back-End Developer</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="biologist">Biologist</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="botanist">Botanist</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="comparative-institutionalist">Comparative Institutionalist</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="computer-programmer">Computer Programmer</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="cultural-anthropologist">Cultural Anthropologist</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="engineer">Engineer</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="front-end-developer">Front-End Developer</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="graphic-designer">Graphic Designer</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="journalist">Journalist</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="linguist">Linguist</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="musician">Musician</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="natural-scientist">Natural Scientist</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="painter">Painter</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="photographer">Photographer</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="political-economist">Political Economist</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="social-activist">Social Activist</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="social-scientist">Social Scientist</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="software-engineer">Software Engineer</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="sound-designer">Sound Designer</a>
                   <a class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="text-align: center; color: white;" ui-sref="world-historian">World Historian</a>
                 </div>
               </div>
               <hr></hr>
               <h5 class="well" style="text-align: center;">
                 <a class="btn btn-default" href="https://github.com/nbuechler"><i class="fa fa-2x fa-github"></i></a>
                 <a class="btn btn-default" href="https://www.linkedin.com/in/nathaniel-buechler-87a29226"><i class="fa fa-2x fa-linkedin-square"></i></a>
                 <a class="btn btn-default" href="mailto:natebuechler@gmail.com?Subject=Hello%20Nathaniel"><i class="fa fa-2x fa-envelope"></i></a>
                 <a class="btn btn-default" href="/resume/Nathaniel_Buechler-Sr_Software_Engineer.pdf"><i class="fa fa-2x fa-file-text"></i></a>
               </h5>
             </div>
           </div>
         </div>
      </div>

    </div><!--/span-->
  </div><!--/row-->
</div><!--/container-->


<!--d3, application JavaScript Files-->
<script type="text/javascript" src="js/d3-charts/roleTimeline.js"></script>
<script type="text/javascript" src="js/d3-charts/skillBurst.js"></script>
