<div class="marquee">
  <h1>Freelance Web Designer & Developer &#x2022; </h1>
</div>

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

/* =======================================
General Styling
======================================= */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  background-color: #111;
  color: #f1f1f1;
  font-family: "Inter", sans-serif;
}

/* =======================================
The juicy stuff
======================================= */
.marquee {
  display: flex;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  gap: 1rem;
}
.marquee h1 {
  font-size: 4rem;
  white-space: nowrap;
  text-transform: uppercase;
  align-self: center;
}

function marquee(selector, speed) {
  const parentSelector = document.querySelector(selector);
  const clone = parentSelector.innerHTML;
  const firstElement = parentSelector.children[0];
  let i = 0;

  parentSelector.insertAdjacentHTML("beforeend", clone);
  parentSelector.insertAdjacentHTML("beforeend", clone);

  setInterval(function () {
    firstElement.style.marginLeft = `-${i}px`;
    if (i > firstElement.clientWidth) {
      i = 0;
    }
    i = i + speed;
  }, 0);
}

//after window is completed load
//1 class selector for marquee
//2 marquee speed 0.2
window.addEventListener("load", marquee(".marquee", 0.2));