<h1 class="words-wrapper">
  I want to learn <span class="css">CSS</span> and
  <span class="words">
    <span class="current" data-bg-color="#ffc703" data-color="#000">React</span>
    <span data-bg-color="#004e98" data-color="#fff">TypeScript</span>
    <span data-bg-color="#8cb369" data-color="#000">Python</span>
    <span data-bg-color="#104911" data-color="#fff">PrestaShop</span>
    <span data-bg-color="#b8c0ff" data-color="#000">Ruby</span>
    <span data-bg-color="#e71d36" data-color="#fff">Angular</span>
    <span data-bg-color="#e2c044" data-color="#000">WordPress</span>
    <span data-bg-color="#065a82" data-color="#fff">Node</span>
  </span>.
</h1>
<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&display=swap");

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Kanit", sans-serif;
  height: 100vh;
}

.words-wrapper {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}

.words-wrapper .css {
  color: #2ec4b6;
}

.words-wrapper .words {
  display: inline-grid;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--color, #000);
  background: var(--color-bg, #ffc703);
}

.words-wrapper .words span {
  grid-area: 1/1;
  display: none;
}

.words-wrapper .words span.current {
  display: block;
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 20px;
  display: flex;
  align-items: center;
  padding: 5px;
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

const wrapper = document.querySelector(".words");
const CURRENT_CLASS = "current";

setInterval(() => {
  const currentWord = wrapper.querySelector("span.current");
  const nextWord = currentWord.nextElementSibling
    ? currentWord.nextElementSibling
    : wrapper.firstElementChild;
  currentWord.classList.remove(CURRENT_CLASS);
  nextWord.classList.add(CURRENT_CLASS);
  wrapper.style.setProperty("--color", nextWord.dataset.color);
  wrapper.style.setProperty("--color-bg", nextWord.dataset.bgColor);
}, 1500);