<header class="position-fixed bg-white page-header">
  <nav class="d-flex justify-content-between align-items-center">
    <a href="" class="text-peach logo">
      <strong>DM</strong>
    </a>
    <ul class="d-flex">
      <li><a href="#skills">Skills</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>
<section class="d-flex justify-content-center align-items-center vh-100">
  <h1 class="text-center h1">We build awesome digital experiences
    <span class="d-block text-gray">using the latest web technologies</span>
  </h1>
  <div class="position-absolute scroll-down">Scroll Down</div>
</section>
<section class="d-flex vh-100 bg-lightwhite" id="skills">
  <div class="position-relative flex-grow-1 bg-img"></div>
  <div class="d-flex justify-content-center align-items-center flex-grow-1">
    <div class="position-relative chart-wrapper">
      <ul class="chart-skills">
        <li class="position-relative">
          <span>CSS</span>
        </li>
        <li class="position-relative">
          <span>HTML</span>
        </li>
        <li class="position-relative">
          <span>JavaScript</span>
        </li>
        <li class="position-relative">
          <span>Python</span>
        </li>
        <li class="position-relative">
          <span>Ruby</span>
        </li>
      </ul>
      <ul class="d-flex position-absolute chart-levels">
        <li class="flex-grow-1 position-relative">
          <span class="position-absolute">Novice</span>
        </li>
        <li class="flex-grow-1 position-relative">
          <span class="position-absolute">Beginner</span>
        </li>
        <li class="flex-grow-1 position-relative">
          <span class="position-absolute">Intermediate</span>
        </li>
        <li class="flex-grow-1 position-relative">
          <span class="position-absolute">Advanced</span>
        </li>
        <li class="flex-grow-1 position-relative">
          <span class="position-absolute">Expert</span>
        </li>
      </ul>
    </div>
  </div>
</section>
<section class="d-flex flex-column justify-content-center align-items-center vh-100 position-relative" id="contact">
  <h2 class="h1">let’s work together!</h2>
  <a href="mailto@hello@digitalmonsters.com" class="text-gray h2">hello@digitalmonsters.com</a>
  <small class="position-absolute creator">Made with <span>❤</span> by <a href="http://georgemartsoukos.com/" target="_blank">George Martsoukos</a>
  </small>
</section>

/* RESET RULES & HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --gray: #cbcfd3;
  --white: white;
  --black: #1a1a1a;
  --lightwhite: whitesmoke;
  --lightblue: #009dd3;
  --peach: #ff9469;
  --transition-delay: 0.3s;
  --transition-delay-step: 0.3s;
  --skills-width: 120px;
}

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

ul {
  list-style: none;
}

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

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.align-items-end {
  align-items: flex-end;
}

.flex-grow-1 {
  flex-grow: 1;
}

.vh-100 {
  height: 100vh;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.text-center {
  text-align: center;
}

.text-gray {
  color: var(--gray);
}

.text-lightblue {
  color: var(--lightblue);
}

.text-peach {
  color: var(--peach);
}

.bg-white {
  background: var(--white);
}

.bg-lightwhite {
  background: var(--lightwhite);
}

.h1 {
  font-size: 2.5rem;
}

.h2 {
  font-size: 2rem;
}

/* BODY
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
  font: 1rem/1.2 "Hind Guntur", sans-serif;
  color: var(--black);
}

/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-header {
  left: 0;
  right: 0;
  top: 0;
  padding: 20px;
  z-index: 10;
}

.page-header .logo {
  font-size: 1.7rem;
}

.page-header li:not(:last-child) {
  margin-right: 20px;
}

.page-header a {
  font-size: 1.1rem;
}

/* SCROLL-DOWN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.scroll-down {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  text-transform: uppercase;
  transition: all 0.5s;
}

.scroll-down.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.scroll-down::after {
  content: "";
  display: block;
  margin: 3px auto 0;
  width: 1px;
  height: 60px;
  background: var(--black);
  transform-origin: bottom;
  animation: pulse 3.5s infinite linear;
}

/* BG IMG
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bg-img {
  background: #fff
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/code-wp.jpg)
    no-repeat center / cover;
}

.bg-img::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 7rem;
  background: var(--lightwhite);
  transform: skew(-5deg);
  transform-origin: left bottom;
}

/* CHART
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chart-wrapper {
  width: 95%;
  max-width: 500px;
}

.chart-wrapper .chart-skills li::before,
.chart-wrapper .chart-skills li::after {
  content: "";
  position: absolute;
  top: 25%;
  left: var(--skills-width);
  height: 50%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 2;
}

.chart-wrapper .chart-skills li::after {
  width: calc(100% - var(--skills-width));
  background: rgba(211, 211, 211, 0.3);
}

.chart-wrapper .chart-skills li::before {
  width: 0;
  background: var(--lightblue);
  transition: width 0.65s ease-out;
}

.chart-wrapper.in-view .chart-skills li:nth-child(1)::before {
  width: calc(90% - var(--skills-width));
  transition-delay: var(--transition-delay);
}

.chart-wrapper.in-view .chart-skills li:nth-child(2)::before {
  width: calc(75% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step)
  );
}

.chart-wrapper.in-view .chart-skills li:nth-child(3)::before {
  width: calc(62% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 2
  );
}

.chart-wrapper.in-view .chart-skills li:nth-child(4)::before {
  width: calc(49% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 3
  );
}

.chart-wrapper.in-view .chart-skills li:nth-child(5)::before {
  width: calc(38% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 4
  );
}

.chart-wrapper .chart-skills span {
  display: inline-block;
  width: var(--skills-width);
  padding: 15px;
}

.chart-wrapper .chart-levels {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding-left: var(--skills-width);
}

.chart-wrapper .chart-levels li {
  border-right: 1px solid rgba(211, 211, 211, 0.3);
}

.chart-wrapper .chart-levels li:last-child {
  border-right: 0;
}

.chart-wrapper .chart-levels span {
  bottom: 0;
  transform: translateY(50px) rotate(45deg);
  padding: 10px;
  width: 100%;
}

/* CREATOR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.creator {
  right: 20px;
  bottom: 20px;
}

.creator span {
  color: #e31b23;
}

/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@keyframes pulse {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.65);
  }
  100% {
    transform: scaleY(1);
  }
}

/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 900px) {
  .bg-img {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  html {
    font-size: 12px;
  }
}

const chartWrapper = document.querySelector(".chart-wrapper");
const scrollDown = document.querySelector(".scroll-down");

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

window.addEventListener("scroll", scrollHandler);

function scrollHandler() {
  window.pageYOffset > 0
    ? scrollDown.classList.add("is-hidden")
    : scrollDown.classList.remove("is-hidden");
  if (isElementInViewport(chartWrapper)) chartWrapper.classList.add("in-view");
}