making it take the sequence from the json file and faster speed

Author: rohitdavas

js/typing-sequence.json

@@ -0,0 +1,42 @@
+{
+    "sequences": [
+        {
+            "type": "code",
+            "content": "import me",
+            "delay": 500
+        },
+        {
+            "type": "code",
+            "content": "me.whoIam()",
+            "delay": 500
+        },
+        {
+            "type": "output",
+            "content": ">>> \"Rohit\"",
+            "delay": 500
+        },
+        {
+            "type": "output",
+            "content": ">>> \"2021 IIT Jammu CS Gradaute\"",
+            "delay": 500
+        },
+        {
+            "type": "output",
+            "content": ">>> \"AI Enginner at Captury GmbH since 2021 building computer vision solutions\"",
+            "delay": 500
+        },
+        {
+            "type": "code",
+            "content": "me.hobby()",
+            "delay": 500
+        }
+
+    ],
+    "settings": {
+        "typingSpeed": 1,
+        "cursorColor": {
+            "code": "#00ff9d",
+            "output": "#ff9d00"
+        }
+    }
+}

js/typing.js

@@ -1,47 +1,64 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', async function() {
     const container = document.querySelector('.typing-container');
-    const lines = document.querySelectorAll('.code-line');
 
-    // Create cursor element
-    const cursor = document.createElement('div');
-    cursor.className = 'typing-cursor';
-    container.appendChild(cursor);
-    
-    let currentLine = 0;
-    
-    function updateCursorPosition() {
-        const activeLine = lines[currentLine];
-        if (activeLine) {
-            const lineRect = activeLine.getBoundingClientRect();
-            const containerRect = container.getBoundingClientRect();
-            cursor.style.left = `${activeLine.offsetWidth}px`;
-            cursor.style.top = `${lineRect.top - containerRect.top}px`;
-            
-            // Change cursor color for output line
-            if (activeLine.classList.contains('code-output')) {
-                cursor.classList.add('at-output');
-            } else {
-                cursor.classList.remove('at-output');
-            }
+    try {
+        // Fetch and parse the JSON file
+        const response = await fetch('/js/typing-sequence.json');
+        const data = await response.json();
+        
+        if (!data || !data.sequences || data.sequences.length === 0) {
+            console.error('No valid sequences found:', data);
+            return;
         }
-    }
+        
+        // Clear existing content and create lines from sequence
+        container.innerHTML = '';
+        
+        // Create all lines first
+        data.sequences.forEach(sequence => {
+            const line = document.createElement('div');
+            line.className = `code-line${sequence.type === 'output' ? ' code-output' : ''}`;
+            line.textContent = sequence.content;
+            container.appendChild(line);
+        });
 
-    function typeLine() {
-        if (currentLine < lines.length) {
-            // Start cursor animation for current line
-            const cursorInterval = setInterval(updateCursorPosition, 50);
-            
-            // After typing animation completes
-            setTimeout(() => {
-                clearInterval(cursorInterval);
+        const lines = document.querySelectorAll('.code-line');
+        let currentLine = 0;
+
+        async function typeLine() {
+            if (currentLine < lines.length) {
+                const line = lines[currentLine];
+                const sequence = data.sequences[currentLine];
+                
+                // Start typing animation
+                line.classList.add('visible');
+                
+                // Simulate typing by incrementing visible length
+                let visibleLength = 0;
+                const typingInterval = setInterval(() => {
+                    visibleLength += 1;
+                    line.style.setProperty('--visible-length', visibleLength);
+                    if (visibleLength >= line.textContent.length) {
+                        clearInterval(typingInterval);
+                    }
+                }, data.settings.typingSpeed / line.textContent.length); // Adjust for smoother typing
+                
+                // Wait for typing to complete
+                await new Promise(resolve => setTimeout(resolve, data.settings.typingSpeed));
+                
                 currentLine++;
+                
                 if (currentLine < lines.length) {
-                    setTimeout(typeLine, 500); // Delay before next line
+                    await new Promise(resolve => setTimeout(resolve, sequence.delay));
+                    await typeLine();
                 }
-            }, 2000); // Match with CSS animation duration
+            }
         }
-    }
 
-    // Start typing after a short delay
-    setTimeout(typeLine, 500);
+        // Start typing after initial delay
+        setTimeout(() => typeLine(), 500);
+        
+    } catch (error) {
+        console.error('Error in typing animation:', error);
+    }
 });

styles.css

@@ -90,25 +90,22 @@ body {
 }
 
 .code-line {
+    display: block;
     color: #00ff9d;
     white-space: pre;
     margin-bottom: 0.5rem;
     position: relative;
     width: 0;
     overflow: hidden;
-    animation: typing 2s steps(20, end) forwards;
-}
-
-.code-line:nth-child(1) {
-    animation-delay: 0.5s;
+    font-family: 'Consolas', 'Monaco', monospace;
+    font-size: 1.2rem;
 }
 
-.code-line:nth-child(2) {
-    animation-delay: 2.5s;
+.code-line.visible {
+    animation: typing 0.5s steps(20, end) forwards;
 }
 
-.code-line:nth-child(3) {
-    animation-delay: 4.5s;
+.code-line.code-output {
     color: #ff9d00;
 }
 
@@ -125,8 +122,12 @@ body {
 }
 
 @keyframes typing {
-    from { width: 0 }
-    to { width: 100% }
+    from { 
+        width: 0;
+    }
+    to { 
+        width: 100%;
+    }
 }
 
 @keyframes blink {