<main>
   <section id="skills" class="toad-fullscreen">
        <article class="skills">
            <div class="t-6">
                <p>HTML5<span></span><span class="skills"></span></p>
            </div>
            <div class="t-6">
                <p>CSS3<span></span><span class="skills"></span></p>
            </div>
            
            <div class="t-6">
                <p>JS / jQuery<span></span><span class="skills"></span></p>
            </div>
            <div class="t-6">
                <p>Vue.js<span></span><span class="skills"></span></p>
            </div>
            
            <div class="t-6">
                <p>PHP / MySQL<span></span><span class="skills"></span></p>
            </div>
            <div class="t-6">
                <p>Laravel<span></span><span class="skills"></span></p>
            </div>
            
            <div class="t-6">
                <p>Photoshop<span></span><span class="skills"></span></p>
            </div>
            <div class="t-6">
                <p>Illustrator<span></span><span class="skills"></span></p>
            </div>
        </article>
    </section>
</main>

// COLORS

@b: #5aa8e8;
@b-rgba: rgba(108,90,232,0.25);
@b-skills: #5E95E8;
@w: #fff;

// TRANSITIONS

@tr01: all .5s ease-in-out;
@bezier: cubic-bezier(.17,.67,0,1);

// SKILL BARS

@skills01: 90%;
@skills02: 90%;
@skills03: 80%;
@skills04: 70%;
@skills05: 75%;
@skills06: 60%;
@skills07: 80%;
@skills08: 75%;

.skills {
    animation-name: skills;
}

html {
  font-size: 100%;
  font-family: sans-serif; 
}

body {
  background: @b;
}

html, body, main {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

main {
  overflow: hidden;
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

section {
  background: @b;

  article.skills {
    width: 500px;
    height: auto;

    p {
      z-index: 2;
      color: @w;
      padding: 10px;
      position: relative;
      box-sizing: border-box;
      overflow: hidden;
    }

    div {
      //

      span:nth-child(1) {
        z-index: -2;
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        margin: auto;
        background: @w;
        height: 100%;
        width: 100%;
      }

      span:nth-child(2) {
        z-index: -1;
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        background: @b-skills;
        height: 100%;
      }
    }

    div:nth-child(1) {
      //

      span:nth-child(2) {
        width: @skills01;
        animation-delay: 0;
      }
    }

    div:nth-child(2) {
      //

      span:nth-child(2) {
        width: @skills02;
        animation-delay: 0.05s;
      }
    }

    div:nth-child(3) {
      //

      span:nth-child(2) {
        width: @skills03;
        animation-delay: 0.1s;
      }
    }

    div:nth-child(4) {
      //

      span:nth-child(2) {
        width: @skills04;
        animation-delay: 0.15s;
      }
    }

    div:nth-child(5) {
      //

      span:nth-child(2) {
        width: @skills05;
        animation-delay: 0.2s;
      }
    }

    div:nth-child(6) {
      //

      span:nth-child(2) {
        width: @skills06;
        animation-delay: 0.25s;
      }
    }

    div:nth-child(7) {
      //

      span:nth-child(2) {
        width: @skills07;
        animation-delay: 0.3s;
      }
    }

    div:nth-child(8) {
      //

      span:nth-child(2) {
        width: @skills08;
        animation-delay: 0.35s;
      }
    }
  }

  &:before {
    position: absolute;
    top: -250px; left: -350px;
    width: 500px;
    height: 500px;
    content: '';
    background: @b-rgba;
    transform: rotate(30deg);
  }

  &:after {
    position: absolute;
    bottom: -250px; right: -350px;
    width: 500px;
    height: 500px;
    content: '';
    background:@b-rgba;
    transform: rotate(30deg);
  }
}

.skills {
    animation: skills 1.25s @bezier;
}

@keyframes skills {
    0% {
        left: -500px;
        opacity: 0;
    }
    100% {
        left: 0;
        opacity: 1;
    }
}

// http://tonyevariste.com