Add Typewriter effect

package-lock.json

@@ -10619,6 +10619,15 @@
         "lodash": "^4.17.11"
       }
     },
+    "react-typed": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-typed/-/react-typed-1.2.0.tgz",
+      "integrity": "sha512-aDsaA6zkjAFJs8285APOqE85l/kwJ0/ZJmBhARwUrza4TTttrMM5FcMCGEDdThdfUdHo/0l9WXmxp1m2ik4qdw==",
+      "requires": {
+        "prop-types": "^15.6.0",
+        "typed.js": "^2.0.6"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -12796,6 +12805,11 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.5.2.tgz",
       "integrity": "sha512-DWkS49EQKVX//Tbupb9TFa19c7+MK1XmzkrZUR8TAktmE/DizXoaoJV6TZ/tSIPXipqNiRI6CyAe7x69Jb6RSw=="
     },
+    "typed.js": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/typed.js/-/typed.js-2.0.10.tgz",
+      "integrity": "sha512-tpK+LRm5FM2GAIWWWogbOc4QRlctS425Ef1PCQKbj/G9wyig+Zt+20eLruK7CBPR+DEl/ou4uSfpwRETCSmk4A=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",

package.json

@@ -39,6 +39,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-particles-js": "^2.6.0",
+    "react-typed": "^1.2.0",
     "serve": "^10.1.2",
     "snyk": "^1.216.1"
   },

src/Home/Home.js

@@ -2,8 +2,7 @@ import React, { Component } from "react";
 import Particles from "react-particles-js";
 import "./Home.scss";
 import github from "./GitHub.svg";
-import linkedin from "./LinkedIn.svg";
-import LinkItem from "./LinkItem";
+import Typed from "react-typed";
 
 export default class Home extends Component {
   constructor(props) {
@@ -20,8 +19,24 @@ export default class Home extends Component {
           <div className="section-header">
             <h1 className="animated fadeInLeft headline">Hi, I'm Garrit</h1>
             <p id="subheadline" className="animated fadeInRight">
-              Software Development is my Passion. Don't hesitate to check out my
-              projects!
+              I love{" "}
+              <Typed
+                strings={[
+                  "JavaScript",
+                  "doing web stuff with React",
+                  "doing web stuff with Express.js",
+                  "building Apps for Android",
+                  "building Apps for iOS",
+                  "building Apps with Flutter",
+                  "going deep with Rust",
+                  "you! ❤️"
+                ]}
+                typeSpeed={50}
+                backSpeed={40}
+                backDelay={1000}
+                startDelay={1000}
+                smartBackspace
+              />
             </p>
           </div>
         </div>