Intro With Typing Animation Hero

<!DOCTYPE html>
<title>My Example</title>

<style>
    :root {
        --tah-padding: 5rem 1.5rem;
        --tah-min-height: 400px;
        --tah-bg-color: #111827;
        --tah-text-color: #e5e7eb;
        --tah-highlight-color: #38bdf8;
        --tah-max-width: 900px;
    }

.typing-anim-hero {
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
        width: 100%;
        min-height: var(--tah-min-height);
        padding: var(--tah-padding);
        background-color: var(--tah-bg-color);

display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .typing-anim-hero * {
         box-sizing: border-box;
    }
    .typing-anim-hero-content {
        max-width: var(--tah-max-width);
    }
    .typing-anim-hero-title {
        color: var(--tah-text-color);
        margin: 0;
        font-size: clamp(2rem, 6vw, 4rem);
        font-weight: 700;
        line-height: 1.3;
    }
    .typing-anim-hero-title .typing-text {
        color: var(--tah-highlight-color);
    }
    .typing-anim-hero-title .typing-cursor {
        display: inline-block;
        background-color: var(--tah-highlight-color);
        margin-left: 0.2rem;
        width: 4px;
        animation: blink 1s infinite;
    }
    /* Set cursor height based on h1 size */
    .typing-anim-hero-title .typing-cursor {
        height: clamp(1.8rem, 5vw, 3.8rem);
    }

@keyframes blink {
        0% { background-color: var(--tah-highlight-color); }
        49% { background-color: var(--tah-highlight-color); }
        50% { background-color: transparent; }
        99% { background-color: transparent; }
        100% { background-color: var(--tah-highlight-color); }
    }

</style>

<section class="typing-anim-hero">
    <div class="typing-anim-hero-content">
        <h1 class="typing-anim-hero-title">
            Hi, I'm Indigo Monet.
            <br>
            I am a <span class="typing-text"></span><span class="typing-cursor"></span>
        </h1>
    </div>
</section>

<script>
(function() {
    const typedTextSpan = document.querySelector(".typing-text");
    const cursorSpan = document.querySelector(".typing-cursor");

if (!typedTextSpan || !cursorSpan) return;

// --- Configuration ---
    const textArray = ["Developer.", "Designer.", "Problem Solver.", "Creative."];
    const typingDelay = 150; // Time in ms to type a character
    const erasingDelay = 100; // Time in ms to erase a character
    const newTextDelay = 2000; // Time in ms to wait before starting to type new text
    // --- End Configuration ---

let textArrayIndex = 0;
    let charIndex = 0;

// Initial call
    document.addEventListener("DOMContentLoaded", function() {
        if(textArray.length) setTimeout(type, newTextDelay + 250);
    });
})();
</script>