<!-- this is the markup. you can change the details (your own name, your own avatar etc.) but don’t change the basic structure! -->

<aside class="profile-card">

    <header>

        <!-- here’s the avatar -->
        <a href="#!">
            <img src="http://pimmey.com/envato/yegor.jpg" alt="Yegor">
        </a>

        <!-- the username -->
        <h1>Yegor Borisenco</h1>

        <!-- and role or location -->
        <h2>Full Stack Developer</h2>

    </header>

    <!-- bit of a bio; who are you? -->
    <div class="profile-bio">
        <p>
            Yegor enjoys a good design in everything, be it a user interface or a code pattern.
            He’s also a big fan of all flying remote control toys, especially quadcopters and hexacopters.
            His homepage &mdash; <a href="http://pimmey.com">pimmey.com</a>.
        </p>
    </div>

    <!-- some social links to show off -->
    <ul class="profile-social-links">

        <!-- twitter - el clásico  -->
        <li>
            <a href="https://twitter.com/pimmeythemes">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg">
            </a>
        </li>

        <!-- envato – use this one to link to your marketplace profile -->
        <li>
            <a href="http://themeforest.net/user/pimmey">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-envato.svg">
            </a>
        </li>

        <!-- codepen - your codepen profile-->
        <li>
            <a href="https://codepen.io/pimmey/">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-codepen.svg">
            </a>
        </li>

        <!-- add or remove social profiles as you see fit -->

    </ul>

</aside>
<!-- that’s all folks! -->

@import 'bourbon';
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);

$easing: cubic-bezier(0.075, 0.820, 0.165, 1.000);

$white: #fefefe;
$black: #222222;
$blue: #2196f3;

html,
body {
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: $white;
    color: $black;
}

* {
    @include prefixer(box-sizing, border-box, webkit moz spec);
}

@include keyframes(lineAppear) {
    from {
        width: 0;
        margin-left: 50%;
    } to {
        opacity: 1;
        width: 100%;
        margin-left: 0;
    }
}

@include keyframes(revealHeader) {
    from {
        opacity: 0;
        @include transform(translate3d(0, 320px, 0));
    } to {
        opacity: 1;
        @include transform(translate3d(0, 0, 0));
      }
}

@include keyframes(revealBio) {
    to {
        opacity: 1;
    }
}

@include keyframes(removeArtifacts) {
    to {
        height: 1px;
        width: 1px;
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: Roboto, sans-serif;
}

h1,
h2 {
    margin: 0;
}

h1 {
    margin-top: 20px;
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -2px;
  
    &:first-letter {
        letter-spacing: -6px;
    }
}

h2 {
    font-size: 24px;
    font-weight: 300;
}

a,
a:visited {
    color: $blue;
    text-decoration: none;
}

aside {
    width: 320px;
    margin: 150px auto 0;

    &:after {
        z-index: 11; // highest
        content: '';
        display: block;
        width: 320px;
        height: 320px;
        position: absolute;
        top: 472px;
        background: $white;
        @include animation(removeArtifacts .01s linear 1s both);
    }

    &:hover {
        header {
            @include transform(rotate(90deg));
            @include transition(all .5s $easing .3s);
        }

        header:after {
            top: 0;
            height: 100%;
            @include transition-delay(0s);
        }

        .profile-social-links li {
            img {
                @include transform(scale(1));
            }

            &:nth-of-type(1) img {
                @include transition-delay(.8s);
            }

            &:nth-of-type(2) img {
                @include transition-delay(.9s);
            }

            &:nth-of-type(3) img {
                @include transition-delay(1s);
            }

            &:hover:after,
            &:hover:before {
                @include transform(scale(1));
            }

            &:hover:before {
                @include transition-delay(.15s);
            }
        }
    }
}

header {
    will-change: transform;
    z-index: 10; // above .profile-social-links, below aside:after
    position: relative;
    width: 320px;
    height: 320px;
    text-align: center;
    background: $white;

    @include transform(rotate(0deg));
    @include transform-origin(0 0);
    @include transition(all .2s $easing);

    a img,
    h1,
    h2 {
        @include animation(revealHeader .75s $easing .5s both);
    }

    a {
        cursor: default;
    }

    img {
        border-radius: 100%;
        width: 200px;
        height: 200px;
    }

    &:after {
        will-change: top, height;
        content: '';
        position: absolute;
        top: 100%;
        display: block;
        width: 100%;
        height: 1px;
        background: $white;
        border-top: 2px solid $black;
        @include transition(all .2s $easing .2s);
        @include animation(lineAppear 1s $easing);
    }
}

.profile-bio {
    opacity: 0;
    z-index: 8; // lowest
    width: 320px;
    height: 320px;
    position: absolute;
    top: 150px;
    left: 50%;
    margin-left: -160px;
    @include animation(revealBio 1s ease .5s both);

    p {
        font-size: 18px;
        font-weight: 300;
        line-height: 24px;
        padding: 20px;

        a {
            border-bottom: 1px solid transparentize($blue, .5);
            padding-bottom: 2px;
            @include transition(border-bottom-color .3s linear);

            &:hover {
                border-bottom-color: $blue;
            }
        }
    }
}

.profile-social-links {
    z-index: 9; // below header, above .profile-bio
    position: relative;
    top: -70px;
    margin: 0;
    padding: 0 20px;

    li {
        position: relative;
        display: block;
        width: 30px;
        height: 30px;
        margin-right: 10px;
        float: left;

        &:nth-of-type(1) {
            &:after {
                background: #55acee;
            }

            &:before,
            img {
                background: #d3e4f1;
            }
        }

        &:nth-of-type(2) {
            &:after {
                background: #82b541;
            }

            &:before,
            img {
                background: #cae5a9;
            }
        }

        &:nth-of-type(3) {
            &:after {
                background: $black;
            }

            &:before,
            img {
                background: #e5e5e5;
            }
        }

        img {
            will-change: transform;
            width: 30px;
            border-radius: 100%;
            padding: 3px;
            @include transform(scale(0));
            @include transition(all .3s $easing);
        }

        &:after,
        &:before {
            content: '';
            z-index: -1;
            position: absolute;
            display: block;
            border-radius: 100%;
            @include transform(scale(0));
            @include transition-property(transform);
            @include transition-duration(.3s);
            @include transition-timing-function($easing);
        }

        &:after {
            width: 34px;
            height: 34px;
            top: -2px;
            left: -2px;
        }

        &:before {
            width: 40px;
            height: 40px;
            top: -5px;
            left: -5px;
        }
    }
}