<head>

  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Lato:100,300italic,400,700,900' rel='stylesheet' type='text/css'>

 


  <title>Bruce Young - Personal Portfolio</title>
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="50">

  <nav id="nav-bar" class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
                    <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 animated flip" href="#twoam">2am ninja</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>

      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>


  <header id="twoam">
    <div class="container-fluid">
      <div class="row me animated fadeIn">
        <div class="col-xs-offset-5 col-sm-offset-6 col-xs-7 col-sm-6">
          <div class="tagline1">the portfolio of</div>
          <div class="tagline2 animated fadeIn">BRUCE</div>
          <div class="tagline2 animated fadeIn">YOUNG</div>
          <div class="animated fadeIn">
            <div class="tagline3a">{</div>
            <div class="tagline3b">designer :
              <br> coder :
              <br> biologist :
              <br> astronomer :
              <br> educator :
              <br>
            </div>
            <div class="tagline3c">}</div>
          </div>
        </div>
      </div>
      <div id="down" class="animated infinite slideInDown">
        <i class="fa fa-chevron-circle-down fa-5x" aria-hidden="true"></i>
      </div>
    </div>
  </header>


  <!-- about page -->
  <section id="about" class="container-fluid">

    <div class="row section-banner">
      <div class="col-md-offset-3 col-md-6 text-center">
        <div>
          <span class="line about"></span>
          <span class="section-title about">about</span>
          <span class="line about"></span>
        </div>
      </div>
    </div>


    <div class="row max">

      <div class="col-sm-4 text-center">
        <div class="desc">
          <div class="icon-me"><i class="fa fa-user"></i></div>
          <p>A full stack developer with an eye for design, UX and UI development and a strong desire to learn and create. I have had a long career in the areas of educational software, multimedia production and web development.</p>
        </div>
      </div>

      <div class="col-sm-4 text-center">
        <div class="desc">
          <div class="icon-me"><i class="fa fa-mortar-board"></i></div>
          <p>I firmly believe in life long learning and I'm constantly exploring new ideas and technologies. MOOC's have enabled me to update my skills and keep abreast of the latest trends in design and coding.</p>
        </div>
      </div>

      <div class="col-sm-4 text-center">
        <div class="desc">
          <div class="icon-me"><i class="fa fa-rocket"></i></div>
          <p>My interests are wide with formal qualifications in Biology, Astronomy and Education. I have designed and/or written software for a large international diagnosics company, schools and universities.</p>
        </div>
      </div>

    </div>


  </section>


  <!-- portfolio projects page -->
  <section id="portfolio" class="container-fluid">

    <div class="row section-banner">
      <div class="col-md-offset-3 col-md-6 text-center">
        <div>
          <span class="line portfolio"></span>
          <span class="section-title portfolio">portfolio</span>
          <span class="line portfolio"></span>
        </div>
      </div>
    </div>


    <div class="row max">
      <div class="col-sm-offset-2 col-sm-8 text-center">
        <div class="desc">
          <p>These items are mainly exercises done whilst undertaking a full stack development course with Free Code Camp. The details are on the back of the cards with links to my CodePen and live sites.</p>
        </div>
      </div>
    </div>


    <!-- portfoloio projects cards -->

    <div class="row" id="theProjects">

    </div>
  </section>


  <!-- contact page -->
  <section id="contact" class="container-fluid">

    <div class="row section-banner">
      <div class="col-md-offset-3 col-md-6 text-center">
        <div>
          <span class="line contact"></span>
          <span class="section-title contact">contact</span>
          <span class="line contact"></span>
        </div>
      </div>
    </div>


    <div class="row max">

      <!-- email contact -->
      <div class="col-sm-4 text-center">
        <div class="desc">
          <div class="icon-contact">
            <a data-toggle="tooltip" title="Email" data-placement="top" href="mailto:2am.ninja@outlook.com">
              <i class="fa fa-envelope"></i>
            </a>
          </div>
        </div>
      </div>

      <!-- facebook contact -->
      <div class="col-sm-4 text-center">
        <div class="desc">
          <div class="icon-contact">
            <a data-toggle="tooltip" title="Facebook" data-placement="top" href="https://www.facebook.com/bruce.young.7505" target="_blank">
              <i class="fa fa-facebook-square"></i>
            </a>
          </div>
        </div>
      </div>

      <!-- Twitter contact -->
      <div class="col-sm-4 text-center">
        <div class="desc">
          <div class="icon-contact">
            <a data-toggle="tooltip" title="Twitter" data-placement="top" href="https://twitter.com/mutantspore" target="_blank">
              <i class="fa fa-twitter-square"></i>
            </a>
          </div>
        </div>
      </div>

    </div>

  </section>


    <!-- fixed footer for social links -->
    <footer id='social-footer'>


        <ul>

            <li class='highlight'>
                <a class="fa-stack fa-1x" data-toggle="tooltip" title="Email" data-placement="top" href="mailto:2am.ninja@outlook.com">
                    <i class="fa fa-square fa-stack-2x"></i>
                    <i class="fa fa-envelope fa-stack-1x blacktext"></i>
                </a>
            </li>

            <li class='highlight'>
                <a class="fa-stack fa-1x" data-toggle="tooltip" title="FreeCodeCamp" data-placement="top" href="https://www.freecodecamp.com/mutantspore" target="_blank">
                    <i class="fa fa-square fa-stack-2x"></i>
                    <i class="fa fa-fire fa-stack-1x blacktext"></i>
                </a>
            </li>

            <li class='highlight'>
                <a class="fa-stack fa-1x" data-toggle="tooltip" title="Linkedin" data-placement="top" href="https://www.linkedin.com/in/brucewilliamyoung" target="_blank"><i class="fa fa-linkedin-square fa-stack-2x"></i></a>
            </li>

            <li class='highlight'>
                <a class="fa-stack fa-1x" data-toggle="tooltip" title="Twitter" data-placement="top" href="https://twitter.com/mutantspore" target="_blank"><i class="fa fa-twitter-square fa-stack-2x"></i></a>
            </li>

            <li class='highlight'>
                <a class="fa-stack fa-1x" data-toggle="tooltip" title="GitHub" data-placement="top" href="https://github.com/mutantspore" target="_blank"><i class="fa fa-github-square fa-stack-2x"></i></a>
            </li>

            <li class='highlight'>
                <a class="fa-stack fa-1x" data-toggle="tooltip" title="CodePen" data-placement="top" href="https://codepen.io/MutantSpore/" target="_blank">
                    <i class="fa fa-square fa-stack-2x"></i>
                    <i class="fa fa-codepen fa-stack-1x blacktext"></i>
                </a>
            </li>

            <li class='highlight'>
                <a class="fa-stack fa-1x" data-toggle="tooltip" title="Facebook" data-placement="top" href="https://www.facebook.com/bruce.young.7505" target="_blank"><i class="fa fa-facebook-square fa-stack-2x"></i></a>
            </li>

            <li class='highlight'>
                <a class="fa-stack fa-1x" data-toggle="tooltip" title="Google+" data-placement="top" href="https://plus.google.com/102948303758999079100/posts/p/pub?hl=en" target="_blank"><i class="fa fa-google-plus-square fa-stack-2x"></i></a>
            </li>

        </ul>



        <div class="text-center copyright">
        </div>


    </footer>
body {
  padding-top: 50px;
  padding-bottom: 00px;
  background-color: #f6f6f6;
}

.full {
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  background-color: rgb(28, 28, 28);
}

.navbar {
  z-index: 9999;
  background-color: black;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.7);
}

.btn-circle {
  width: 50px;
  height: 50px;
  text-align: center;
  padding: 0;
  font-size: 24px;
  line-height: 48px;
  border-radius: 50%;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}

.btn-lnk {
  position: absolute;
  bottom: 15px;
}

.btn-lnk0 {
  left: 30px;
}

.btn-lnk1 {
  right: 30px;
}


#twoam {
  width: 100vw;
  height: 100vh;
  background-image: url("http://2am.ninja/img/bruce_contact3.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: rgb(28, 28, 28);
  color: white;
}

#nav-bar ul li:hover::after {
  width: 100%;
}

#nav-bar ul li::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: #607D8B;
  width: 0;
  transition: width 0.2s;
}

.max {
  max-width: 1300px;
  margin: auto;
  padding-bottom: 15px;
}

.desc {
  font-family: 'Roboto', sans-serif;
  font-size: 1.3em;
  line-height: 1.7em;
  letter-spacing: 0.03em;
  margin-left: 10px;
  margin-right: 10px;
}

#about {
  width: 100vw;
  background-color: rgb(255, 255, 255);
  padding-top: 20px;
  padding-bottom: 50px;
}

#about .desc {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.87);
}

.icon-me {
  text-align: center;
  font-size: 5em;
  color: rgba(200, 100, 100, 0.7);
  padding-top: 20px;
  padding-bottom: 25px;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.30);
}

.icon-contact {
  text-align: center;
  font-size: 7.5em;
  color: rgba(152, 110, 110, 0.4);
  padding-top: 10px;
  padding-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
}

.icon-contact a {
  color: rgba(152, 110, 110, 0.4) !important;
}

#portfolio {
  background-color: #f6f6f6;
  width: 100vw;
  max-width: 1000px;
  padding-top: 20px;
  padding-bottom: 50px;
}

#portfolio .desc {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}

#contact {
  width: 100vw;
  height: 100vh;
  background-image: url(http://2am.ninja/img/stars.jpg);
  background-color: black;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  padding-top: 20px;
}

.tagline1 {
  font-family: 'lato', sans-serif;
  font-size: 2em;
  font-weight: 300;
  font-style: italic;
  color: #bbb;
  text-align: left;
  padding-top: 70px;
  text-shadow: 1px 1px black;
}

.tagline2 {
  font-family: 'lato', sans-serif;
  font-size: 7em;
  letter-spacing: 7px;
  line-height: 0.95em;
  font-weight: 100;
  color: white;
  text-align: left;
  text-shadow: 1px 1px black;
  padding-top: 10px;
}

.tagline3a, .tagline3b, .tagline3c {
  font-family: 'courier', sans-serif;
  font-size: 1.75em;
  font-style: italic;
  color: #666;
  text-align: left;
  line-height: 1em;
  text-shadow: 1px 1px black;
}

.tagline3a {
  padding-top: 50px;
}

.tagline3b {
  padding-left: 30px;
}

.line {
  height: 3px;
  width: 100px;
  position: relative;
  top: -12px;
  display: inline-block;
  background-color: #999;
}

.line.about {
  background-color: rgba(0, 0, 0, 0.54);
}

.line.portfolio {
  background-color: rgba(0, 0, 0, 0.54);
}

.line.contact {
  background-color: rgba(255, 255, 255, 0.95);
}

.section-title {
  font-family: 'lato', sans-serif;
  font-size: 3.5em;
  font-weight: 900;
  font-style: italic;
  text-align: center;
  padding-top: 0px;
  padding-left: 15px;
  padding-right: 15px;
}

.section-title.about {
  color: rgba(0, 0, 0, 0.54);
  text-shadow: 1px 1px rgba(0, 0, 0, 0.75);
}

.section-title.portfolio {
  color: rgba(0, 0, 0, 0.54);
  text-shadow: 1px 1px rgba(0, 0, 0, 0.75);
}

.section-title.contact {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px rgba(0, 0, 0, 0.99);
}

.section-banner {
  padding-top: 10px;
  padding-bottom: 50px;
}

.project-title {
  font-family: 'Lato', sans-serif;
  font-size: 1.75em;
  font-weight: 500;
  padding-top: 4px;
  padding-bottom: 1px;
  color: #666;
  text-align: center;
}

.project-headings {
  font-family: 'Open Sans', sans-serif;
}

.project-body {
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 1px;
  line-height: 1.5em;
  letter-spacing: 0.03em;
}

.project {
  border-width: thin;
  border-color: #ccc;
}

.intro {
  height: 100vh;
  width: 100%;
}

.content {
  vertical-align: middle;
}

/*section {
  width: 100%;
  margin: 0;
  max-width: none;
  background-color: #000;
  height: 100vh;
}*/

#social-footer {
  width: 100%;
  text-align: center;
  color: white;
  background-color: black;
}

#social-footer ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#social-footer ul li {
  display: inline;
  padding: 0.4em;
}

#social-footer a {
/*  color: #939393 !important; */
  color: white !important;
}

.blacktext {
  color: black;
}

footer {
  width: 100vw;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1% 5%;
  text-align: center;
  background-color: #000;
  opacity: 1;
  z-index: 100;
  a {
    font-weight: 500;
    text-decoration: none;
  }
}


a.fa {
  text-decoration: none
}

a:link {
  text-decoration: none !important;
  outline: 0;
}

.fa-stack {
  margin: -2px;
}

.copyright {
  padding-bottom: 0px;
  padding-top: 5px;
  color: #555;
}

#down {
  position: absolute;
  opacity: 0.20;
  left: 50%;
  bottom: 10%;
  cursor: pointer;
}

.card {
  position: relative;
  width: 300px;
  height: 365px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  perspective: 2000px;
  cursor: pointer;
}

.card img {
  width: calc(300px - 0px);
  height: calc(365px - 45px);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-style: solid;
  border-color: rgba(0,0,0,0.16);
  border-bottom-width: 1px;
}

.card_front, .card_back {
  position: absolute;
  left: 0px;
  top: 0px;
  width: inherit;
  height: inherit;
  border-style: solid;
  border-width: 0px;
  border-radius: 6px;
  border-color: #666;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.9s ease-in-out;
  transition: transform 0.9s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}


.card_front:hover, .card_back:hover {
  left: -4px;
  top: -4px;
  box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.5);
}

.card_front {
  background-color: white;
}

.card_back {
  background-color: #fafffc;
  -webkit-transform: rotateY(179deg);
  -ms-transform: rotateY(179deg);
  transform: rotateY(179deg);
}

.card.effect_click.flipped .card_front {

  -webkit-transform: rotateY(-179deg);
  -ms-transform: rotateY(-179deg);
  transform: rotateY(-179deg);
}

.card.effect_click.flipped .card_back {

  -webkit-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.highlight {
  opacity: 0.6;
}

.highlight:hover {
  opacity: 1;
}



@media only screen and (max-width: 768px) {
  #contact {
    background-attachment: scroll;
  }

  #twoam {
    background-attachment: scroll;
  }

  .tagline1 {
    font-size: 1.2em;
  }

  .tagline2 {
    font-size: 2.8em;
  }

  .tagline3a, .tagline3b, .tagline3c {
    font-size: 1em;
  }

  .section-title {
    font-size: 2.6em;
  }

  .line {
    height: 2px;
    width: 70px;
    position: relative;
    top: -10px;
    display: inline-block;
    background-color: #666;
  }

  .icon-me {
    font-size: 7.5empx;
    padding-top: 10px;
    padding-bottom: 15px;
  }

  .icon-contact {
    font-size: 4.5em;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}




$(document).ready(function() {

  // import view port library function
  jQuery.extend(verge);

  // smooth scrolling of viewport to target
  $('a[href^="#"]').click(function(event) {
    event.preventDefault();
    $('html,body').animate({
      scrollTop: $(this.hash).offset().top - 50
    }, 900);
  });

  $('#down').click(function() {
    $('html,body').animate({
      scrollTop: $('#about').offset().top - 50
    }, 900);
  });

  var currentTime = new Date();
  var year = currentTime.getFullYear();

  // data for the portfolio cards front and back
  var projectData = [{
      title: 'Quotes',
      text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/zipline-build-a-random-quote-machine" target="_blank"><i>Build a Random Quote Machine</i></a>. The user is able to show a new random quote and send that quote to Twitter. <strong>Quotes</strong> was designed and optimized to be a mobile web app first.</p> <strong>Code:</strong> HTML5, CSS3, Javascript, jQuery<br> <strong>Layout:</strong> Bootstrap<br> <strong>Graphics Editor:</strong> Gimp, pixlr.com<br> <strong>Images:</strong> lorempixel.com<br> <strong>Fonts:</strong> Font-awesome<br> <strong>Data:</strong> random famous quotes API',

      image: ['http://2am.ninja/img/quotes.jpg'],
      site: [
        ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/full/dojjre'],
        ['Live Site', 'fa-link', 'http://2am.ninja/quotes/']
      ]
    }, {
      title: 'Twitch TV',
      text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/zipline-use-the-twitchtv-json-api" target="_blank"><i>Use the Twitchtv JSON API</i></a>. A user can see if Free Code Camp is currently streaming on Twitch.tv.</p> <strong>Code:</strong> HTML5, CSS3, Javascript, jQuery<br> <strong>Layout:</strong> Bootstrap<br> <strong>Fonts:</strong> Ubuntu Mono<br> <strong>Data:</strong> Twitchtv API',

      image: ['http://2am.ninja/img/twitch3.jpg'],
      site: [
        ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/full/jrEBgq']
  //      ,['Live Site', 'fa-link', 'http://2am.ninja/twitch/']
      ]
    }, {
      title: 'Wiki Search',
      text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/zipline-build-a-wikipedia-viewer" target="_blank"><i>Build a Wikipedia Viewer</i></a>. A user can search Wikipedia entries in a search box and see the resulting Wikipedia entries.</p> <strong>Code:</strong> HTML5, CSS3, Javascript, jQuery<br> <strong>Layout:</strong> Bootstrap<br> <strong>Graphics Editor:</strong> pixlr.com<br> <strong>Images:</strong> unsplash.com<br> <strong>Data:</strong> Wikipedia API',

      image: ['http://2am.ninja/img/wiki.jpg'],
      site: [
        ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/full/rVRwor']
      ]
    }, {
      title: 'Pomodoro Timer',
      text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/zipline-build-a-pomodoro-clock" target="_blank"><i>Build a Pomodoro Clock</i></a>. A user can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed. <strong>Pomodoro Timer</strong> was designed and optimized to be a mobile web app first.</p> <strong>Code:</strong> HTML5, HTML5 Canvas, CSS3, Javascript, jQuery, ion.sound<br> <strong>Layout:</strong> Bootstrap, HTML5 Canvas<br> <strong>Fonts:</strong> IcoMoon',

      image: ['http://2am.ninja/img/timer.jpg'],
      site: [
        ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/full/WvVZyM'],
        ['Live Site', 'fa-link', 'http://2am.ninja/timer/']
      ]
    }, {
      title: 'Local Weather',
      text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/zipline-show-the-local-weather" target="_blank"><i>Show the Local Weather</i></a>. A user can see the weather in my current location.. <strong>Local Weather</strong> was designed and optimized to be a mobile web app first.</p> <strong>Code:</strong> HTML5, CSS3, Javascript, jQuery<br> <strong>Layout:</strong> Bootstrap<br> <strong>Images:</strong> flickr.com<br> <strong>Fonts:</strong> Climacons, Open Sans<br> <strong>Data:</strong> Open Weather Map API, IP-API.com Geolocation API',

      image: ['http://2am.ninja/img/weather.jpg'],
      site: [
        ['CodePen', 'fa-codepen', 'https://codepen.io/MutantSpore/full/oXaoxb/']
      ]
    },
    /*                    
                        {
         title: 'Camper News',
         text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/zipline-stylize-stories-on-camper-news" target="_blank"><i>Stylize Stories on Camper News</i></a>. The user can browse recent posts from Camper News.</p> <strong>Code:</strong> HTML5, CSS3, Javascript, jQuery<br> <strong>Layout:</strong> Bootstrap, Masonary<br> <strong>Graphics Editor:</strong> Gimp, pixlr.com<br> <strong>Images:</strong> unsplash.com<br>  <strong>Data:</strong> Free Code Camp news API',

         image: ['http://2am.ninja/img/news.jpg'],
         site: [
           ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/debug/vOvBqY']
         ]
       }, 
     */
    {
      title: 'Bar Graph',
      text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/visualize-data-with-a-bar-chart" target="_blank"><i>Visualize Data with a Bar Chart </i></a>. The user can see US Gross Domestic Product by quarter, over time, with a mouse over tooltip.</p> <strong>Code:</strong> HTML5, CSS3, D3, SVG, Javascript, jQuery<br> <strong>Layout:</strong> Bootstrap',

      image: ['http://2am.ninja/img/bar-graph.jpg'],
      site: [
        ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/full/PNJMpg']
      ]
    }, {
      title: 'Heat Map',
      text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/visualize-data-with-a-heat-map" target="_blank"><i>Visualize Data with a Heat Map</i></a>. The user can view a heat map with data represented both on the Y and X axis, with mouse over tooltip.</p> <strong>Code:</strong> HTML5, CSS3, D3, SVG, Javascript, jQuery<br> <strong>Layout:</strong> Bootstrap',

      image: ['http://2am.ninja/img/heat-map.jpg'],
      site: [
        ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/full/VeKNEa']
      ]
    },
    /*                 
                     {
      title: 'Force Graph',
      text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/show-relationships-with-a-force-directed-graph" target="_blank"><i>Show Relationships with a Force Directed Graph</i></a>. The user can see a Force-directed Graph that shows which campers are posting links on Camper News to which domains.</p> <strong>Code:</strong> HTML5, CSS3, D3, SVG, Javascript, jQuery<br> <strong>Layout:</strong> Bootstrap<br>  <strong>Data:</strong> Free Code Camp news API',

      image: ['http://2am.ninja/img/force-graph.jpg'],
      site: [
        ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/debug/KVdbMO']
      ]
    }, 
    
    */
    {
      title: 'Tic-Tac-Toe',
      text: '<p>A FreeCodeCamp project, <a href="https://www.freecodecamp.com/challenges/build-a-tic-tac-toe-game" target="_blank"><i>Build a Tic Tac Toe Game</i></a>. The user can play a game of Tic Tac Toe with the computer.</p> <strong>Code:</strong> HTML5, CSS3, Javascript, jQuery<br> <strong>Layout:</strong> Materialize.css',

      image: ['http://2am.ninja/img/ttt.jpg'],
      site: [
        ['CodePen', 'fa-codepen', 'https://s.codepen.io/MutantSpore/full/jWWYLo']
      ]
    }
  ];

  // add listener to all the cards for click flipping
  function addListener() {
    var cards = document.querySelectorAll(".card.effect_click");

    for (var i = 0; i < cards.length; i++) {
      clickListener(cards[i]);
    }

    function clickListener(card) {
      card.addEventListener("click", function() {
        this.classList.toggle("flipped");
      });
    }
  }

  // create, populate and show portfolio project cards
  function showProjectCards() {
    var html = '';

    projectData.forEach(function(project) {
      html += '<div class="col-sm-6 col-md-4">';
      html += '<div class="card effect_click"><div class="card_front">';
      html += '<figure><img class="img-responsive" src="' + project.image[0] + '">';
      html += '<figcaption class="project-title">';
      html += project.title;
      html += '</figcaption></figure></div>';

      html += '<div class="card_back"><figure>';
      html += '<div class="project-title">' + project.title + '</div>';
      html += '<figcaption">';
      html += '<div class="project-body">' + project.text + '</div>';
      html += '<div><a data-toggle="tooltip" title="' + project.site[0][0] + '" data-placement="top" href="' + project.site[0][2] + '" target="_blank" class="btn btn-primary btn-lg btn-circle btn-lnk btn-lnk0"><i class="fa ' + project.site[0][1] + '" aria-hidden="true"></i></a>';

      if (typeof project.site[1] !== 'undefined') {
        html += '<a data-toggle="tooltip" title="' + project.site[1][0] + '" data-placement="top" href="' + project.site[1][2] + '" target="_blank" class="btn btn-primary btn-lg btn-circle btn-lnk btn-lnk1"><i class="fa ' + project.site[1][1] + '" aria-hidden="true"></i></a>';
      }

      html += '</div></figcaption></figure></div>';
      html += '</div>';
      html += '</div>';
    });

    $('#theProjects').append(html);
    addListener();
  }

  showProjectCards();
  $(".copyright").append("<span>© " + year + " Bruce Young. All rights reserved</span>");

  // turn on bootstrap tooltips
  $('[data-toggle="tooltip"]').tooltip();

  
});

External CSS

  1. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css
  3. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://codepen.io/MutantSpore/pen/WMQWVB.js
  3. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js