CodePen Embed - Typed.js Animation // Full-Screen Menu Toggle

<header class="header">
  <div class="burger">
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
  </div>

  <nav class="menu">
    <div class="menu__brand">
      <div class="logo">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/17097884_10209641836470442_3165663594095107168_o%20(1).jpg" style="width:100%; border-radius:50%; margin-bottom:10px; width:60%;" />
      </div>
    </div>
    <ul class="menu__list">
      <li class="menu__item"><a href="https://codepen.io/BridgetCReed" class="menu__link" target="_blank">CodePen</a></li>
      <li class="menu__item"><a href="http://www.bridgetcreed.com" class="menu__link" target="_blank">Website</a></li>
      <li class="menu__item">
        <a href="https://twitter.com/bridgetcreed" target="_blank" class="menu__link menu__link--social"><i class="fa fa-twitter"></i></a>
      </li>
      <li class="menu__item">
        <a href="https://instagram.com/bridgetcreed" target="_blank" class="menu__link menu__link--social">
          <i class="fa fa-instagram"></i></a>
      </li>
    </ul>
  </nav>
</header>

<section class="hero">
  <div class="inner-logo">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/logo-wht.png" style="width:125px;"/>
  </div>
  <div class="inner-text">
    <p class="p1">Web</p>
    <p class="p2">Designer</p>
  </div>
  <a class="hero-down animated infinite pulse" href="#about">
    <i class="fa fa-chevron-down"></i>
  </a>
</section>

<section id="about">
  <div class="row">
    <div class="col-sm-4">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/13254726_10207279657097434_3540423145812811418_o (1).jpg" style="width:100%; border-radius:50%; margin-bottom:10px;" />
     </div>
    <div class="col-sm-8 left">
      <h1>About Bc. Reed</h1>
      <p>Since a young age, <strong>Bridget Reed</strong> has been drawn to design, computers, and technology as a whole. She is currently a full-time Philadelphia-based UI/UX designer and front-end software developer, as well as a part-time designer, organizer, and teacher for Girl Develop It Philadelphia and an active member in the Philly tech community. On the rare occasion that Bridget is offline, she can be found participating in local tech meetups, sampling craft beer, digging through crates of vinyl records, and exploring local brunches for the best biscuits and gravy around town.</p>
      <h4>Favorite Brunch</h4>
      <p>40° 16' 8.311" N // 75° 9' 19.2564'' W</p>
      <h4>Favorite Venue</h4>
      <p>39° 57' 41.0616'' N // 75° 8' 58.012" W</p>
      <h4>Favorite Record</h4>
      <p>Guardians of the Galaxy OST LP<br />[Mondo press on 180 gram Purple Infinity Stone colored vinyl w/ screen-printed single sleeve jacket, artwork by Tyler Stout]</p>
      </div>
    </div>
</section>

html, body {
  height: 100%;
}

body {
  font-family: 'Roboto';
  text-align: center;
  color: #bbb;
}

.hero {
  height: 80%;
  width: 100%;
  background: #EC6F66; /* fallback for old browsers */
  background: -webkit-linear-gradient(right, #EC6F66, #F3A183);
  background: -moz-linear-gradient(right, #EC6F66, #F3A183);
  background: -o-linear-gradient(right, #EC6F66, #F3A183);
  background: linear-gradient(to left, #EC6F66, #F3A183);
  
  @media only screen and (min-width: 320px) {
    height:60%;
  }
  @media only screen and (min-width: 680px) {
    height:70%;
  }
  @media only screen and (min-width: 950px) {
    height:80%;
  }
}
.inner-logo {
  text-align:left;
  position:relative;
  top: 10px;
  left: 10px;
  transform:translateY(10px);
  transform:translateX(1px);
}
.inner-text {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  @media only screen and (min-width: 320px) {
    padding-left: 15px;
    padding-right: 15px; 
  }
  @media only screen and (min-width: 400px) {
    padding-left: 40px;
    padding-right: 40px; 
  }
  @media only screen and (min-width: 680px) {
    font-size: 75px;
  }
  @media only screen and (min-width: 950px) {
    font-size: 100px;
  }
}

.p1 {
  display: inline-block;
  font-size: 1em;
  font-weight: 100;
  marign: 0;
  line-height: 1;
  color: #f5f5f5;
  @media only screen and (max-width: 465px) {
    display: block;
    position: absolute;
    top: -25%;
    left: 50%;
    transform: translateX(-50%);
  }
}

.p2 {
  display: inline-block;
  font-size: 1em;
  font-weight: 900;
  marign: 0;
  line-height: 1;
  color: white;
  @media only screen and (max-width: 465px) {
    position: relative;
    top: 0.6em;
  }
}

.hero-down {
  position: absolute;
  left:48%;
  font-size: 2em;
  width: 2em;
  height: 2em;
  color: #f5f5f5;
  border-radius: 100%;
  &:hover, &:focus {
    color: #ccc;
  }
  &:active {
    color: #f5f5f5;
  }
  i {
    vertical-align: bottom;
    position: relative;
    top: 0.1em;
  }
  @media only screen and (min-width: 320px) {
    top:52%;
  }
  @media only screen and (min-width: 680px) {
    top:62%;
  }
  @media only screen and (min-width: 950px) {
    top:72%;
  }
}

// ABOUT //
#about {
  padding: 30px;
}
.left {
  text-align:left;
}

// MENU //

$primary-color: white;

@mixin easeOut {
  transition: all .4s cubic-bezier(0.23, 1, 0.32, 1)
}

@mixin tablet {
  @media screen and (max-width: 768px) {
    @content;
  }
}

* {
  box-sizing: border-box;
}


.header {
  position: fixed;
  z-index: 5;
  width: 100%;
}

.burger {
  position: absolute;
  z-index: 10;
  right: 25px;
  top: 25px;
  cursor: pointer;
  transform: rotateY(0);
  @include easeOut;
  
  &__patty {
    width: 28px;
    height: 2px;
    margin: 0 0 4px 0;
    background: white;
    @include easeOut;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  // transform burger into 'x'
  &--close {
    transform: rotate(180deg);
    
    .burger__patty {
      &:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px);
      }
      &:nth-child(2) {
        opacity: 0;
      }
      &:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -4px);
      }
    }
  }
}

.menu {
  position: fixed;
  top: 0;
  width: 100%;
  visibility: hidden;
  
  &--active {
    visibility: visible;
  }
  
  &__brand,
  &__list {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    float: left;
    width: 50%;
    height: 100vh;
    overflow: hidden;
  }
  
  &__list {
    margin: 0;
    padding: 0;
    background: #EC6F66; /* fallback for old browsers */
    background: -webkit-linear-gradient(right, #EC6F66, #F3A183);
    background: -moz-linear-gradient(right, #EC6F66, #F3A183);
    background: -o-linear-gradient(right, #EC6F66, #F3A183);
    background: linear-gradient(to left, #EC6F66, #F3A183);
    list-style-type: none;
    transform: translate3d(0, -100%, 0);
    @include easeOut;
    
    &--active {
      transform: translate3d(0, 0, 0);
    }
  }
  
  &__brand {
    background:white;
    @include easeOut;
    transform: translate3d(0, 100%, 0);
    
    &--active {
      transform: translate3d(0, 0, 0);
    }
  }
  
  &__item {
    transform: translate3d(500px, 0, 0);
    @include easeOut;
    
    &--active {
      transform: translate3d(0, 0, 0);
    }
  }
  
  &__link {
    display: inline-block;
    position: relative;
    font-size: 42px;
    padding: 15px 0;
    font-weight: 300;
    text-decoration: none;
    color: white;
    @include easeOut;
    
    &:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 10px;
      height: 2px;
      background: white;
      transform: translateX(-50%);
      @include easeOut;
    }
    
    &:hover {
      &:before {
        width: 100%;
      }
    }
  }
  
  a.menu__link:hover {
   color: white !important;
   text-decoration: none !important;
   font-weight:bold !important;
  }
  
  // add delay to each menu item
  @for $x from 1 through 6 {
    .menu__item:nth-child(#{$x}) {
      transition-delay: $x * .1s;
    }
  }
}

// responsive tablet view
@include tablet {
 ul.menu__list,
 div.menu__brand {
  float: none;
  width: 100%;
  min-height: 0;

   &--active {
     transform: translate3d(0, 0, 0);
   }
 }

 .menu__list {
   height: 75vh;
   transform: translate3d(-100%, 0, 0);
 }

 .menu__link {
   font-size: 24px;
 }
  

 .menu__brand {
   height: 25vh;
   transform: translate3d(100%, 0, 0);

   .logo {
     width: 90px;
     height: 90px;
   }
 }
}

View Compiled

$(function() {
  $(".p2").typed({
    strings: ["Designer", "Developer", "Maker"],
    typeSpeed: 50,
    backSpeed: 10,
    backDelay: 2000,
    showCursor: false,
    loop: false
  });
});

// smooth scroll to div
$('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) {
      $('html,body').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
});


//Menu
(function() {
  
  var Menu = (function() {
    var burger = document.querySelector('.burger');
    var menu = document.querySelector('.menu');
    var menuList = document.querySelector('.menu__list');
    var brand = document.querySelector('.menu__brand');
    var menuItems = document.querySelectorAll('.menu__item');
    
    var active = false;
    
    var toggleMenu = function() {
      if (!active) {
        menu.classList.add('menu--active');
        menuList.classList.add('menu__list--active');
        brand.classList.add('menu__brand--active');
        burger.classList.add('burger--close');
        for (var i = 0, ii = menuItems.length; i < ii; i++) {
          menuItems[i].classList.add('menu__item--active');
        }
        
        active = true;
      } else {
        menu.classList.remove('menu--active');
        menuList.classList.remove('menu__list--active');
        brand.classList.remove('menu__brand--active');
        burger.classList.remove('burger--close');
        for (var i = 0, ii = menuItems.length; i < ii; i++) {
          menuItems[i].classList.remove('menu__item--active');
        }
        
        active = false;
      }
    };
    
    var bindActions = function() {
      burger.addEventListener('click', toggleMenu, false);
    };
    
    var init = function() {
      bindActions();
    };
    
    return {
      init: init
    };
    
  }());
  
  Menu.init();
  
}());

This Pen is owned by Bridget Reed on CodePen.

See more by @BridgetCReed on CodePen

External CSS

External JavaScript