<div class="navbar--container sticky">
  <div class="navbar--title"><h4>navigation</h4></div>
  <div class="navbar--icon"><i class="fas fa-bars"></i></div>
</div>
<div class="nav--open close sticky">
  <div class="nav--open-icon"><i class="fas fa-times"></i></div>
  <div class="nav--open-title">explore</div>
  <div class="nav--open-menu">
    <a href="">about</a>
    <a href="">work</a>
    <a href="">services</a>
    <a href="">blog</a>
    <a href="">contact</a>
  </div>
</div>

<section>
  <h1>Hi, my name is <br><span>Julie.</span></h1>
</section>
<section class="two">
  <h1>I'm a <span>front-end</span><br>engineer.</h1>
</section>
<section class="three">
  <h1>I like to <br><span class="light">design + code</span><br> pretty things.</h1>
</section>
<section class="four">
    <h1>you can <br>follow me on <br><a class="underline" target="_blank" href="https://instagram.com/hercodehaus">instagram</a><br> or <a class="underline" target="_blank" href="https://twitter.com/juliepark">twitter.</a></h1>
</section>
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Oswald:200,400|Playfair+Display:400,400i');

$bold: 'Oswald', sans-serif;
$abril: 'Abril Fatface', serif;
$serif: 'Playfair Display', serif;

$white: #ffffff;
$main: #92BFB1;
$dark: #333333;

$ease-slow: all .4s ease-out;

body {
  margin: 0;
  background: lighten($main, 10%);
}

a {
  text-decoration: none;
  color: $main;
  &:hover {
    background: $main;
    color: $dark;
  }
}

.sticky {
  position: fixed;
  z-index: 10;
}
.navbar--container {
  top: 15%;
  background: $white;
  height: 220px;
  width: 90px;
  box-shadow: 2px 2px 15px rgba($dark, .1);
}
.navbar--icon {
  margin-top: 24px;
  margin-left: 49px;
  font-size: 1em;
  &:hover {
    color: $main;
    cursor: pointer;
  }
}
.navbar--title {
  margin-left: 27px;
  margin-top: 35px;
  h4 {
    writing-mode: vertical-rl;
    font-family: $bold;
    letter-spacing: .34em;
    text-transform: uppercase;
    font-size: 0.9em;
  }
}

//navigation open

.nav--open {
  height: 100vh;
  width: 300px;
  background: $white;
  transition: $ease-slow;
  opacity: 1;
  box-shadow: 2px 2px 15px rgba($dark, .1);
}

.nav--open-icon {
  text-align: right;
  padding: 20px;
  i {
    font-size: 1.8em;
    color: $main;
    &:hover {
      color: $dark;
      cursor: pointer;
    }
  }
}

.nav--open-title {
  font-family: $serif;
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .2em;
  text-align: center;
  margin-top: 35%;
}

.nav--open-menu {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 30px;
  a {
    font-size: 2em;
    font-weight: 100;
    font-family: $serif;
    padding: 15px 0;
  }
}

.close {
  transform: translateX(-300px);
  transition: $ease-slow;
  opacity: 0;
}

section {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.two {
  background: darken($main, 1%);
}

.three {
  background: darken($main, 10%);
}

h1 {
  font-family: $abril;
  margin: 0;
  line-height: 1em;
  font-weight: 100;
  color: $white;
  font-size: 3.5em;
  span {
    font-style: italic;
    text-decoration: underline;
    color: darken($main, 10%);
  }
}

.light {
  color: lighten($main, 10%);
}

.underline {
  text-decoration: underline;
}
View Compiled

let open = document.querySelector('.navbar--icon');
let menu = document.querySelector('.nav--open');
let close = document.querySelector('.nav--open-icon');

open.addEventListener('click', function() {
  menu.classList.toggle('close');
});


close.addEventListener('click', function() {
  menu.classList.toggle('close');
})

External CSS

  1. https://use.fontawesome.com/releases/v5.8.1/css/all.css

External JavaScript

This Pen doesn't use any external JavaScript resources.