.text-animation {
  font-size: 34px;
  font-weight: 600;
  min-width: 280px;
}
.text-animation span {
  position: relative;
  width: 100%;
  white-space: nowrap;
}
.text-animation span::before {
  content: "Web Developer";
  color: var(--main-color);
  animation: words 20s infinite;
}
.text-animation span::after {
  content: "";
  background-color: var(--bg-color);
  position: absolute;
  width: calc(100% + 8px);
  height: 100%;
  border-left: 3px solid var(--bg-color);
  right: -8px;
  animation: cursor 0.6s infinite, typing 20s steps(14) infinite;
}
@keyframes cursor {
  to {
    border-left: 2px solid var(--main-color);
  }
}
@keyframes words {
  0%,
  20% {
    content: "Developer";
  }
  21%,
  40% {
    content: "Junior Web Developer";
  }
  41%,
  60% {
    content: "Designer";
  }
  61%,
  80% {
    content: "Constant Learner";
  }
  81%,
  100% {
    content: "The one you need";
  }
}
@keyframes typing {
  10%,
  15%,
  30%,
  35%,
  50%,
  55%,
  70%,
  75%,
  90%,
  95% {
    width: 0;
  }
  5%,
  20%,
  25%,
  40%,
  45%,
  60%,
  65%,
  80%,
  85% {
    width: calc(100% + 8px);
  }
}