From 57ddd3796bca28a479c21b8c6127e3f281f44d24 Mon Sep 17 00:00:00 2001
From: "A. Bryant" <W.Sword.09@hotmail.com>
Date: Tue, 18 Jul 2023 22:00:11 -0600
Subject: [PATCH] typewriter-component-V1

---
 src/app/page.module.css       |  3 +--
 src/app/page.tsx              |  3 ++-
 src/components/Dots.tsx       |  2 +-
 src/components/Terminal.tsx   | 10 +++++-----
 src/components/Typewriter.tsx | 21 +++++++++++++++++++++
 src/css/terminal.module.css   |  4 ++--
 6 files changed, 32 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Typewriter.tsx

diff --git a/src/app/page.module.css b/src/app/page.module.css
index 8da502b..c531ebb 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -1,9 +1,8 @@
 .main {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: space-around;
   align-items: center;
-  padding: 4rem;
   min-height: 100vh;
   font-size: 50px;
   color: white;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e424a0d..7339d21 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,6 +2,7 @@ import Image from 'next/image'
 import styles from './page.module.css'
 import { Metadata } from 'next'
 import  Terminal  from '@/components/Terminal'
+import Typewriter from '@/components/Typewriter'
 import localFont from 'next/font/local'
 
 const dotFont = localFont({ src: './e-dot-digital-7.ttf' })
@@ -9,7 +10,7 @@ const dotFont = localFont({ src: './e-dot-digital-7.ttf' })
 export default function Home() {
   return (
     <main className={styles.main}>
-      <h1 className={dotFont.className}>Front-End Developer</h1>
+      <Typewriter text={'  Front-End Developer'}/> {/* TODO What is wrong with the position 1? */}
       <Terminal/>
     </main>
   )
diff --git a/src/components/Dots.tsx b/src/components/Dots.tsx
index 7f64356..6994aad 100644
--- a/src/components/Dots.tsx
+++ b/src/components/Dots.tsx
@@ -8,7 +8,7 @@ const Dots = () => {
 
   useEffect(() => {
     const dotSize:number = 4;
-    const spacing:number = dotSize * 8;
+    const spacing:number = dotSize * 10;
     const minTvalue:number = 50;
     const areaAffected:number = 50;
     let mouseIsMoving:boolean = false;
diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx
index 065d67c..7d0e4b8 100644
--- a/src/components/Terminal.tsx
+++ b/src/components/Terminal.tsx
@@ -18,8 +18,8 @@ const Terminal = () => {
         "",
         "You can also check my social media:",
         "",
-        "GitHub: AB10110F                   CodePen: AB10110F",
-        "Twitter: AB10110F                  Reddit: AB10110F",
+        "GitHub                   CodePen",
+        "Twitter                  Reddit",
         "",
         "Type \"help\" to view the available commands"       
     ]
@@ -34,11 +34,11 @@ const Terminal = () => {
     ]
 
     const skills = [
-        "CSS          [██████████████████▁▁▁▁▁▁]              C++          [████████████████████▁▁▁▁]",
+        "CSS          [██████████████████▁▁▁▁▁▁]           C++          [████████████████████▁▁▁▁]",
         "",
-        "Typescript   [█████████████▁▁▁▁▁▁▁▁▁▁]              PHP          [██████████████▁▁▁▁▁▁▁▁▁]",
+        "Typescript   [█████████████▁▁▁▁▁▁▁▁▁▁]           PHP          [██████████████▁▁▁▁▁▁▁▁▁]",
         "",
-        "React        [███████████▁▁▁▁▁▁▁▁▁▁▁▁]              Git          [██████████████████▁▁▁▁▁▁]",
+        "React        [███████████▁▁▁▁▁▁▁▁▁▁▁▁]           Git          [██████████████████▁▁▁▁▁▁]",
 
     ]
 
diff --git a/src/components/Typewriter.tsx b/src/components/Typewriter.tsx
new file mode 100644
index 0000000..d5c1535
--- /dev/null
+++ b/src/components/Typewriter.tsx
@@ -0,0 +1,21 @@
+"use client"
+import React, {useState, useEffect, useRef} from 'react';
+import localFont from 'next/font/local'
+
+const dotFont = localFont({ src: '../app/e-dot-digital-7.ttf' })
+
+const Typewriter = ({ text }: { text:string }) => {
+    const index = useRef(0);
+    const [currentText, setCurrentText] = useState('');
+
+    useEffect(()=>{
+        setTimeout(()=>{
+            setCurrentText((value) => value + text.charAt(index.current));
+            index.current++;
+        }, 80);
+    }, [currentText]);
+
+    return <h1 className={dotFont.className}>&gt;{currentText}|</h1>
+};
+
+export default Typewriter;
\ No newline at end of file
diff --git a/src/css/terminal.module.css b/src/css/terminal.module.css
index 21a83d3..87940a6 100644
--- a/src/css/terminal.module.css
+++ b/src/css/terminal.module.css
@@ -1,8 +1,8 @@
 .terminal 
 {
     height: 400px;
-    width: 70%;
-    background-color: rgb(39, 39, 39);
+    width: 800px;
+    background-color: rgb(31, 31, 31);
     color: white;
     box-sizing: border-box;
     font-size: 15px;