<div class="container">
  <div class="profile">
    <div id="overlay">
      <ul class="nav">
        <li><a href="https://twitter.com/juliepark"  target="_blank"><i class="fab fa-twitter"></i> Twitter</a></li>
        <li><a href="https://facebook.com" target="_blank"><i class="fab fa-facebook"></i> Facebook</a></li>
        <li><a href="https://instagram.com/julieparkim"  target="_blank"><i class="fab fa-instagram"></i> Instagram</a></li>
        <li><a href="https://github.com/jspark721"  target="_blank"><i class="fab fa-github"></i> Github</a></li>
        <li><a href="https://codepen.io/juliepark"  target="_blank"><i class="fab fa-codepen"></i> Codepen</a></li>
        <li><a href="https://www.linkedin.com/in/juliepark721/"  target="_blank"><i class="fab fa-linkedin"></i> LinkedIn</a></li>
      </ul>
    </div>
    <div class="top">
      <div class="menu">
        <div class="bar click-top"></div>
        <div class="bar click-middle"></div>
        <div class="bar click-bottom"></div>
      </div>
    </div>
    <div class="bottom">
      <h1>Julie Park</h1>
      <h2>front-end developer</h2>
      <p><i class="fas fa-location-arrow"></i> seattle, washington</p>
      <div class="line"></div>
      <button class="margin-left">message</button>
      <button>follow</button>
    </div>
  </div>
  <div class="text">
    <h2>click the menu to see animation</h2>
  </div>
</div>
<div class="background"></div>

<footer>
  <p>made by <a href="https://codepen.io/juliepark"> julie</a> ♡
</footer>

$pink: #C98491;
$gold: #E5B879;
$green: #A0B79F;
$white: #FFE3D8;
$navy: #495771;

@import url('https://fonts.googleapis.com/css?family=Raleway');

$font: 'Raleway', sans-serif;

body {
  background: darken($navy, 12%);
}

.container {
  width: 600px;
  height: 400px;
  margin: auto;
  position: relative;
}

.profile {
  position: absolute;
  left: 20%;
  top: 20%;
  height: 350px;
  width: 220px;
  box-shadow: 0px 7px 15px rgba(0,0,0,.2);
}

.text {
  position: absolute;
  left: 21.5%;
  top: 112%;
  h2 {
    color: $white;
    text-transform: uppercase;
    font-size: 8px;
    opacity: .7;
  }
}

.top {
  position: absolute;
  width: 100%;
  height: 46%;
  background: $navy;
  background-image: url('https://preview.ibb.co/jOUoSH/pie.jpg');
  background-size: 220px auto;
  background-position: right 0px bottom 0px;
}
.bottom {
  position: absolute;
  width: 100%;
  height: 54%;
  top: 46%;
  background: $white;
}

h1, h2, p {
  font-family: $font;
  letter-spacing: 2px;
  text-align: center;
}

h1 {
  color: $navy;
  margin-top: 13%;
  font-size: 1.2em;
  text-transform: uppercase;
}
h2 {
  color: $pink;
  font-size: 0.5em;
  text-transform: lowercase;
  margin-top: -7px;
}

p {
  color: $navy;
  font-size: .4em;
  .fas {
    color: $green;
    font-size: 7px;
  }
}

.line {
  border-bottom: 2px solid $pink;
  width: 18%;
  left: 41%;
  top: 58%;
  position: absolute;
}

button {
  padding: 15px;
  font-size: .5em;
  width: 95px;
  background: $navy;
  font-family: $font;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: $white;
  border: none;
  margin-top: 40px;
  opacity: .8;
  margin-right: 7px;
  &:hover {
    opacity: 1;
    transition: all .3s ease;
  }
}

.margin-left {
  margin-left: 10px;
}

/* hamburger menu */
.menu {
  width: 20px;
  height: 20px;
  padding: 8px;
  opacity: .9;
  position: absolute;
  right: -1px;
  -webkit-transition: all .7s ease;
  transition: all .7s ease;
}

/*hamburger menu animation*/
.bar {
  display: block;
  height: 3px;
  width: 20px;
  background: $white;
  margin: 4px auto;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.click-top {
  margin-top: 0;
}

.menu {
  z-index:3;
  &.open {
    .click-top {
      background: $navy;
      transform: translateY(7px) rotateZ(45deg);
    }
    .click-middle {
      opacity: 0;
    }
    .click-bottom {
      background: $navy;
      transform: translateY(-7px) rotateZ(-45deg);
    }
  }
}

/*overlay menu*/
#overlay {
  position: absolute;
  background: $gold;
  top: 0;
  left: 0;
  width: 101%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s, height .5s;
  z-index:2;
  
  &.view {
    opacity: 1;
    visibility: visible;
    height: 100%;
    width: 101%;
    z-index: 2;
    transition: opacity .5s, visibility .5s, height .5s;
  }
  &:after {
    transition: .5s;
  }
}

.nav {
  margin-top: 60px;
  margin-left: 15px;
  li {
    list-style-type: none;
    margin: 28px auto;
    font-family: $font;
    font-size: .7em;
  }
  a {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: $navy;
    padding: 10px;
    border: solid 1px transparent;
  }
  a:hover {
    color: $white;
    transition: all .5s ease;
    border: solid 1px transparent;
    background: $navy;
    padding: 10px;
  }
}

.background {
  height: 0vh;
  top: 0;
  width: 100vw;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  background-position: left 20% top 0px;
  transition: opacity .5s, visibility .5s, height .5s;
}

.show {
  height: 100vh;
  width: 100vw;
  background-image: url(https://preview.ibb.co/jOUoSH/pie.jpg);
  background-repeat: no-repeat;
  background-position: left 20% top 0px;
  visibility: visible;
  opacity: .2;
  transition: opacity .5s, visibility .5s, height .5s;
  position: absolute;
}

footer {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 0.8em;
  text-transform: uppercase;
  padding: 10px;
  p {
    color: $gold;
  }
  a {
    color: #ffffff;
    text-decoration: none;
    &:hover {
      color: #7d7d7d;
    }
  }
}

$(".menu").click(function(){
  $(this).toggleClass("open");
  $("#overlay").toggleClass("view");
  $(".background").toggleClass("show");
});