In the block code in the header, make it better, like add a typing animation for the code, like we are typing it live. Once its done, wait 5s, erase everything and restart animation

index.html

@@ -186,15 +186,10 @@
                     <div class="text-xs text-zinc-400">Design system + SSR with Next.js</div>
                   </div>
                 </div>
-                <pre class="mt-6 rounded-xl bg-black/50 text-zinc-300 p-4 overflow-x-auto text-sm leading-relaxed">
-<span class="text-emerald-400">const</span> theme <span class="text-pink-400">=</span> <span class="text-amber-300">dark</span>
-<span class="text-emerald-400">function</span> <span class="text-sky-400">Button</span>({ children, ...props }) {
-  <span class="text-emerald-400">return</span> (
-    &lt;button className=<span class="text-amber-300">"btn-primary"</span> {...props}&gt;
-      {children}
-    &lt;/button&gt;
-  )
-}</pre>
+                <div class="mt-6 rounded-xl bg-black/50 text-zinc-300 p-4 overflow-x-auto text-sm leading-relaxed font-mono relative min-h-[140px]">
+                  <div id="typing-code"></div>
+                  <div class="typing-cursor"></div>
+                </div>
                 <div class="mt-6 grid grid-cols-3 gap-3 text-center">
                   <div class="rounded-xl bg-white/5 border border-white/10 p-3">
                     <div class="text-2xl font-extrabold text-zinc-100">5+ yrs</div>
@@ -210,7 +205,7 @@
                   </div>
                 </div>
               </div>
-              <!-- Floating card -->
+<!-- Floating card -->
               <div class="absolute -right-6 -bottom-6 hidden lg:block">
                 <div class="glass-card rounded-2xl border border-white/10 bg-[color:rgb(var(--bg)_/_0.75)] p-4 shadow-soft">
                   <div class="flex items-center gap-3">

script.js

@@ -267,7 +267,6 @@ if (grid) {
     grid.appendChild(el);
   });
 }
-
 // Year
 document.getElementById('year').textContent = new Date().getFullYear();
 
@@ -281,4 +280,207 @@ document.getElementById('download-cv')?.addEventListener('click', (e) => {
   a.download = 'CoolDev-Resume.txt';
   a.click();
   URL.revokeObjectURL(url);
-});
+});
+
+// Typing animation for code
+function initTypingAnimation() {
+  const codeContainer = document.getElementById('typing-code');
+  if (!codeContainer) return;
+
+  const codeLines = [
+    {
+      text: 'const theme = "dark"',
+      chars: [
+        { type: 'keyword', text: 'const' },
+        { type: 'text', text: ' ' },
+        { type: 'text', text: 'theme ' },
+        { type: 'operator', text: '=' },
+        { type: 'text', text: ' ' },
+        { type: 'string', text: '"dark"' }
+      ]
+    },
+    {
+      text: 'function Button({ children, ...props }) {',
+      chars: [
+        { type: 'keyword', text: 'function' },
+        { type: 'text', text: ' ' },
+        { type: 'function', text: 'Button' },
+        { type: 'punctuation', text: '(' },
+        { type: 'punctuation', text: '{' },
+        { type: 'text', text: ' children, ' },
+        { type: 'operator', text: '...' },
+        { type: 'text', text: 'props ' },
+        { type: 'punctuation', text: '}' },
+        { type: 'punctuation', text: ')' },
+        { type: 'text', text: ' ' },
+        { type: 'punctuation', text: '{' }
+      ]
+    },
+    {
+      text: '  return (',
+      chars: [
+        { type: 'text', text: '  ' },
+        { type: 'keyword', text: 'return' },
+        { type: 'text', text: ' (' }
+      ]
+    },
+    {
+      text: '    <button className="btn-primary" {...props}>',
+      chars: [
+        { type: 'text', text: '    ' },
+        { type: 'tag', text: '<' },
+        { type: 'tag', text: 'button' },
+        { type: 'text', text: ' ' },
+        { type: 'attr', text: 'className' },
+        { type: 'operator', text: '=' },
+        { type: 'string', text: '"btn-primary"' },
+        { type: 'text', text: ' ' },
+        { type: 'operator', text: '{' },
+        { type: 'operator', text: '.' },
+        { type: 'operator', text: '.' },
+        { type: 'operator', text: '}' },
+        { type: 'tag', text: '>' }
+      ]
+    },
+    {
+      text: '      {children}',
+      chars: [
+        { type: 'text', text: '      ' },
+        { type: 'punctuation', text: '{' },
+        { type: 'text', text: 'children' },
+        { type: 'punctuation', text: '}' }
+      ]
+    },
+    {
+      text: '    </button>',
+      chars: [
+        { type: 'text', text: '    ' },
+        { type: 'tag', text: '<' },
+        { type: 'operator', text: '/' },
+        { type: 'tag', text: 'button' },
+        { type: 'tag', text: '>' }
+      ]
+    },
+    {
+      text: '  )',
+      chars: [
+        { type: 'text', text: '  ' },
+        { type: 'punctuation', text: ')' }
+      ]
+    },
+    {
+      text: '}',
+      chars: [
+        { type: 'punctuation', text: '}' }
+      ]
+    }
+  ];
+
+  let currentLine = 0;
+  let currentChar = 0;
+  let isTyping = true;
+  let timeoutId;
+
+  const cursor = document.querySelector('.typing-cursor');
+
+  function typeCharacter() {
+    if (currentLine >= codeLines.length) {
+      // Finished typing all lines
+      isTyping = false;
+      
+      // Wait 5 seconds, then restart
+      setTimeout(() => {
+        restartTyping();
+      }, 5000);
+      
+      return;
+    }
+
+    const line = codeLines[currentLine];
+    const char = line.chars[currentChar];
+    
+    // Create and append the character element
+    const charElement = document.createElement('span');
+    charElement.className = char.type !== 'text' ? char.type : '';
+    charElement.textContent = char.text;
+    codeContainer.appendChild(charElement);
+
+    currentChar++;
+
+    // Calculate typing speed (varies by character type)
+    let delay = 50; // default delay
+    
+    if (char.type === 'punctuation') delay = 100;
+    else if (char.type === 'operator') delay = 80;
+    else if (char.type === 'keyword' || char.type === 'function') delay = 120;
+    else if (char.type === 'string') delay = 150;
+    else if (char.text === ' ') delay = 30;
+    else if (char.text === '\n') delay = 500;
+    
+    // Add some random variation
+    delay += Math.random() * 50;
+
+    timeoutId = setTimeout(typeCharacter, delay);
+
+    // If we finished the current line, move to next line
+    if (currentChar >= line.chars.length) {
+      // Add line break
+      const lineBreak = document.createElement('br');
+      codeContainer.appendChild(lineBreak);
+      currentLine++;
+      currentChar = 0;
+    }
+  }
+
+  function eraseCharacters() {
+    const lastChild = codeContainer.lastElementChild;
+    if (!lastChild || (lastChild.tagName === 'BR' && !lastChild.previousElementSibling)) {
+      // If only line breaks left, restart typing
+      if (!lastChild || !lastChild.previousElementSibling) {
+        restartTyping();
+        return;
+      }
+    }
+
+    if (lastChild) {
+      codeContainer.removeChild(lastChild);
+      setTimeout(eraseCharacters, 20); // Erase speed
+    } else {
+      setTimeout(eraseCharacters, 50);
+    }
+  }
+
+  function restartTyping() {
+    // Clear existing content
+    codeContainer.innerHTML = '';
+    
+    // Reset counters
+    currentLine = 0;
+    currentChar = 0;
+    isTyping = true;
+    
+    // Clear any existing timeout
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    
+    // Start typing again
+    setTimeout(typeCharacter, 1000); // 1 second delay before restart
+  }
+
+  // Start the typing animation
+  setTimeout(typeCharacter, 2000); // 2 second initial delay
+
+  // Hide cursor when not typing (during wait periods)
+  setInterval(() => {
+    if (cursor && isTyping) {
+      cursor.classList.toggle('hide');
+    }
+  }, 500);
+}
+
+// Initialize typing animation when page loads
+document.addEventListener('DOMContentLoaded', initTypingAnimation);
+
+// Re-initialize when feather icons are replaced (since it might interfere)
+setTimeout(initTypingAnimation, 100);

style.css

@@ -165,10 +165,67 @@ input, textarea {
   z-index: 60;
   transition: width 0.1s linear;
 }
-
 /* Reduce motion for users who prefer it */
 @media (prefers-reduced-motion: reduce) {
   .animate-blob, .animate-float {
     animation: none !important;
   }
 }
+
+/* Typing animation styles */
+.typing-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1.2em;
+  background: #a78bfa;
+  margin-left: 2px;
+  animation: blink 1s infinite;
+  vertical-align: bottom;
+}
+
+.typing-cursor.hide {
+  opacity: 0;
+}
+
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+/* Syntax highlighting for typing animation */
+.typing-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.keyword {
+  color: #10b981; /* emerald-400 */
+}
+
+.string {
+  color: #f59e0b; /* amber-500 */
+}
+
+.operator {
+  color: #ec4899; /* pink-400 */
+}
+
+.function {
+  color: #38bdf8; /* sky-400 */
+}
+
+.tag {
+  color: #f87171; /* red-400 */
+}
+
+.attr {
+  color: #f59e0b; /* amber-500 */
+}
+
+.comment {
+  color: #6b7280; /* gray-500 */
+}
+
+.punctuation {
+  color: #9ca3af; /* gray-400 */
+}