<div class="fixed">
  <p id="text" class="text">Techs: </p>
  <div class="bar"></div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}
.fixed {
  display: flex;
  position: absolute;
  left: 5%;
}

.text {
  color: white;
  font-family: 'Ubuntu', sans-serif;
  font-size: 5vw;
}

.bar {
  width: 1px;
  height: 5vw;
  background: white;
  animation: barAnimate 500ms infinite linear;
}

@keyframes barAnimate {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
const title = document.getElementById('text');
const texts = ['Html', 'Css', 'JavaScript', 'Typescript', 'React', 'React Native', 'Node'];

const write = (text, done) => {
    const char = text.split('').reverse();
    const typer = setInterval(() => {
        if (!char.length) {
            clearInterval(typer);
            return setTimeout(done, 500);
        }
        const next = char.pop();
        title.innerHTML += next;
    }, 100);
};

const clean = (then, text, done) => {
    let nr = text.length;
    const typer = setInterval(() => {
        if (nr-- == 0) {
            clearInterval(typer);
            return done();
        }
        title.innerHTML = then + text.slice(0, nr);
    }, 100);
};

const start = (texts) => {
    let atual = -1;
    const next = () => {
        atual < texts.length - 1 ? atual++ : atual = 0;
        const text = texts[atual];
        const textThen = title.innerHTML;
        write(text, () => {
            clean(textThen, text, next);
        });
    }
    next();
};

start(texts);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.