Zipline Personal Portfolio

index.html

<!--Navbar-->
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brian Puschell</a>
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#home">Home</a></li>
      <li class="active"><a href="#about">About</a></li>
      <li class="active"><a href="#portfolio">Portfolio</a></li>
      <li class="active"><a href="#contact">Contact</a></li>
  </div>
</div>
<!--Home section-->
<section id="home" data-type="background" data-speed="10">
  <div class="container-fluid">
    <div class="page-header">
      <h1> Brian Puschell <br>
      <small>Ecole 42 Student</small></h1>
    </div>
    <div class="row">
      <div class="col-md-4">
        <a class="btn btn-default btn-block" href="https://github.com/lordmalvern"><i class="fa fa-github"></i> GitHub</a>
      </div>
      <div class="col-md-4">
        <a class="btn btn-default btn-block" href="https://www.linkedin.com/in/brianpuschell"><i class="fa fa-linkedin"></i> LinkedIn</a>
      </div>
      <div class="col-md-4">
        <a class="btn btn-default btn-block" href="http://codepen.io/lordmalvern/"><i class="fa fa-codepen"></i> CodePen</a>
      </div>
    </div>
  </div>
</section>
<!--About Me section-->
<section id="about" data-type="background" data-speed="10">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6"><img src="http://lordmalvern.github.io/img/myface.png" class="img-circle"></div>
      <div class="col-md-4">
        <h1>About Me</h1>
        <p> I'm a computer science student with working experience in IT and the video game industry who is getting into web development. </p>
      </div>
    </div>
  </div>
</section>
<!--Portfolio section-->
<section id="portfolio" data-type="background" data-speed="10">
  <div class="container-fluid">
    <h1 class="text-center"> My Website Portfolio</h1>
    <br>
    <div class="row">
      <a href="#">
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="http://lorempixel.com/242/200/cats">
            <div class="caption">
              <h3 class="text-center">Lorem ipsum<br><small>Description here</small></h3>
            </div>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="http://lorempixel.com/242/200/city">
            <div class="caption">
              <h3 class="text-center">Lorem ipsum<br><small>Description here</small></h3>
            </div>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="http://lorempixel.com/242/200/business">
            <div class="caption">
              <h3 class="text-center">Lorem ipsum<br><small>Description here</small></h3>
            </div>
          </div>
        </div>
      </a>
    </div>
    <div class="row">
      <a href="#">
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="http://lorempixel.com/242/200/sports">
            <div class="caption">
              <h3 class="text-center">Lorem ipsum<br><small>Description here</small></h3>
            </div>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="http://lorempixel.com/242/200/transport">
            <div class="caption">
              <h3 class="text-center">Lorem ipsum<br><small>Description here</small></h3>
            </div>
          </div>
        </div>
      </a>
      <a href="#">
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="http://lorempixel.com/242/200/food">
            <div class="caption">
              <h3 class="text-center">Lorem ipsum<br><small>Description here</small></h3>
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
</section>
<section id="contact" data-type="background" data-speed="10">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-8">
        <h3>Connect with me:
        bbpuschell@gmail.com</h3>
      </div>
      <div class="col-md-4">
        <a class="btn btn-default btn-block" href="https://github.com/lordmalvern"><i class="fa fa-github"></i> GitHub</a>
        <a class="btn btn-default btn-block" href="https://www.linkedin.com/in/brianpuschell"><i class="fa fa-linkedin"></i> LinkedIn</a>
        <a class="btn btn-default btn-block" href="http://codepen.io/lordmalvern/"><i class="fa fa-codepen"></i> CodePen</a>

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

script.js

$(document).ready(function(){
  $('section[data-type="background"]').each(function(){
    var $bg = $(this);
    $(window).scroll(function(){
      var yPos = -($(window).scrollTop() / $bg.data('speed'));
      var coords = "50% " + yPos + "px";
      $bg.css({ backgroundPosition: coords });
    });
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

/* Background patterns from subtlepatterns.com */
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
.navbar-brand {
  font-weight: 400;
}
.navbar {
  background: rgba(50,50,50,.5)
}

.page-header {
  text-align: center;
  color: white;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
}
body { 
  padding-top: 0px;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
}
#home {
  background: url("http://lordmalvern.github.io/img/footer_lodyas.png") 50% 0 fixed;
  padding: 100px;
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
  position: relative;
}
#about {
  background: url("http://lordmalvern.github.io/img/dark_embroidery.png") 50% 0 fixed;
  padding: 100px;
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
  position: relative;
  color: white;
  font-size: 24px;
}

#portfolio {
  background: url("http://lordmalvern.github.io/img/grey_wash_wall_@2X.png") 50% 0 fixed;
  padding: 100px;
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
  position: relative;
}
#contact {
    background: url("http://lordmalvern.github.io/img/pw_maze_black_@2X.png") 50% 0 fixed;
  padding: 100px;
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
  position: relative;
  color: white;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

zipline-personal-portfolio.markdown

Zipline Personal Portfolio

Reverse engineered personal portfolio for FreeCodeCamp

A Pen by Brian Puschell on CodePen.

License.