<!-- remove FOUC -->
<style>
  .js body {
    visibility: hidden;
    opacity: 0;
  }
</style>

<script>
  document.getElementsByTagName("html")[0].classList.add('js');
</script>

<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i" rel="stylesheet">

<nav class="nav">
  <div class="nav--bar">
    <!-- nav brand -->
    <span class="nav--brand"><a href="#">Selcuk Cura</a></span>

    <!-- nav toggle -->
    <button class="nav--toggle">
      <span class="nav--label-container">
        <span class="nav--label">Menu</span>
        <span class="nav--label">Close</span>
      </span>
      <span class="nav--navicon">
        <span class="nav--navicon-line"></span>
        <span class="nav--navicon-line"></span>
        <span class="nav--navicon-line"></span>  
      </span>
    </button>
  </div>

  <!-- nav menu backdrop -->
  <div class="nav--menu-backdrop"></div>
  
  <!-- nav menu bg -->
  <div class="nav--menu-bg"></div>

  <!-- nav menu -->
  <div class="nav--menu">
    <div class="nav--menu-container">
      <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- intro content -->
<div class="intro-container">
  <div class="intro-initials center-xy">
    <span>SC</span>
  </div>
  <div class="intro-title center-xy">
    <span>Web Design &amp; Development.</span>
  </div>

  <!-- arrow -->
  <a href="#section-about">
    <div class="intro-arrow-container">
      <div class="intro-arrow">
        <span class="intro-arrow--line"></span>
        <span class="intro-arrow--tip intro-arrow--tip-right"></span>
        <span class="intro-arrow--tip intro-arrow--tip-left"></span>
      </div>
    </div>
  </a>
</div>

<!-- other content -->
<div class="main-content">
  <section class="section section--about" id="section-about">
    <div class="container">
      <div class="profile-img-container" tabindex="0">
        <img src="https://selcukcura.com/wp-content/themes/selfolio-2018/img/profile-img/selcuk-cura-young.jpg" alt="Selcuk Cura" class="profile-img img-fluid">
        <img src="https://selcukcura.com/wp-content/themes/selfolio-2018/img/profile-img/selcuk-cura.jpg" alt="Selcuk Cura" class="profile-img img-fluid">
      </div>

      <div class="section-text-container about-text-container">
        <h1 class="section-title">About me</h1>
        <p>I’m a front-end developer based in East London, with experience building websites, banner adverts and high-impact adverts in the advertising industry.</p>
        <div class="spacer-sm-y">
          <a href="#" class="link-arrow">Learn more <span class="link-arrow-icon">→</span></a>
        </div>
      </div>
      
      <!-- spacer -->
      <div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
      </div>

    </div>
  </section>


  <!-- footer -->
  <footer class="footer-main">
    <div class="container">
      <p class="footer-text">&copy; <span class="current-year">2019</span> Selçuk Cura
      </p>
      <ul class="icon-container">
        <!-- SVG icons from: https://codepen.io/ruandre/pen/howFi?editors=0110 -->
        <li><a href="https://www.linkedin.com/in/selcukcura" class="icon icon-linkedin" title="LinkedIn" target="_blank"><svg viewBox="0 0 512 512"><path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z"/></svg></a></li>
        <li><a href="https://twitter.com/selcukcura" class="icon icon-twitter" title="Twitter" target="_blank"><svg viewBox="0 0 512 512"><path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/></svg></a></li>
        <li><a href="https://codepen.io/selcukcura" class="icon icon-codepen" title="CodePen" target="_blank"><svg viewBox="0 0 512 512"><path d="M427 201.9c-0.6-4.2-2.9-8-6.4-10.3L264.2 87.3c-4.9-3.3-11.4-3.3-16.3 0L91.4 191.6c-4 2.7-6.5 7.4-6.5 12.2v104.3c0 4.8 2.5 9.6 6.5 12.2l156.4 104.3c4.9 3.3 11.4 3.3 16.3 0L420.6 320.4c4-2.6 6.6-7.4 6.6-12.2V203.9C427.1 203.2 427.1 202.6 427 201.9 427 201.7 427.1 202.6 427 201.9zM270.7 127.1l115.2 76.8 -51.5 34.4 -63.8-42.7V127.1zM241.3 127.1v68.6l-63.8 42.7 -51.5-34.4L241.3 127.1zM114.3 231.4l36.8 24.6 -36.8 24.6V231.4zM241.3 384.9L126.1 308.1l51.5-34.4 63.8 42.6V384.9zM256 290.8l-52-34.8 52-34.8 52 34.8L256 290.8zM270.7 384.9V316.3l63.8-42.6 51.5 34.4L270.7 384.9zM397.7 280.6l-36.8-24.6 36.8-24.6V280.6z"/></svg></a></li>
      </ul>
    </div>
  </footer>
  <!-- /footer -->
</div>
// ----- VARIABLES ----- //

// colors
$brand-colors: (
  blue: #4A90E2,
  blue-lighter: lighten(#4A90E2, 20%),
  gray-bluey: #C8CEDA,
  green: #009688,
  green-dark: #00796B
);

$primary-color: map-get($brand-colors, green);
$primary-color-dark: map-get($brand-colors, green-dark);


// ----- BASE ----- //

html {
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: 'Noto Serif', serif;
  margin: 0;
}


// ----- HELPER ----- //

.center-xy {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
}

.spacer-sm-y {
  margin-top: 15px;
  margin-bottom: 15px;
}

.spacer-md-y {
  margin-top: 30px;
  margin-bottom: 30px;
}

.spacer-lg-y {
  margin-top: 80px;
  margin-bottom: 80px;
}

.hidden-elem {
  visibility: hidden;
  opacity: 0;
}


// ----- NAV ----- // 

.nav {
  &.nav--solid {
    .nav--bar {    
      color: #000;
      background-color: #fff;
      border-bottom: 1px solid #efefef;
      overflow: hidden;
    }

    .nav--toggle {
      color: #000;
    }
  }

  .nav--bar {    
    color: #fff;
    width: 100%;
    padding: 15px 20px;
    transition: all .15s ease;
    position: fixed;
    z-index: 99999;    

    .nav--brand {
      font-size: 18px;

      a {
        color: inherit;
        text-decoration: none;
      }
    }
  }

  .nav--toggle {
    color: #fff;
    background: none;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    transition: all .15s ease;
    user-select: none;
    cursor: pointer;
    float: right;

    &:hover,
    &:focus {      
      .nav--navicon {
        .nav--navicon-line {
          &:nth-of-type(1) {
            transform: translate(0, 2px);
          }
          &:nth-of-type(3) {
            transform: translate(0, -2px);
          }
        }
      }
    }

    &.active {
      .nav--navicon {
        .nav--navicon-line {
          &:nth-of-type(1) {
            transform: translate(0px, 9px) rotate(45deg);
            transition-delay: .1s;
          }

          &:nth-of-type(2) {
            transform: scaleX(0);
            opacity: 0;
          }

          &:nth-of-type(3) {
            transform: translate(0px, -9px) rotate(-45deg);
            transition-delay: .1s;
          }
        }
      }
    }
  }

  .nav--label-container {
    white-space: nowrap;
    position: relative;
    display: inline-block;

    .nav--label {
      color: inherit;
      font-size: 18px;
      vertical-align: middle;
      margin-right: 8px;
      transition: all .2s ease;
      transition-property: transform, opacity;
      display: inline-block;

      &:last-of-type {
        top: 0;
        right: 0;
        transform: translateY(-100%);
        position: absolute;
        opacity: 0;
      }
    }
  }

  .nav--navicon {
    vertical-align: middle;
    width: 31px;
    height: 20px;
    display: inline-block;

    .nav--navicon-line {
      background-color: currentColor;
      width: 100%;
      height: 1px;
      margin-bottom: 8px;
      transform-origin: center;
      transition: all .15s ease-out;
      transition-property: transform, opacity;
      display: block;

      &:nth-of-type(2) {
        transform-origin: center;
      }
    }
  }

  .nav--menu-backdrop {
    background: transparentize(#000, .2);
    width: 100%;
    height: 100%;
    transition: all .2s ease;
    position: fixed;
    z-index: 99997;
    visibility: hidden;
    opacity: 0;
  }

  .nav--menu-bg {
    background-color: #fff;
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
    transition: all .2s ease-in;
    position: fixed;
    z-index: 99998;

    &:before,
    &:after {
      content: '';
      border: 1px solid transparent;
      border-bottom-color: map-get($brand-colors, gray-bluey);
      width: 20px;
      height: 20px;
      margin: 20px;
      bottom: 0;
      position: absolute;
      display: block;
    }

    &:before {
      border-left-color: map-get($brand-colors, gray-bluey);
    }

    &:after {
      border-right-color: map-get($brand-colors, gray-bluey);
      right: 0;
    }
  }

  .nav--menu {
    color: #000;
    text-align: center;
    width: 100%;
    height: 100%;
    transition: all .15s ease; 
    position: fixed;
    overflow: hidden;
    z-index: 99998;
    visibility: hidden;
    opacity: 0;
    content: '';

    .nav--menu-container {
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
    }

    ul {
      list-style: none;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    li {
      font-size: 24px;
      opacity: 0;
      transform: translateY(100%);
      transition: all .3s ease;

      &.active a {
        color: $primary-color;
        opacity: 1;
      }
    }

    a {
      color: inherit;
      text-align:center;
      text-decoration: none;
      padding: 10px;
      display: inline-block;
      transition: all .2s ease;
      position: relative;
      opacity: .6;

      &:hover,
      &:focus {
        transform: scale(1.2);
        opacity: 1;

        &:after {
          transform: scaleX(1);
        }
      }

      &:after {
        background-color: currentColor;
        width: 30px;
        height: 1px;
        margin: 0 auto;
        left: 0;
        right: 0;
        bottom: 8px;
        transform: scaleX(0);
        transition: all .2s ease;
        position: absolute;
        content: '';
      }
    }
  } 
}

// nav active state
.nav--is-visible {
  overflow-y: hidden;

  .nav {
    .nav--brand {
      color: #000;       
    }

    .nav--toggle {
      color: #000; 
    }

    .nav--label-container {
      .nav--label {
        transform: translateY(100%);
        opacity: 0;

        &:last-of-type {
          transform: translateY(0%);
          opacity: 1;
        }
      }
    }

    .nav--menu-backdrop {
      visibility: visible;
      opacity: 1;
    }
    
    .nav--menu-bg {
      transform: scale(1);
    }

    .nav--menu {
      visibility: visible;
      opacity: 1;

      li {
        opacity: 1;
        transform: translateY(0%);

        // delay for loop 
        // increasing hypothetically without DOM elems works fine,
        // however 10 li's in DOM for example will equal to a 1 sec delay
        // until all li's are revealed, which isn't ideal. 
        @for $i from 1 through 4 {
          &:nth-child(#{$i}) {
            transition-delay:(#{($i+1)*0.1s}); 
          }
        }
      }
    }

  }
}


// ----- INTRO CONTENT ----- //

.intro-container {
  color: #fff;
  background-color: $primary-color-dark;
  text-align: center;
  width: 100%;
  height: 100vh;
  // position: fixed;

  .intro-initials,
  .intro-title {
    width: 100%;

    span {
      padding: 20px;
      display: block;
    }
  }

  .intro-initials {
    font-size: 150px;
    opacity: .1;
  }

  .intro-title {
    font-size: 30px;
    line-height: 1.2;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  // intro arrow
  .intro-arrow-container {
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    position: absolute;

    .intro-arrow {
      width: 23px;
      height: 32px;
      position: relative;

      .intro-arrow--line {
        background-color: #fff;
        width: 1px;
        height: 100%;
        bottom: 0;
        left: 11px;
        transform-origin: top;
        backface-visibility: hidden;
        position: absolute;
      }

      .intro-arrow--tip {
        background-color: #fff;
        width: 13px;
        height: 1px;
        bottom: 5px;
        position: absolute;
      }

      .intro-arrow--tip-right {
        right: 0;
        transform: rotate(-45deg);    
      }

      .intro-arrow--tip-left {
        left: 0;
        transform: rotate(45deg);    
      }
    }
  }

}

// ----- MAIN CONTENT ----- //

.main-content {
  background: white;
  width: 100%;
  // margin-top: 100vh;
  // position: absolute;
}

// ----- SECTIONS ----- // 

.section {
  padding: 50px 0;

  .section-title {
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 30px;
  }

  .section-text-container {
    margin-bottom: 30px;

    .section-title {
      margin-bottom: 5px;
    }

    p {
      margin: 0;
    }
  }

}

.section--about {
  text-align: center;

  .profile-img-container {
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 15px;
    position: relative;

    &:hover,
    &:focus {
      .profile-img {
        &:first-of-type {
          transform: scale(1);
          opacity: 1;
        }
        &:last-of-type {
          transform: scale(0);
          opacity: 0;
        }
      }
    }

    .profile-img {
      width: 80px;
      border-radius: 100%;
      transition: all .2s ease;
      display: block;

      &:first-of-type {
        transform: scale(0);
        opacity: 0;
      }

      &:last-of-type {
        top: 0;
        position: absolute;
        transform: scale(1);
        opacity: 1;
      }
    }
  }

  .section-text-container {
    margin-bottom: 0;
  }

  .about-text-container {
    vertical-align: middle;
    max-width: 580px;
    display: inline-block;
  }
}


// ----- ICON CONTAINER ----- //

.icon-container {
  display: block;
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;

  li {
    display: inline-block;
    margin: 0 3px;
  }

  a, svg {
    display: block;
  }
  a {
    position: relative;
    height: 30px;
    width: 30px;
  }

  .icon {
    fill: map-get($brand-colors, gray-bluey);

    &:hover {
      fill: darken(map-get($brand-colors, gray-bluey), 10%);
    }
  }

  svg {
    height: 100%;
    width: 100%;
  }
}

// ----- FOOTER ----- //

.footer-main {
  color: map-get($brand-colors, gray-bluey);
  width: 100%;
  padding: 15px 0;

  .footer-text {
    text-align: center;
    vertical-align: middle;
    margin-top: 0;
    margin-bottom: 8px;
  }
}


// ----- MEDIA QUERIES ----- //

@media screen and (min-width: 576px) {
  .footer-main {
    .footer-text {
      margin-bottom: 0;
      display: inline-block;
    }

    .icon-container {
      float: right;
    }
  }
}

@media screen and (min-width: 768px) {

  .section {
    padding: 100px 0;

    .section-title {
      font-size: 36px;
    }
  }

  .section--about {
    .profile-img-container {
      .profile-img {
        width: 140px;
      }
    }

    p {
      font-size: 20px;
    }
  }

}

@media screen and (min-width: 992px) {

  .section--about {
    .profile-img-container {
      margin-right: 30px;
      margin-bottom: 0;
    }

    .about-text-container {
      text-align: left;
    }
  }

}
View Compiled
var body = document.querySelector('body'),
    nav = document.querySelector('.nav'),
    navBar = document.querySelector('.nav--bar'),
    navToggle = document.querySelector('.nav--toggle'),
    navMenuIsOpen = false,
    navMenu = document.querySelector('.nav--menu'),
    navMenuBG = document.querySelector('.nav--menu-bg'),
    introInitials = document.querySelector('.intro-initials span'),
    introTitle = document.querySelector('.intro-title span'),
    introArrow = document.querySelector('.intro-arrow'),
    introArrowLine = document.querySelector('.intro-arrow--line'),
    introArrowTipRight = document.querySelector('.intro-arrow--tip-right'),
    introArrowTipLeft = document.querySelector('.intro-arrow--tip-left'),
    mainTL = new TimelineMax(),
    introTextTL = new TimelineMax(),
    introArrowTL = new TimelineMax();


  // TODO: scroll debounce
  var windowHeight = window.innerHeight,
      navBarHeight = navBar.offsetHeight,
      windowNavOffset = windowHeight-navBarHeight;

// ----- INIT ----- //

set();
init();

// smooth scroll
var scroll = new SmoothScroll('a[href*="#"]');


// ----- FUNCTIONS ----- //

function set() {
  // intro text
  introTextTL
    .set(introInitials, {autoAlpha:0, scale:2}, 0)
    .set(introTitle, {autoAlpha:0, scale:0}, 0);

  // intro arrow
  introArrowTL
    .set(introArrow, {autoAlpha:0}, 0)
    .set(introArrowLine, {scaleY:0}, 0)
    .set([introArrowTipRight, introArrowTipLeft], {scaleX:0}, 0);
}

function init() {
  
  mainTL
    .to(body, .3, {autoAlpha:1}, 0)
    .addCallback(animateIntroText, 0)
    .addCallback(animateIntroArrow, 2);
}

// intro
function animateIntroText() {
  introTextTL
    .to(introInitials, .5, {autoAlpha:1, scale:1, ease:Power4.easeIn}, 0)
    .to(introTitle, .5, {autoAlpha:1, scale:1, ease:Power4.easeOut}, .5)
    .to(introTitle, 1, {scrambleText:{text:'Web Design &amp; Development.', chars:'abcdefghijklmnopqrstuvwxyz ', speed:.15, revealDelay:.4}}, .7);

  console.log('animate intro text');
}

function animateIntroArrow() {
  introArrowTL
    .to(introArrow, 0, {autoAlpha:1}, 0)
    .to(introArrowLine, .3, {scaleY:1, ease:Power2.easeOut}, 0)
    .to([introArrowTipRight, introArrowTipLeft], .3, {scaleX:1, ease:Power2.easeOut}, .3);

  console.log('animate intro arrow');
}

// nav
function showNav() {
  navMenuIsOpen = true;

  body.classList.add('nav--is-visible');
  navToggle.classList.add('active');
  navMenu.classList.add('active');
  navMenuBG.classList.add('active');

  console.log('show nav');
}

function hideNav() {
  navMenuIsOpen = false;

  body.classList.remove('nav--is-visible');
  navToggle.classList.remove('active');
  navMenu.classList.remove('active');
  navMenuBG.classList.remove('active');

  console.log('hide nav');
}

// resize
var resizeDebounce = _.debounce(function() {
	
  // TODO: scroll debounce
  var windowHeight = window.innerHeight,
      navBarHeight = navBar.offsetHeight,
      windowNavOffset = windowHeight-navBarHeight;

  console.log('windowHeight', windowHeight);
  console.log('navBarHeight', navBarHeight);
  
}, 250);


// ----- EVENT HANDLERS ----- //

// intro - for testing only
introTitle.addEventListener('click', function(e) {
  // animateIntroText();
  // animateIntroArrow();

  introTextTL.restart();
  introArrowTL.restart();
});

// nav
navToggle.addEventListener('click', function(e) {
  !navMenuIsOpen ? showNav() : hideNav();
  console.log('navMenuIsOpen', navMenuIsOpen);  
}); 

// intro arrow
introArrow.addEventListener('click', function(e) {
  console.log('intro arrow click');
});

// keyboard controls
document.addEventListener('keydown', function(e) {
  var keyboardKeyCode = e.keyCode,
      keyboardKey = e.key;

  switch(keyboardKeyCode) {
    case 27: // esc
      if (navMenuIsOpen) {
        hideNav();
      }
      break;
  }
});

// show navbar on page scroll
document.addEventListener('scroll', function(e) {
  var scrollPosition = pageYOffset;

  if (scrollPosition > windowNavOffset) {
    nav.classList.add('nav--solid');
  } else {
    nav.classList.remove('nav--solid');
  }
});

// resize
window.addEventListener('resize', resizeDebounce);

// enable hover on touch
document.addEventListener('touchstart', function(){}, true);

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js
  4. //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin.min.js
  5. https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/15.1.3/smooth-scroll.min.js