Станислав

Довольно странно брать чужие работы, портить их и спрашивать "ребят, а как вам моя верстка?" Вы из HTML хотя бы копирайт убрали бы :)

Почему я это пишу? Да, конечно, нужно учится, но на своем опыте, а не чужом. Для меня и большинства других людей, которые когда либо были связаны с дизайном - самое сложное это найти свой стиль. А в вашем случаи вы берете чужой стиль. Нужно научится не верстать по чьим то работам, а придумывать своё - это главное и самое сложное. В том, чтобы расставить HTML теги и задать стили - нет ничего сложного.

Нашлось решение на чистом JS и CSS.

JS

function animateWord(word){
    let text = word.dataset.text;
    text.split('').forEach((letter,ind) => {
    let div = document.createElement('div');
    div.innerText = letter;
    setTimeout(()=> word.append(div),ind*200);
  })
}

const word = document.querySelector('.word');
animateWord(word);

CSS

@keyframes letter{
  0% {opacity: 0; transform: translateY(-15px)}
  100% {opacity: 1; transform: translateY(0px)}
}

.word div {
  animation: letter 0.5s;  
  display: inline-block;
}

HTML, текст в атрибуте "data-text".
<div class="word" data-text='Hello'></div>

Пусть на сайте примере и выглядит немного не так и текст не в атрибуте HTML тега, но можно стилизовать под себя.