<div class="typing-wrapper">
<h1>I am a <span class="type-text"></span><span class="cursor">|</span></h1>
</div>
.typing-wrapper {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-size: 2.5rem;
color: #1f2937;
}
.type-text {
color: #3b82f6;
font-weight: 700;
}
.cursor {
animation: blink 1s step-end infinite;
color: #374151;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
const textElement = document.querySelector(".type-text");
const words = ["Developer", "Designer", "Creator", "Freelancer"];
let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;
const typeEffect = () => {
const currentWord = words[wordIndex];
if (isDeleting) {
charIndex--;
textElement.textContent = currentWord.substring(0, charIndex);
} else {
charIndex++;
textElement.textContent = currentWord.substring(0, charIndex);
}
if (!isDeleting && charIndex === currentWord.length) {
isDeleting = true;
setTimeout(typeEffect, 2000); // Pause at end
} else if (isDeleting && charIndex === 0) {
isDeleting = false;
wordIndex = (wordIndex + 1) % words.length;
setTimeout(typeEffect, 500); // Pause before typing new word
} else {
setTimeout(typeEffect, isDeleting ? 100 : 200); // Speed
}
};
typeEffect();
