ojvEJN

index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container-fluid">
  <nav class="navbar navbar-inverse navbar-fixed-top">

    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Simon Danner</a>
      </div>
      <div id="navbar">
        <ul class="nav navbar-nav navbar-right">

          <li class="active"><a href="#">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 class="fullscreen section-header">
    About me
  </div>

  <div class="section fullscreen background parallax" style="background-image:url('http://i.imgur.com/UsVp4Mg.jpg');" data-img-width="1600" data-img-height="1064" data-diff="100">
    <div class="row">
      <div class="col-xs-6">
        <div id="about">
          <p>I am a software developer from Germany, currently living in Karlsruhe. I studied applied Computer Science at Hochschule Offenburg. The pictures in the background have been taken by me and show the lakeshore of Lake Malawi.
          </p>

          <p> At my work i am currently working with modern web technology to bring existing products into the modern world.
          </p>

          <p> During my studies i learned to program in Java and C++ in depth and have played around with a lot of webtechnology over the times.
          </p>
          <p>But since my main focus in the last few years was more on desktop applications, i am now trying freecodecamp to learn about the web.
          </p>

          <p> I have worked with the following technologies:</p>
          <ul>
            <li>Java</li>
            <li>C++</li>
            <li>C</li>
            <li>Qt</li>
            <li>Teamcenter</li>
            <li>NX</li>
          </ul>
          <p>
            and i am currently working on getting to know:
            <ul>
              <li>CSS</li>
              <li>JavaScript</li>
              <li>HTML5</li>
            </ul>
          </p>
        </div>
      </div>
      <div class="col-xs-6" id="about-pic">
        <img id="profile-pic" src="http://i.imgur.com/bkezvH7.jpg">
      </div>


    </div>
  </div>

  <div class="fullscreen section-header">
    Portfolio
  </div>


  <div class="fullscreen background parallax" style="background-image:url('http://i.imgur.com/Tm0EmkG.jpg');" data-img-width="1600" data-img-height="1064" data-diff="100" data-oriz-pos="100%">
    <div class="row">
      <div class="col-xs-4" id="portfolio">
        <div class="showcase">
          <img src="http://placehold.it/400x500"></img>
          <div class="description">
            <h2>Placeholder </h2> Placeholder for another project
          </div>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="showcase">
          <img src="http://placehold.it/400x500"></img>
          <div class="description">
            <h2>H2O Autonomous Driving</h2> Software for autonomous driving
          </div>
        </div>

      </div>


      <div class="col-xs-4">
        <div class="showcase">
          <img src="http://4.bp.blogspot.com/-uD33bXc0R7E/Tre3d-5wbWI/AAAAAAAAAW4/i7VhHuKda24/s1600/Atari.png"></img>
          <div class="description">
            <h2><a href="https://github.com/danners/android_atari_controller">Android Atari</a> </h2> An Android app to connect an Android Devices as controller to an Atari 2600
          </div>
        </div>

      </div>
    </div>


  </div>
</div>

<div class="fullscreen section-header">
  Contact me via email:</div>


<div class="fullscreen background parallax" style="background-image:url('http://i.imgur.com/Ajkf7Do.jpg');" data-img-width="1600" data-img-height="500" data-diff="10">
  <div class="row contact im-centered">
    <div id="contact">
    <div class="col-xs-12">
      <button class="btn btn-default mail"><i class="fa fa-envelope"></i>
<a href="mailto:[email protected]">[email protected]</a>
      </button>
      <button class="btn btn-default github" type="submit"><i class="fa fa-github"></i>
<a href="https://github.com/danners">Github</a></button>
        
    </div>
      <div class="col-xs-12">
      <button class="btn btn-default mail"><i class="fa fa-globe"></i>
<a href="http://sidanner.de">sidanner.de</a>
      </button>
      
        
    </div>
    
    </div>
  </div>
</div>

</div>


<div class="row">
  <div class"col-xs-12">
  <footer>
    <ul class="nav  nav-justified">

          <li class="active"><a href="#">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>
  </footer>
  </div>
</div>

</div>

ojvEJN.markdown

ojvEJN

A Pen by Simon Danner on CodePen.

License.

script.js

/* detect touch */
if ("ontouchstart" in window) {
  document.documentElement.className = document.documentElement.className + " touch";
}
if (!$("html").hasClass("touch")) {
  /* background fix */
  $(".parallax").css("background-attachment", "fixed");
}

/* fix vertical when not overflow
call fullscreenFix() if .fullscreen content changes */
function fullscreenFix() {
  var h = $('body').height();
  // set .fullscreen height
  $(".content-b").each(function(i) {
    if ($(this).innerHeight() <= h) {
      $(this).closest(".fullscreen").addClass("not-overflow");
    }
  });
}
$(window).resize(fullscreenFix);
fullscreenFix();

/* resize background images */
function backgroundResize() {
  var windowH = $(window).height();
  $(".background").each(function(i) {
    var path = $(this);
    // variables
    var contW = path.width();
    var contH = path.height();
    var imgW = path.attr("data-img-width");
    var imgH = path.attr("data-img-height");
    var ratio = imgW / imgH;
    // overflowing difference
    var diff = parseFloat(path.attr("data-diff"));
    diff = diff ? diff : 0;
    // remaining height to have fullscreen image only on parallax
    var remainingH = 0;
    if (path.hasClass("parallax") && !$("html").hasClass("touch")) {
      var maxH = contH > windowH ? contH : windowH;
      remainingH = windowH - contH;
    }
    // set img values depending on cont
    imgH = contH + remainingH + diff;
    imgW = imgH * ratio;
    // fix when too large
    if (contW > imgW) {
      imgW = contW;
      imgH = imgW / ratio;
    }
    //
    path.data("resized-imgW", imgW);
    path.data("resized-imgH", imgH);
    path.css("background-size", imgW + "px " + imgH + "px");
  });
}
$(window).resize(backgroundResize);
$(window).focus(backgroundResize);
backgroundResize();

/* set parallax background-position */
function parallaxPosition(e) {
  var heightWindow = $(window).height();
  var topWindow = $(window).scrollTop();
  var bottomWindow = topWindow + heightWindow;
  var currentWindow = (topWindow + bottomWindow) / 2;
  $(".parallax").each(function(i) {
    var path = $(this);
    var height = path.height();
    var top = path.offset().top;
    var bottom = top + height;
    // only when in range
    if (bottomWindow > top && topWindow < bottom) {
      var imgW = path.data("resized-imgW");
      var imgH = path.data("resized-imgH");
      // min when image touch top of window
      var min = 0;
      // max when image touch bottom of window
      var max = -imgH + heightWindow;
      // overflow changes parallax
      var overflowH = height < heightWindow ? imgH - height : imgH - heightWindow; // fix height on overflow
      top = top - overflowH;
      bottom = bottom + overflowH;
      // value with linear interpolation
      var value = min + (max - min) * (currentWindow - top) / (bottom - top);
      // set background-position
      var orizontalPosition = path.attr("data-oriz-pos");
      orizontalPosition = orizontalPosition ? orizontalPosition : "50%";
      $(this).css("background-position", orizontalPosition + " " + value + "px");
    }
  });
}
if (!$("html").hasClass("touch")) {
  $(window).resize(parallaxPosition);
  $(window).scroll(parallaxPosition);
  parallaxPosition();
}

scripts

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

style.css

nav {
  opacity: 0.8;
}

body {
  background-color: green;
  padding-top: 50px;
  /* make content to be after nav */
  
  margin: 0;
  font-family: sans-serif;
  font-size: 28px;
  text-align: center;
}

#header {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  color: gray;
}

.background {
  background-repeat: no-repeat;
  /* custom background-position */
  
  background-position: 50% 50%;
}
/* fullscreen setup */

html,
body {
  /* give this to all tags from html to .fullscreen */
  
  height: 100%;
}

.fullscreen,
.content-a {
  width: 100%;
  min-height: 10%;
}

.fullscreen.not-overflow,
.fullscreen.not-overflow .content-a {
  height: 100%;
  overflow: hidden;
}

#profile-pic {
  border-radius: 50%;
  border-width: 20px;
  border-color: rgba(255, 255, 255, .3);
  border-style: solid;
  max-width: 400px;
}

section {
  background: #darkgreen;
}

.section-header {
  background-color: #141414;
  font-size: 200%;
  color: #ffffff;
}

section,
.section-header {
  border-radius: 4px;
  max-height: 200px;
}

#about {
  background-color: lightblue;
  opacity: 0.8;
  margin: 20px 0px 20px 20px;
  border-style: solid;
  border-width: 2px;
  padding: 20px;
}

#about-pic {
  margin-top: 20px;
}

p,
ul {
  line-height: 100%;
  font-size: 80%;
  text-align: left;
}

#about ul {
  list-style-type: none;
}

.showcase {
  border-style: solid;
  border-color: lightblue;
  border-width: 1px;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  margin: 10px;
  padding: 20px;
}
.showcase:hover {
  background-color: rgba(80,0,0,0.75);
  
}

.showcase img {
  width: 90%;
  max-height: 100%;
  max-width: 100%;
  padding: 5px;
}

.description {
  background-color: rgba(20, 20, 20, 0.9);
  z-index: 1000;
  margin: -30% 0 0 0;
  color: white;
  position: relative;
  font-size: 50%;
  text-align: center;
  padding-bottom: 5px;
}

.contact {
  font-size: 150%;
  color: white;
  min-height: 300px;

}
#contact {
  margin: 100px;
}
.contact a{
  color: black;
  padding: 20px;
}

.github,.mail {
  opacity: 0.75;
  font-size: 100%;
  margin-top: 20px;
  
}
.github a{
  color: black;
}
.github:hover {
  opacity: 0.5;
}
.nav-bottom {
  font-size: 60%;
}
footer ul{
  background-color: lightblue;
  color: blue;
}

.nav-justified {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.nav-justified > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 0;
  font-weight: bold;
  color: #777;
  text-align: center;
  background-color: #e5e5e5; /* Old browsers */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
  background-image:         linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
  background-repeat: repeat-x; /* Repeat the gradient */
  border-bottom: 1px solid #d5d5d5;
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
  background-color: #ddd;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
          box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}
.nav-justified > li:first-child > a {
  border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
  border-bottom: 0;
  border-radius: 0 0 5px 5px;
}

styles

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