CodePen Embed - Portfolio

<body>

  <!-- START NAVBAR -->
  <div id="wrapper1" class="container-fluid">
    <nav class="navigation">
      <div class="left">
        <div class="logo">JOEL STEPHENSON</div>
        <div class="sublogo">VISUALS</div>
      </div>

      <div class="right">
        <ul>
          <li><a href="#aboutme">ABOUT ME</a></li>
          <li><a href="#portfolio">PORTFOLIO</a></li>
          <li><a href="#footer">CONTACT</a></li>
        </ul>
      </div>
    </nav>

    <!-- END NAVBAR -->

    <!-- START HEADER -->

    <div id="header" class="container-fluid">
      <div id="welcome">
        <h1>WELCOME</h1>
        <h4 style="padding-bottom: 50px">Let's create amazing things together.</h4>
        <a href="#aboutme" class="btn btn-circle">
          <i class="fa fa-angle-double-down"></i>
        </a>
      </div>
    </div>
  </div>
  <!-- END WRAPPER -->

  <!-- START ABOUT ME -->

  <div id="aboutme" class="container-fluid">
    <div class="row" style="padding-top: 50px">
      <div class="col-md-8">
        <h4>ABOUT ME</h4><br>
        <p>I have always been fascinated with people that push themselves, whether it be climbing the highest mountains or running their first ever 10k.</p><br>

        <p>I grew up in the countryside of Northumberland, the outdoors is my natrual home. It's where I feel alive and comfortable.</p><br>

        <p>I believe there are so many things in this world that are yet to be done and so many new stories to be told. My goal in life is to capture those incredible moments and ensure they live on forever. </p>
      </div>
      <div class="col-md-4 text-center">
        <img src="http://joelstephenson.com/images/headshot2.jpg" class="img-round"></img>
      </div>
    </div>
  </div>

  <!-- END ABOUT ME -->

  <!-- START PORTFOLIO -->

  <div id="portfolio" class="container-fluid">
    <h4>PORTFOLIO</h4><br><br>
    <div class="row">
      <div class="col-md-6" style="margin-bottom: 10px">
        <img src="https://s33.postimg.org/ef8wnuddr/pot1.png" class="img-responsive">
      </div>
      <div class="col-md-6" style="margin-bottom: 10px">
        <img src="https://s33.postimg.org/ef8wnuddr/pot1.png" class="img-responsive">
      </div>
    </div>
    <BR>
    <div class="row">
      <div class="col-md-6" style="margin-bottom: 10px">
        <img src="https://s33.postimg.org/ef8wnuddr/pot1.png" class="img-responsive">
      </div>
      <div class="col-md-6" style="margin-bottom: 10px">
        <img src="https://s33.postimg.org/ef8wnuddr/pot1.png" class="img-responsive">
      </div>
    </div>
  </div>

  <!-- END PORTFOLIO -->

  <!-- START FOOTER -->
  <div id="footer" class="container-fluid">
    <a href="https://www.facebook.com/joelstephensonphoto/" target="blank" class="icon-btn facebook-icn"><i class="fa fa-facebook"></i></a>
    <a href="https://twitter.com/Joel_Stephenson" target="blank" class="icon-btn twitter-icn"><i class="fa fa-twitter"></i></a>
    <a href="https://www.instagram.com/joel_stephenson/" target="blank" class="icon-btn instagram-icn"><i class="fa fa-instagram"></i></a>
    <br><br>
    <p>COPYRIGHT © 2016 JOEL STEPHENSON</p>

  </div>

  <!-- END FOOTER -->
</body>

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);

html { 
}

body {
  font-family: Roboto Slab;
  background: black;
  color: white;
  height: 100%;
  width: 100%;
}

/* NAVBAR */
.navigation {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 45px;
  text-align: center;
  padding-top: 0px;
  padding-right: 75px;
  z-index: 1;
  /* SHADOW */
  -webkit-box-shadow: 0px 0px 2px 0px   #000000;
  -moz-box-shadow: 0px 0px 2px 0px       #000000;
  box-shadow: 0px 0px 2px 0px #000000;
  /* TRANSPARENCY */
  background-color: rgba(1, 1, 1,       0.7);
  color: rgba(1, 1, 1, 0.7);
}

.navigation a {
  font-size: 16px;
  padding-top: 8px;
  padding-left: 15px;
  padding-right: 15px;
  color: #FFFFFF;
  text-decoration: none;
}

.navigation ul
{
    margin-top: 12px;
}

.navigation ul li
{
    list-style-type: none;
    display: inline;
}

.navigation li:before {
  content: " | ";
  color: #fff;
}

.navigation li:first-child:before {
content: none;
}

.navigation li a:hover {
  color: #CCCCCC;
  font-weight: 600;
}

/* HEADER DIV */
#header {
  text-align: center;
  
}

#welcome {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#header a {
  font-size: 45px;
  color: #fff;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

#header a:hover {
  font-size: 50px;
}

/* SCROLL DOWN ARROW */
.fa-angle-double-down {
  vertical-align: 8%;
}

/* SECTION 1 WRAPPER */
#wrapper1 {
    font-family: Roboto Slab;
    padding: 0;
    margin: 0;
    color: white;
    position: center;
    background: url('http://joelstephenson.com/images/bg2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    
    
}

/* ABOUT ME WRAPPER */
#aboutme {
  margin-top: 5px;
  margin-bottom: 100px;
  background: black;
  color: white;
  margin-left: 75px;
  margin-right: 75px;
}

/* PORTFOLIO DIV */
#portfolio {
  background: #f5f5f5;
  color: #55606A;
  padding-left: 90px;
  padding-right: 90px;
  padding-top: 50px;
  padding-bottom: 100px;
  margin-top: 0px;
  
}

/* FOOTER DIV */
#footer {
  background: #ffffff;
  color: #55606A;
  padding-top: 50px;
  padding-bottom: 35px;
  text-align: center;
}

h1, h2, h3, h4, h5, h6, {
  font-family: Roboto Slab;
  margin-bottom: 14px
}

h1 {
  font-size: 80px;
  font-family: Oswald;
  letter-spacing: 3px;
  line-height: 80px;
  font-weight: 500;
  word-wrap: break-word;
}

h2 {
  font-size: 32px;
  line-height: 36px;
}

h3 {
  font-size: 26px;
  line-height: 29px;
}

h4 {
  font-size: 20px;
  line-height: 25px;
}

h5 {
  font-size: 16px;
  line-height: 21px;
}

h6 {
  font-size: 15px;
}

.logo {
  color: #ffffff;
  padding-top: 8px;
  padding-left: 75px;
  font-size: 25px;
  line-height: 18px;
}

.logo a {
  color: #ffffff;
  padding-left: 75px;
  font-size: 25px;
  line-height: 18px;
}

.sublogo {
  color: #ffffff;
  padding-left: 75px;
  font-size: 11px;
  font-weight: 100;
  text-align: left;
  letter-spacing: 5px;
}

.left {
  float: left;
}

.right {
  float: right;
}

/* SCROLL DOWN BUTTON */
.btn-circle {
  width: 70px;
  height: 70px;
  border: 2px solid #fff;
  border-radius: 100%;
}

.btn-circle:hover {
  background: rgba(255,255,255,0.1);
}

/* HEADSHOT */
.img-round {
  border-radius: 100%;
  height: 250px;
  width: 250px;
}

/* SOCIAL ICONS */
.icon-btn {
  text-align: center;
  font-size: 30px;
  letter-spacing: 30px;
  text-indent: 30px;
}

a {
  color: #55606A;
}

a:hover {
  color: black;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.twitter-icn:hover {
  color: #48c4d2;
}

.facebook-icn:hover {
  color: #3b5998;
}

.instagram-icn:hover {
  color: #fb913f;
}

@media screen and (max-width: 768px) {
    h1{
        font-size:30px;
    }
}

$(document).ready(function(){
  $('a[href^="#"]').on('click',function (e) {
      e.preventDefault();

      var target = this.hash;
      var $target = $(target);

      $('html, body').stop().animate({
          'scrollTop': $target.offset().top
      }, 900, 'swing', function () {
          window.location.hash = target;
      });
  });
});

This Pen is owned by Joel on CodePen.

See more by @fooby on CodePen

External CSS

External JavaScript

https://code.jquery.com/jquery-2.2.4.min.js