dynamic-herotext

index.html

@@ -210,7 +210,8 @@ <h2>Shaurya Verma</h2>
         <section class="hero section">
           <div class="hero-copy">
             <p class="eyebrow">Senior Software Engineer at Capgemini</p>
-            <h1>Readable products, reliable systems, and a little personality.</h1>
+            <h1>Readable products, reliable systems, and a little<br>
+            <span id="typewriter"></span><span class="cursor">|</span></h1>
             <p class="hero-text">
               I build full-stack experiences with Angular, React, ASP.NET Web API,
               Java, and AI-assisted workflows. I care about clarity in interfaces,
@@ -225,8 +226,7 @@ <h1>Readable products, reliable systems, and a little personality.</h1>
                 target="_blank"
                 rel="noreferrer"
                 data-testid="btn-email"
-                >Let’s Talk</a
-              >
+                >Let’s Talk <span class="cursor1">|</span></a>
               <a
                 class="button button-secondary"
                 href="assets/shaurya-verma-resume.pdf"
@@ -795,7 +795,7 @@ <h3>Around Brookefield? Hit me up.</h3>
           <div class="contact-layout">
             <div class="contact-copy">
               <p class="eyebrow">Contact Me</p>
-              <h2>Looking for a developer who builds reliable systems, not just demos?<br> Let’s talk.</h2>
+              <h2>Looking for a developer who builds reliable systems, not just demos?<br> Let’s talk.<span class="cursor2">|</span></h2>
               <p class="contact-text">
                 I build production-grade systems with product-level polish. If your team
                 wants clean implementation without dead UI, this is the

portfolio/index.html

@@ -1123,7 +1123,7 @@ <h2 class="card-title">Explore More</h2>
     </div>
 
     <footer class="footer" id="contact">
-      <p class="footer-text">The nights just aren't tandoori anymore.<br> © 2026 Shaurya Verma.</p>
+      <p class="footer-text">The nights just aren't tandoori anymore.<br> © 2026 Shaurya Verma.</p><br>
       <div class="footer-links">
         <a href="https://shaurya.online" target="_blank" rel="noopener noreferrer"><u>Desktop Site</u></a>
         <!-- <a href="mailto:shauryaverma.tech@gmail.com" target="_blank">Email</a> -->

script.js

@@ -225,6 +225,47 @@ tiltItems.forEach((item) => {
   });
 });
 
+const textElement = document.getElementById('typewriter');
+const phrases = [
+  "personality.",
+  "creativity.",
+  "touch of life."
+];
+
+let phraseIndex = 0;
+let characterIndex = 0;
+let isDeleting = false;
+let typeSpeed = 27;
+
+function type() {
+  const currentPhrase = phrases[phraseIndex];
+
+  if (isDeleting) {
+    // Remove a character
+    textElement.textContent = currentPhrase.substring(0, characterIndex - 1);
+    characterIndex--;
+    typeSpeed = 50; 
+  } else {
+    // Add a character
+    textElement.textContent = currentPhrase.substring(0, characterIndex + 1);
+    characterIndex++;
+    typeSpeed = 120;
+  }
+
+  if (!isDeleting && characterIndex === currentPhrase.length) {
+    isDeleting = true;
+    typeSpeed = 2000; 
+  } else if (isDeleting && characterIndex === 0) {
+    isDeleting = false;
+    phraseIndex = (phraseIndex + 1) % phrases.length;
+    typeSpeed = 500;
+  }
+
+  setTimeout(type, typeSpeed);
+}
+
+document.addEventListener('DOMContentLoaded', type);
+
 const updateChrome = () => {
   const currentScrollY = window.scrollY;
   const isCompact = currentScrollY > 8;

styles.css

@@ -700,6 +700,24 @@ h3 {
   margin-top: 2rem;
 }
 
+.cursor {
+  animation: blink 0.8s infinite;
+  visibility: hidden;
+}
+.cursor1 {
+  animation: blink 0.8s infinite;
+  padding-bottom: 0.2rem;
+}
+.cursor2 {
+  animation: blink 0.8s infinite;
+  font-size: 3.2rem;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
 .button {
   display: inline-flex;
   align-items: center;