CodePen Embed - Portfolio page with animations

<div class="outer">
  <i class="fa fa-arrow-circle-up" id="arrow" aria-hidden="true"></i>
  <div class="inner">
    <!--
    HEADER
    SECTION
-->
    <header>
      <div class="container-fluid clearfix">
        <div class="row">
          <i class="fa fa-bars nav-toggle" aria-hidden="true"></i>
          <nav role="navigation">
            <i class="fa fa-times nav-toggle" aria-hidden="true"></i>
            <ul class="list-unstyled" id="nav">
              <li>
                <a class="nav-link" href="#intro"><span>About</span></a>
                <div class="underline"></div>
              </li>
              <li>
                <a class="nav-link" href="#skills"><span>Skills</span></a>
                <div class="underline"></div>
              </li>
              <li>
                <a class="nav-link" href="#portfolio"><span>Portfolio</span></a>
                <div class="underline"></div>
              </li>
              <li>
                <a class="nav-link" href="#contacts"><span>Contacts</span></a>
                <div class="underline"></div>
              </li>
            </ul>
          </nav>
        </div>
        <h1 class="titanic naked">Hi.</h1>
      </div>
    </header>

    <!--
    INTRODUCTION
    SECTION
-->

    <main id="main">
      <div class="container">
        <div class="row">
          <div id="intro">
            My name is Islam Ibakaev. Here at FreecodeCamp i learn to be a junior frontend developer. I love coding as all of you do.
          </div>
        </div>
      </div>
    </main>
    <section class="skills-sec">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-10 col-xs-offset-1">
            <h2>Skills</h2>
          </div>
          <div class="col-xs-8 col-xs-offset-2">
            <div id="skills">
              <img class="img-responsive skill toR" src="https://www.dropbox.com/s/ptiub25akn0arv1/js.png?dl=1" alt="js icon" />
              <img class="img-responsive skill" src="https://www.dropbox.com/s/mg6l07shpizexrm/css3.png?dl=1" alt="css icon" />
              <img class="img-responsive skill toL" src="https://www.dropbox.com/s/gpnimluvvf99aln/html5.png?dl=1" alt="html icon" />
              <img src="https://www.dropbox.com/s/imyppai6tbkcy66/bootstrap.png?dl=1" alt="bootstrap icon" class="img-responsive skill toR" />
              <img src="https://www.dropbox.com/s/qbirqpen1rap569/jquery.png?dl=1" alt="jquery icon" class="img-responsive skill" />
              <img src="https://www.dropbox.com/s/3qcvkhy12pmmyy9/gitpng.png?dl=1" alt="git icon" class="img-responsive skill toL" />
              <img src="https://www.dropbox.com/s/4258cs4sxun3ogs/sass.png?dl=1" alt="sass icon" class="img-responsive skill toR" />
              <img src="https://www.dropbox.com/s/8k7szo5mjfz7n7g/gulp.png?dl=1" alt="gulp icon" class="img-responsive skill" />
              <img src="https://www.dropbox.com/s/addcu8z0r6xxrpn/react.png?dl=1" alt="react icon" class="img-responsive skill toL" />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--
    PORTFOLIO
    SECTION
-->

    <section class="portfolio-sec">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-10 col-xs-offset-1">
            <h2>Portfolio</h2>
          </div>
          <div class="col-xs-12">
            <div id="portfolio">
              <div class="project">
                <a href="https://codepen.io/dagman/pen/BKddGL" target="_blank"><img src="https://www.dropbox.com/s/jlt6wt35u88kqmv/weather.png?dl=1" alt="weather_app" class="img-responsive" /></a>
              </div>
              <div class="project">
                <a href="https://codepen.io/dagman/pen/oxqzLx" target="_blank"><img src="https://www.dropbox.com/s/pmqf1y6q1zf5win/pomodoro.png?dl=1" alt="pomodoto_timer" class="img-responsive" /></a>
              </div>
              <div class="project">
                <a href="https://codepen.io/dagman/pen/NNXdxw" target="_blank"><img src="https://www.dropbox.com/s/rb7jycwtwxtkt7d/calculator.png?dl=1" alt="calculator" class="img-responsive" /></a>
              </div>
              <div class="project">
                <a href="https://codepen.io/dagman/pen/oxdYgW" target="_blank"><img src="https://www.dropbox.com/s/8hpioow2c68c97w/simon.png?dl=1" alt="simon_game" class="img-responsive" /></a>
              </div>
              <div class="project">
                <a href="https://codepen.io/dagman/pen/yOzemP" target="_blank"><img src="https://www.dropbox.com/s/f49kdhi98ygoqif/quote.png?dl=1" alt="quote_machine" class="img-responsive" /></a>
              </div>
              <div class="project">
                <a href="https://codepen.io/dagman/pen/jqZbje" target="_blank"><img src="https://www.dropbox.com/s/canzxmzo98vd1bj/tictactoe.png?dl=1" alt="tic_tac_toe" class="img-responsive" /></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

  </div>
  <!--
    FOOTER
    SECTION
-->
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-xs-10 col-xs-offset-1">
          <h2>Get in Touch</h2>
        </div>
        <div class="col-xs-12">
          <div id="contacts">
            <div class="row">
              <div class="col-lg-3 col-sm-6">
                <a class="contact-link awesome" href="#">mail</a>
              </div>
              <div class="col-lg-3 col-sm-6">
                <a class="contact-link awesome" href="#">linkedIn</a>
              </div>
              <div class="col-lg-3 col-sm-6">
                <a class="contact-link awesome" href="#">facebook</a>
              </div>
              <div class="col-lg-3 col-sm-6">
                <a class="contact-link awesome" href="#">freecodecamp</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>

</div>

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,700);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Fira+Mono:400,700);
@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);
@import url(https://fonts.googleapis.com/css?family=Sigmar+One);
@import url(https://fonts.googleapis.com/css?family=Bowlby+One+SC);

$main-c: #fff;
$accent-c: #333;
$link-c: $main-c;

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.naked {
  padding: 0;
  margin: 0;
}

a:hover, a:focus, a:visited {
  color: $link-c;
  text-decoration: none;
}

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

body {
  color: $main-c;
  background-color: $accent-c;
  -webkit-font-smoothing: antialiased;
  font-family: 'Montserrat';
  position: relative;
  font: 1em/1.6 sans-serif;
}

// header styles 
header {
  background-color: $accent-c;
  height: 100vh;
  position: relative;
  
}
.titanic {
  font-size: 144px;
  font-weight: 700;
  font-family: 'Raleway', sans-serif;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}
nav {
  padding-top: 30px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  text-align: center;
  transform: translateX(-100%);
  & #nav {
    
    
  }
}



.inner {
  transform: translateX(0);
  transition: transform .5s cubic-bezier(.55,.07,1,.02);
  &.open {
    transform: translateX(100%);
  }
}

.fa-times {
  position: absolute;
  top: 35px;
  right: 10%;
  font-size: 36px;
  color: #F06060;
  cursor: pointer;
  z-index: 9999;
}
.fa-bars {
  font-size: 36px;
  position: absolute;
  top: 5%;
  left: 5%;
  cursor: pointer;
}
.fa-arrow-circle-up {
  position: fixed;
  bottom: 5%;
  left: 4%;
  cursor: pointer;
  font-size: 36px;
  z-index: 999;
  color: #F06060;
}
.outer {
  overflow: hidden;
  position: relative;
}

.underline {
  height: 2px;
  width: 0;
  margin: 0 auto;
  background-color: $main-c;
}
.nav-link {
  font-size: 46px;
  letter-spacing: 2px;
  display: block;
  color: $main-c;
  font-family: 'Inconsolata', ;
  padding: 5px 0;
  margin: 25px 0;
  text-transform: uppercase;
}

// INTRODUCTION
// SECTION

main {
  min-height: 100vh;
  padding-top: 50px;
  background-color: $main-c;
  text-align: center;
  font-size: 80px;
}
#intro {
  width: 100%;
  text-align: left;
  word-break: break-word;
  font-size: 9vw;
  font-family: "ff-nuvo-sc-web-pro",sans-serif;
  font-weight: bold;
  
  color: $accent-c;
}

// SKILLS
// SECTION

.skills-sec {
  position: relative;
  background-color: #fff;
}

h2 {
  color: $accent-c;
  text-align: center;
  margin: 100px 0;
  font-size: 10vw;
  font-weight: 700;
  border-top: .5vw solid $accent-c;
  border-bottom: .5vw solid $accent-c;
  padding: 10px 0;
}

#skills {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  // transform: translateY(20px);
  // transition: all 1s ease-in-out;
  // transition-delay: .2s;
  
}

.skill {
  width: 32%;
  height: 19vw;
  padding: 15px;
  opacity: 0;
  transition: all 1s ease-in-out;
  &.toR {
    transform: translateX(-50px);
  }
  &.toL {
    transform: translateX(50px);
  }
  &:nth-child(2) {
    transform: translateY(-50px);
  }
  &:nth-child(8) {
    transform: translateY(50px);
  }
  
}

// PORTFOLIO
// SECTION

.portfolio-sec {
  background-color: $accent-c;
  h2 {
    color: $main-c;
    border-color: $main-c;
    
  }
}
#portfolio {
  background-color: #333;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.project {
  width: 32%;
  padding: 5px;
  opacity: 0;
  text-align: center;
  transform: translateX(-25px);
  transition: all .5s ease-in;
  img {
    display: inline-block;
  }
  
}

// FOOTER
// SECTION

footer {
  color: $accent-c;
  background-color: $main-c;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  // z-index: -999;
  h2 {
    margin: 100px 0 50px 0;
  }
  
  #contacts {
    margin-bottom: 20px;
  }
  
  .contact-link {
    display: block;
    border: 1px solid $accent-c;
    padding: 10px 0;
    text-align: center;
    font-size: 150%;
    color: $accent-c; 
    text-transform: uppercase;
    transition: all .25s ease-in-out;
    &:hover {
      color: $main-c;
      background-color: $accent-c;
    }
  }
}

// BUTTONS 
// ANIMATIONS

.awesome {
  border-color: $accent-c;
  color: #fff;
  background: {
    image: linear-gradient(45deg,$accent-c 50%, transparent 50%);
    position: 100%;
    size: 400%;
  }
  transition: background 500ms ease-in-out;
  
  &:hover {
    background-position: 0;
  }
}



// MEDIA
// QUERIES

@media screen and (max-width: 1210px) {
  .contact-link {
    margin: 10px auto;
  }
}
@media screen and(max-width: 768px) {
  .skill {
    width: 50%;
    height: 30vw;
  }
  .project {
    width: 50%;
  }
  .contact-link {
    width: 50%;
    margin: 15px auto;
  }
}
@media screen and(max-width: 480px) {
  .skill {
    width: 100%;
    height: 60vw;
  }
  .project {
    width: 100%;
  }
  .contact-link {
    width: 70%;
    margin: 15px auto;
  }
}

View Compiled

$(document.body).ready(function() {
  
  // toggle navigation
  $('.nav-toggle').click(function() {
    $('.inner').toggleClass('open');
  });

  // smooth scrolling
  $(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
          setTimeout(function() {
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 1000);
          }, 600);
          return false;
        }
      }
    });
  });

  var hi = $('.titanic'),
    header = $('header'),
    underline = $('.underline'),
    portfolioBox = $('.portfolio-sec'),
    project = $('.project'),
    navLink = $('.nav-link'),
    skillsBox = $('.skills-sec'),
    skills = $('.skill'),
    arrow = $('#arrow'),
    w = $(window),
    fz;

  portfolioBox.css({
    'marginBottom': $('footer').height()
  })

  TweenMax.from(hi, 5, {
    y: 140,
    opacity: 0,
    ease: Elastic.easeOut
  })
  
  $('.nav-link').click(function() {
    $('.inner').toggleClass('open');
  });

  $('nav li')
    .mouseenter(function(e) {
      var underline = $(this).find('div.underline'),
          width = $(this).find('span').width();
      TweenMax.to(underline, .1, {
        width: width
      });
    })
    .mouseleave(function(e) {
      var underline = $(this).find('div.underline');
      TweenMax.to(underline, .1, {
        width: 0
      });
    })

  w.scroll(function(e) {
    var wScroll = $(this).scrollTop(),
      wHeight = $(this).height();
    if (wScroll >= (header.height() - hi.height()) / 2) {
      
      // hi.css({
      //  'position': 'absolute',
      //  'top': '100%',
      //  'transform': 'translate(-50%, -100%)'
      // })
      // TweenMax.to(hi, .5, {
      //  color: '#333'
      // })
      
      // TweenMax.to(header, .5, {
      //  backgroundColor: '#fff'
      // })

    }
    if (wScroll < (header.height() - hi.height()) / 2) {
      // hi.css({
      //  'position': 'fixed',
      //  'top': '50%',
      //  'transform': 'translate(-50%, -50%)'
      // })
      // TweenMax.to(hi, .5, {
      //  color: '#fff'
      // })
      
    
      // TweenMax.to(header, .5, {
      //  backgroundColor: '#333'
      // })
    }
  })

  w.resize(function() {
    portfolioBox.css({
      'marginBottom': $('footer').height()
    })
  })

  $('#portfolio').waypoint(function() {
    // $('footer').css({
    //  'display': 'block'
    // })
    TweenMax.staggerTo(project, .25, {
      'opacity': 1,
      x: 0
    }, .25)
  }, {
    offset: 300
  })

  
  
  portfolioBox.waypoint(function() {
    
    
  })

  skillsBox.waypoint(function() {
    skills.filter('.toR').css({
      'opacity': 1,
      'transform': 'translateX(0)'
    });
    skills.filter('.toL').css({
      'opacity': 1,
      'transform': 'translateX(0)'
    });
    skills.eq(1).css({
      'opacity': 1,
      'transform': 'translateY(0)'
    });
    skills.eq(4).css({
      'opacity': 1
    });
    skills.eq(7).css({
      'opacity': 1,
      'transform': 'translateY(0)'
    });
    

  })
  
  arrow.click(function() {
    $('body').animate({
      scrollTop: 0
    }, 1000);
  });

});

This Pen is owned by Islam Ibakaev on CodePen.

See more by @devellopah on CodePen

External CSS

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External CSS

External JavaScript