Skill Badge Belt

<div class="nuda-mq2-skill-belt" aria-hidden="true">
  <div class="nuda-mq2-skill-belt__track">
    <div class="nuda-mq2-skill-belt__badge"><span class="nuda-mq2-skill-belt__dot"></span>JavaScript</div>
    <div class="nuda-mq2-skill-belt__badge"><span class="nuda-mq2-skill-belt__dot"></span>TypeScript</div>
    <div class="nuda-mq2-skill-belt__badge"><span class="nuda-mq2-skill-belt__dot"></span>React</div>
    <div class="nuda-mq2-skill-belt__badge"><span class="nuda-mq2-skill-belt__dot"></span>CSS</div>
    <div class="nuda-mq2-skill-belt__badge"><span class="nuda-mq2-skill-belt__dot"></span>Node</div>
    <!-- Duplicate the badges above for a seamless loop -->
    <div class="nuda-mq2-skill-belt__badge"><span class="nuda-mq2-skill-belt__dot"></span>JavaScript</div>
    <div class="nuda-mq2-skill-belt__badge"><span class="nuda-mq2-skill-belt__dot"></span>TypeScript</div>
    <div class="nuda-mq2-skill-belt__badge"><span class="nuda-mq2-skill-belt__dot"></span>React</div>
    <div class="nuda-mq2-skill-belt__badge"><span class="nuda-mq2-skill-belt__dot"></span>CSS</div>
    <div class="nuda-mq2-skill-belt__badge"><span class="nuda-mq2-skill-belt__dot"></span>Node</div>
  </div>
</div>

.nuda-mq2-skill-belt {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 280px;
  border-radius: 8px;
  padding: 10px 0;
  background-color: #101012;
  background-image: repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 8px,transparent 8px 16px);
  background-size: 200% 100%;
  animation: nuda-mq2-skill-belt-belt 3s linear infinite;
}

.nuda-mq2-skill-belt__track {
  position: relative;
  display: flex;
  width: max-content;
  gap: 10px;
  padding: 0 12px;
  animation: nuda-mq2-skill-belt-track 16s linear infinite;
}

.nuda-mq2-skill-belt__badge {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: .6rem;
  font-weight: 600;
  color: #e5e5e5;
  white-space: nowrap;
}

.nuda-mq2-skill-belt__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e4ff54;
  flex: none;
}

.nuda-mq2-skill-belt:hover .nuda-mq2-skill-belt__track {
  animation-play-state: paused;
}

@keyframes nuda-mq2-skill-belt-belt {
  to {
    background-position: 200% 0;
  }
}

@keyframes nuda-mq2-skill-belt-track {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-mq2-skill-belt {
    animation: none;
  }
  .nuda-mq2-skill-belt__track {
    animation: none;
  }
}