updated typewriter animation

.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "yarn run dev",
+      "console": "integratedTerminal",
+      "serverReadyAction": {
+        "pattern": "started server on .+, url: (https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

components/typewriter.tsx

@@ -1,45 +1,50 @@
 import type { NextComponentType } from "next";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 const TypeWriter: NextComponentType = () => {
   const title: Array<String> = "Sahil Deshmukh".split("");
   const [word, setWord] = useState<Array<String>>([]);
-  const [repeatCount, setRepeatCount] = useState(false);
+  const wordRef = useRef<Array<String>>([]);
+  wordRef.current = word;
+  const [reverse, setReverse] = useState(false);
+  const index = useRef(0);
 
-  useEffect(() => {
-    title.forEach((value, index) => {
+  const delay = (time: number) => {
+    return new Promise<void>((resolve, _) => {
       setTimeout(() => {
-        setWord((prev) => [...prev, value]);
+        resolve();
+      }, time);
+    });
+  };
 
-        if (index === title.length - 1) {
-          console.log(word);
+  const runAnimation = async (str: String) => {
+    for (let i = 0; i < title.length; i++) {
+      await delay(250);
+      setWord((prev) => [...prev, title.at(i) || ""]);
+    }
 
-          erase();
-          // setRepeatCount(repeatCount + 1);
-        }
-      }, index * 250);
-    });
-  }, []);
+    await erase();
+  };
 
-  const erase = () => {
-    title.forEach((_, index) => {
-      setTimeout(() => {
-        // const less = word;
-        // less.pop();
-        console.log(word);
+  const erase = async () => {
+    await delay(1000);
 
-        // setWord(less);
+    for (let i = title.length - 1; i >= 0; i--) {
+      await delay(100);
+      setWord((prev) => [...prev.slice(0, i)]);
+    }
 
-        if (index === title.length - 1) {
-          // setRepeatCount(repeatCount + 1);
-        }
-      }, index * 250);
-    });
+    await runAnimation("");
   };
 
+  useEffect(() => {
+    runAnimation("123");
+    return () => {};
+  }, []);
+
   return (
     <div>
-      {word?.map((value, index) => (
+      {word.map((value, index) => (
         <span key={index}>{value}</span>
       ))}
     </div>

pages/index.tsx

@@ -23,7 +23,7 @@ const Home: NextPage = () => {
         ></link>
       </Head>
 
-      <main className="relative grid h-screen place-content-center bg-gray-800 font-poppins">
+      <main className="bkg relative grid h-screen place-content-center font-poppins">
         <h1 className="relative text-5xl font-bold text-gray-300 sm:text-7xl">
           <TypeWriter />
         </h1>

styles/custom.css

@@ -0,0 +1,6 @@
+
+.bkg {
+  background-image: url('../assets/background.svg');
+  background-size: cover;
+  background-repeat: no-repeat;
+}