typewriter-component-V1

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;

src/app/page.tsx

@@ -2,14 +2,15 @@ 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' })
 
 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>
   )

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;

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          [██████████████████▁▁▁▁▁▁]",
 
     ]
 

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;

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;