FreeCodeCamp Codepen portfolio page

index.html

<nav class="navbar navbar-inverse navbar-fixed-top">
  <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="#">Odysseas Samaras</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right" role="navlist">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>
<div id="home" class="cd-fixed-bg">
  <div class="container">
    <h1 class="text-center">Odysseas Samaras</h1>
    <h4 class="text-center">Web Development Portfolio</h4>
    <p class="text-center">
      <a class="btn btn-primary" href="https://github.com/odysseas" role="button" target="_blank"><i class="fa fa-github fa-lg"></i> Github</a>
      <a class="btn btn-primary" href="https://www.linkedin.com/in/odysseassamaras" role="button" target="_blank"><i class="fa fa-linkedin fa-lg"></i> LinkedIn</a>
      <a class="btn btn-primary" href="https://twitter.com/odysam" role="button" target="_blank"><i class="fa fa-twitter fa-lg"></i> Twitter</a>
      <a class="btn btn-primary" href="http://www.freecodecamp.com/odysseas" role="button" target="_blank"><i class="fa fa-fire fa-lg"></i> FreeCodeCamp</a>
  </div>
</div>
<div id="about" class="cd-fixed-bg">
  <div class="container">
    <div class="media">
      <div class="media-body">
        <h1 class="media-heading">Brief Introduction</h1>
        <p>I'm an Information Technologies and Telecommunications graduate, and aspiring web developer, based in Greece.</p>
        <p>I'm currently trying to build my portfolio, in order to help my job-hunting.</p>
        <p>My passion is to use technology based solutions, to help solve real world challenges.</p>
        <h3>Competences</h3>
        <h4>Languages and Frameworks</h4>
        <p>Javascript, HTML5, CSS3, jQuery, Bootstrap3, Angular.js, Meteor.js.</p>
        <h4>Tools & expertise</h4>
        </p>Git, Responsive Web Design, Agile Methodologies.</p>
      </div>
      <div class="media-left media-middle">
        <img class="media-object img-circle" src="http://i.imgur.com/N8aozW1.jpg?1" alt="avatar">
      </div>
    </div>
  </div>
</div>
<div id="portfolio" class="cd-fixed-bg">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <h1>Portfolio</h1>
        <h4>Below you will find some of my recent work</h4>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-md-4 thumb"><a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/250x250"></a></div>
      <div class="col-md-4 thumb"><a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/250x250"></a></div>
      <div class="col-md-4 thumb"><a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/250x250"></a></div>
      <div class="col-md-4 thumb"><a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/250x250"></a></div>
      <div class="col-md-4 thumb"><a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/250x250"></a></div>
      <div class="col-md-4 thumb"><a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/250x250"></a></div>
    </div>
  </div>
</div>
<div id="contact" class="cd-fixed-bg">
  <div class="container">
    <div class="row">
      <div class="col-md-12"><h1>Contact me</h1></div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <h3>odysseas.samaras@gmail.com</h3>
      </div>
      <div class="col-md-3 col-md-offset-4">
        <a class="btn btn-primary btn-lg btn-block" href="https://github.com/odysseas" role="button" target="_blank"><i class="fa fa-github fa-lg"></i> Github</a>
        <a class="btn btn-primary btn-lg btn-block" href="https://www.linkedin.com/in/odysseassamaras" role="button" target="_blank"><i class="fa fa-linkedin fa-lg"></i> LinkedIn</a>
        <a class="btn btn-primary btn-lg btn-block" href="https://twitter.com/odysam" role="button" target="_blank"><i class="fa fa-twitter fa-lg"></i> Twitter</a>
        <a class="btn btn-primary btn-lg btn-block" href="http://www.freecodecamp.com/odysseas" role="button" target="_blank"><i class="fa fa-fire fa-lg"></i> FreeCodeCamp</a>
      </div>
    </div>
  </div>
</div>
<footer>
  <div class="container" class="cd-fixed-bg">
    <div class="row">
      <div class="col-md-6">
    <ul class="nav nav-pills" role="navlist">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
      </div>
      <div class="col-md-4 col-md-offset-2">
        <h5>2015 Odysseas Samaras - All rights reserved.</h5>
      </div>
    </div>
  </div>
</footer>

Portfolio.markdown

Portfolio

A Pen by Odysseas Samaras on CodePen.

License.

script.js

$(document).ready(function() {
  $('body').scrollspy({ target: '#navbar' })
});

scripts

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

style.css

html, body {
  height: 100%;
}

body {
  position: relative;
  text-shadow: 0px 1px 0px rgba(255,255,255,.5);
}

#home {
  background-image: url('http://i.imgur.com/GPPMfm4.jpg');
  padding-top: 350px;
}

#about {
  background-image: url('http://i.imgur.com/BqRWtqB.jpg');
  padding-top: 200px;
}

#portfolio{
  background-image: url('http://i.imgur.com/JMQYQpL.jpg');
  padding-top: 100px;
}

#contact {
  background-image: url('http://i.imgur.com/HlqugVu.jpg');
  padding-top: 100px;
}

.thumb {
  margin-bottom: 30px;
}

footer {
  color: #9d9d9d;
  background-color: #222;
}

footer a {
  color: #9d9d9d;
}

footer .nav-pills>li>a{
  border-radius: 0px;
}

footer .nav>li>a:hover {
  background-color: black;
  color: white;
}

.cd-fixed-bg {
	min-height: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
}

.btn, .nav, .navbar, footer {
  text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}

.media-left {
  padding-left: 30px;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />