<div id="links">
  <button class="purple">About</button>
  <button class="blue">Portfolio</button>
  <button class="green">Contact</button>
</div>
<div id="content">
<div id="name">
  <span class="logo">
    <span id="a" class="letter">A</span>
    <span id="l" class="letter">L</span>
    <span id="i" class="letter">I</span>
  </span>
  <span class="logo">
    <span id="s" class="letter">S</span>
    <span id="p" class="letter">P</span>
    <span id="i2" class="letter">I</span>
    <span id="t" class="letter">T</span>
    <span id="t2" class="letter">T</span>
    <span id="e" class="letter">E</span>
    <span id="l2" class="letter">L</span>
  </span>
</div>

<p>I really like writing code.</p>
<p>Especially in Python and JavaScript.</p>
</div>
@import url('https://fonts.googleapis.com/css?family=Lato:400,800');

body {
  font-family: monospace;
  width: 100%;
}

p {
  margin-left: 30px;
  margin-bottom: -10px;
  font-size: 20px;
}

button {
  font-size: 1em;
  font-family: monospace;
  background-color: #f8bbd0;
  cursor: pointer;
  border-width: 0em;
  padding: .5em;
  border-style: solid;
  color: #fff;
}

.purple {
  background-color: #651fff;
}

.blue {
  background-color: #ff8f00;
}

.green {
  background-color: #4caf50;
}

#links {
  font-size: 20px;
  margin-top: 30px;
  margin-right: 60px;
  text-align: right;
}

#name {
  margin-top: 50px;
  margin-bottom: 30px;
}

.logo {
  margin-left: 40px;
  display: block;
}

.letter {
  font-size: 200px;
  line-height: 110px;
  font-family: 'Lato', sans-serif;
  font-weight: 800;
  letter-spacing: -20px;
  mix-blend-mode: color-burn;
  position: relative;
  transition: top ease 0.1s;
  transition-delay: 2s;
  opacity: 0.9;
}

#a {
  color: #ef5350;
}

#l {
  color: #ab47bc;
}

#i {
  color: #651fff;
}

#i2 {
  color: #3949ab;
}

#s {
  color: #2196f3;
}

#p {
  color: #00bcd4;
}

#t {
  color: #4caf50;
}

#t2 {
  color: #ffc107;
}

#e {
  color: #ff80ab;
}

#l2 {
  color: #ff8f00;  
}

@keyframes mymove {
    0% {
      top: 0px;
    }
    50% {
      top: 50px;
    }
    100% {
      top: 0px;
  }
}
 
.hovered {
  animation: mymove 3s;
}

::selection {
  background: #b39ddb;
}
Array.from(document.getElementsByClassName('letter')).forEach(letter => {
  letter.addEventListener("mouseover", (e) => {
    letter.classList.add("hovered")
  })
  letter.addEventListener("animationend", (e) => {
    letter.classList.remove("hovered")
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js