Personal Website - Anime.js

index.html

<div class="loader"></div>
<div class="container">
  <div class="name">
    <div class="left">
      <span> H</span>
      <span id="name">ugo</span>
    </div>

    <div class="right">
      <span> C</span>
      <span id="name">arvalho</span>
    </div>
  </div>
  <div class="arrow">
    <i id="arrow" class="fa fa-angle-right"></i></div>
  <div class="intro">
    <div class="wrapper">
      <div class="close">
        <i class="fa fa-remove"></i></div>
      <div class="text">
        <p class="about-me">
          Hi there. My name is Hugo Carvalho. </p>
        <p>I am a front end developer! </p>
        <p>
          You can find my work on</p>
        <p id="social" class="buttons">
          <a href="https://codepen.io//" target="_blank"> <i class="fa fa-codepen"></i></a>
          <a href="https://github.com/" target="_blank"> <i class="fa fa-github"></i></a>

        </p>

        <p id="work" class="buttons">Work with me?
          <a href="mailto:shasha26789@gmail.com"><i class="fa fa-envelope"></i></a>

        </p>

      </div>

    </div>
  </div>
</div>

personal-website-anime-js.markdown

Personal Website - Anime.js

A Pen by Hugo Carvalho on CodePen.

License.

script.js

$(".buttons").mouseover(function(){
  $(this).addClass("animated jello");
});

$(".buttons").mouseout(function(){
  $(this).removeClass("animated jello");
});




setTimeout(function() {
  $(".loader").css("display", "none");
  loaded.play();
}, 2500);

width = $(window).width();

if (width <= 700) {
  $(".name").click(function() {
    $(".intro").css("right", "0");
    // $(".text").css("transform", "translateX(20px)")
    $(".wrapper").css("z-index", "20");
  });

  $(".close").click(function() {
    $(".intro").css("right", "-1000px");
  });

}

$("#arrow").click(function() {
  open.play();
  about.play();

  if (width <= 700) {
    $(".wrapper").css("z-index", "20");
    $(".intro").css("transform", "translateX:100px")
  }
});

$(".close").click(function() {
  close.play();
})

var loaded = anime({
  targets: '.name',
  scale: [{
    value: 3,
    duration: 100,
    elasticity: 100
  }, {
    value: 1,
    duration: 500,
    elasticity: 100
  }],
  duration: 4000,
  autoplay: false,

});

var open = anime({
  targets: '.intro',
  translateX: -1000,
  duration: 1000,
  autoplay: false
});

var close = anime({
  targets: '.intro',
  translateX: 1800,
  duration: 500,
  autoplay: false,
});

var about = anime({
  targets: '.text',
  translateX: [{
    value: -200,
    duration: 100,
    elasticity: 100
  }, {
    value: 0,
    duration: 500,
    elasticity: 100
  }],
  delay: 200
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.0/anime.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900');
$main: #6E7DAB;
$second: #071E22;
* {
  margin: 0;
  padding: 0;
}

body {
  background: linear-gradient(46deg, #b326e8, #0054a6, #2f8e1a);
background-size: 600% 600%;

-webkit-animation: AnimationName 60s ease infinite;
-moz-animation: AnimationName 60s ease infinite;
-o-animation: AnimationName 60s ease infinite;
animation: AnimationName 60s ease infinite;

@-webkit-keyframes AnimationName {
    0%{background-position:73% 0%}
    50%{background-position:28% 100%}
    100%{background-position:73% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:73% 0%}
    50%{background-position:28% 100%}
    100%{background-position:73% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:73% 0%}
    50%{background-position:28% 100%}
    100%{background-position:73% 0%}
}
@keyframes AnimationName { 
    0%{background-position:73% 0%}
    50%{background-position:28% 100%}
    100%{background-position:73% 0%}
}
  overflow: hidden;
}

.loader {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  overflow: hidden;
  &:before {
    position: absolute;
    top: 50%;
    content: '';
    width: 30px;
    height: 30px;
    border: 3px solid;
    border-color: transparent transparent $main transparent;
    border-radius: 100%;
    animation: 1s spin ease infinite;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(1turn);
  }
}

.container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  > * {
    margin: 5px;
  }
  font-size: 40px;
  color: $main;
}

.name {
  display: flex;
}

.left,
.right {
  z-index: 10;
  position: relative;
  width: 30px;
  height: 60px;
  overflow: hidden;
  color: #071E22;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 700;
  font-size: 50px;
  transition: width 0.4s 0.1s;
}

.right:hover,
.left:hover {
  transition: width 0.4s 0.1s;
}

.left:hover {
  width: 110px;
}

.right:hover {
  width: 200px;
}

span {
  position: absolute;
}

#name {
  left: 30px;
}

.intro {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  background: $main;
  width: 40%;
  right: -1000px;
  margin: 0;
  height: 100vh;
  color: $second;
  font-family: 'Source Sans Pro', sans-serif;
}

.wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  > * {
    margin: 10px;
  }
}

.close {
  display: flex;
  justify-content: flex-end;
  width: 60%;
  font-size: 20px;
  cursor: pointer;
}

.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 63%;
  // height: 100%;
  font-size: 24px;
  transform: translateX(20px);
  font-weight: 200;
  letter-spacing: 1px;
  a {
    position: relative;
    color: #FBD1A2;
    text-decoration: none;
  }
  > * {
    margin: 10px 0;
  }
}

.about-me {
  text-align: center;
  line-height: 45px;
}

#social {
  font-size: 29px;
  > * {
    margin: 5px
  }
}

#work {
  font-size: 20px;
  margin: 40px 0;
  > * {
    margin: 5px
  }
}

.out {
  transition: 1s all ease;
  transform: translateX(450px);
}

.arrow {
  display: flex;
  align-items: center;
  height: 40px;
  animation: 0.5s bounce ease infinite;
  cursor: pointer;
}

@keyframes bounce {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(0);
  }
}

@media (max-width: 700px) {
  
  .loader {
    display: none;
  }
  
  .container {
    width: auto;
  }
  
  .intro {
    width: 100%;
  }
  
  .wrapper > * {
    margin: 0;
  }
  
  .text {
    width: 100%;
   display: block;
    text-align: center;
    z-index: -1;
    margin: 0;
    transform: translateX(0);
    font-weight: 400;
    font-size: 20px;
  }
  
  .close {
    width: 90%;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />