Add scroll on type animation completion

package-lock.json

@@ -10237,6 +10237,11 @@
       "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
       "dev": true
     },
+    "smoothscroll": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/smoothscroll/-/smoothscroll-0.4.0.tgz",
+      "integrity": "sha512-sggQ3U2Un38b3+q/j1P4Y4fCboCtoUIaBYoge+Lb6Xg1H8RTIif/hugVr+ErMtIDpvBbhQfTjtiTeYAfbw1ZGQ=="
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",

package.json

@@ -43,6 +43,7 @@
     "react-particles-js": "^2.7.0",
     "react-typed": "^1.2.0",
     "serve": "^10.1.2",
+    "smoothscroll": "^0.4.0",
     "src": "^1.1.2",
     "styled-components": "^4.3.2"
   }

src/components/skills/Skills.js

@@ -6,7 +6,7 @@ import path from "path";
 
 export default function Skills() {
   return (
-    <Container>
+    <Container id="skills">
       <Title>My Skills</Title>
       {SkillSet.map(topic => {
         return (
@@ -36,6 +36,7 @@ export default function Skills() {
 
 const Container = styled.div`
   margin-bottom: 1em;
+  padding-top: 2em;
 `;
 
 const Title = styled.h1`

src/landing/Landing.js

@@ -1,5 +1,6 @@
 import React from "react";
 import Typed from "react-typed";
+import smoothScroll from "smoothscroll";
 import "./Landing.scss";
 
 export default function Landing() {
@@ -27,6 +28,12 @@ export default function Landing() {
               backDelay={1000}
               startDelay={1000}
               smartBackspace
+              onComplete={() => {
+                setTimeout(() => {
+                  const skillsAnchor = document.querySelector("#skills");
+                  if (window.scrollY < 200) smoothScroll(skillsAnchor, 1000);
+                }, 1000);
+              }}
             />
           </p>
         </div>