add typejs

package.json

@@ -33,6 +33,8 @@
   },
   "dependencies": {
     "classnames": "^2.3.2",
-    "mini-css-extract-plugin": "^2.7.6"
+    "mini-css-extract-plugin": "^2.7.6",
+    "typed.js": "^2.0.16",
+    "typewriter-effect": "^2.20.1"
   }
 }

src/components/Home/functions/type.js

@@ -0,0 +1,16 @@
+import Typed from "typed.js";
+
+export default function typeJS(){
+    const typed = new Typed('#type-text', {
+        strings: [`I'm a Front-End Developer`,
+                  `I'm building React projects.`, 
+                  `I'm building Typescript \nand Javascript Projects.`,
+                  `I'm a template creator of React,\n Javascript , typescript using Webpack `
+                ],
+        typeSpeed: 20,
+        backSpeed: 5,
+        smartBackspace: true,
+        loop: true,
+        contentType: 'html' 
+      });
+}

src/components/rightbar/rightlist.js

@@ -14,6 +14,9 @@ export default function RightbarList(RList){
                 <li>
                     <p>item 3</p>
                 </li>
+                <li>
+                    <p>item 4</p>
+                </li>
             </ul>
         `
 

src/components/sidebar/functions/donut.js

@@ -20,6 +20,6 @@ export default function DonutFunctions(){
     }
 
     animateDonutChart('donut-segment', 'donut-text', 75); 
-    animateDonutChart('donut-segment2', 'donut-text2', 60); 
+    animateDonutChart('donut-segment2', 'donut-text2', 95); 
 
 }

src/pages/Home.js

@@ -1,27 +1,27 @@
+import typeJS from "../components/Home/functions/type";
 import Home_Render from "../render/Home/home.render";
 import { style_main } from "../start";
 
 export default function HomePage(Home) {
+  Home.innerHTML = `
+    <div class=${style_main('home')}>
+      <div class=${style_main('overlay')}>
+        <div class=${style_main('profile-home')}>
+          <h1>Design something Amazing with React!!</h1>
+          <div class=${style_main('type-line')}>
+            <span class=${style_main('type-code')} id="type-start">&lt;<p class=${style_main('types')}>type</p>&gt;</span>
+            <span id="type-text"></span>
+            <span class=${style_main('type-code')} id="type-end">&lt;<p class=${style_main('types')}>/type</p>&gt;</span>
+          </div>
+          <div id='Hire-me'></div>
+        </div>
+        <div id='repo'></div>
+        <div id='services'></div>
+        <footer id='footer'></footer>
+      </div>
+    </div>
+  `;
 
-    Home.innerHTML = (
-        `
-            <div class=${style_main('home')}>
-                <div class=${style_main('overlay')}>
-                    <div class=${style_main('profile-home')}>
-                        <h1>Design something Amazing with React!!</h1>
-                        <span>&lt;type&gt;</span>
-                            DOM
-                        <span>&lt;/type&gt;</span>
-                        <div id='Hire-me'></div>
-                    </div>
-                    <div id='repo'></div>
-                    <div id='services'></div>
-                    <footer id='footer'></footer>
-                </div>
-            </div>
-        `
-    )
-
-    Home_Render();
-
-}
+  Home_Render();
+  typeJS();
+}

src/sass/modules/app.module.scss

@@ -15,6 +15,18 @@
   color: white;
 }
 
+.types {
+  color: cyan
+}
+
+.type-line,.type-code {
+  display: flex;
+}
+
+.type-line {
+  width: 60%;
+}
+
 .home {
   width: 100%;
   background-image: url("../../images/background.webp");