<div class="container">
  <h4>
    I am an arts leader and political historian who—
    <span class="txt-type" data-wait="3000" data-words='["in partnership with cultural and educational institutions, arts nonprofits, and federal, state, and municipal governments"]'></span>
  has organized over 20 exhibitions and special projects, and presented over 50 lectures and public talks related to Black and African art, culture, and society in the 20th century.
  </h4>
  <h4>Listed <a href="/home-1">here</a> are a few</h4>
</div>
<style>
div.container:has(.txt-type) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.txt-type > .txt {
  border-right: 0.08rem solid #3042C3;
  padding-right: 2px;
  color: #3042C3;
  animation: blink 0.6s infinite;
}
div.container:has(.txt-type) h4 {
    margin: 0px;
    color: #073D27;
}
div.container:has(.txt-type) h4 a {color: #fff;}
@keyframes blink {
  0% {
    border-right: 0.08rem solid rgba(48, 66, 195, 1);
  }
  100% {
    border-right: 0.08rem solid rgba(48, 66, 195, 0.2);
  }
}
</style>
<script>
class TypeWriter {
  constructor(txtElement, words, wait = 3000) {
    this.txtElement = txtElement;
    this.words = words;
    this.txt = "";
    this.wordIndex = 0;
    this.wait = parseInt(wait, 10);
    this.type();
    this.isDeleting = false;
  }
  type() {
    const current = this.wordIndex % this.words.length;
    const fullTxt = this.words[current];
    if (this.isDeleting) {
      this.txt = fullTxt.substring(0, this.txt.length - 1);
    } else {
      this.txt = fullTxt.substring(0, this.txt.length + 1);
    }
    this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;
    let typeSpeed = 50;
    if (this.isDeleting) {
      typeSpeed /= 2;
    }
    if (!this.isDeleting && this.txt === fullTxt) {
      if (this.wordIndex >= this.words.length - 1) return;
      typeSpeed = this.wait;
      this.isDeleting = true;
    } else if (this.isDeleting && this.txt === "") {
      this.isDeleting = false;
      this.wordIndex++;
      typeSpeed = 500;
    }
    setTimeout(() => this.type(), typeSpeed);
  }
}
document.addEventListener("DOMContentLoaded", init);
function init() {
  const txtElement = document.querySelector(".txt-type");
  const words = JSON.parse(txtElement.getAttribute("data-words"));
  const wait = txtElement.getAttribute("data-wait");
  new TypeWriter(txtElement, words, wait);
}
</script>