/* global React */

// Stacked asymmetric display name with animated seam bar.
// To change the name, edit the four row spans below.
function NameTitle() {
  return (
    <h1>
      <span className="row">
        <span>SALEH</span>
      </span>
      <span className="row indent-1">
        <span className="seam" aria-hidden="true" />
      </span>
      <span className="row indent-2">
        <span>DARVISH</span>
      </span>
      <span className="row indent-1">
        <span>MOGHADAM</span>
      </span>
    </h1>
  );
}

Object.assign(window, { NameTitle });