feat: animated header text

3 years ago · 86bd0f05b9
4 changed files with 125 additions and 36 deletions
--- a/components/Header.js
+++ b/components/Header.js
@ -1,30 +1,19 @@
-import { useLayoutEffect, useState } from "react";
-
-function useWindowSize() {
-    const [size, setSize] = useState([0, 0]);
-    useLayoutEffect(() => {
-        function updateSize() {
-            setSize([window.innerWidth, window.innerHeight]);
-        }
-        window.addEventListener("resize", updateSize);
-        updateSize();
-        return () => window.removeEventListener("resize", updateSize);
-    }, []);
-    return size;
-}
+import TypeIt from "typeit-react";

 export default function Header(props) {
-    const [windowWidth, windowHeight] = useWindowSize();
-
    return (
        <header className="header">
            <nav className="nav" role="navigation" aria-label="main navigation">
-                <a href="/">
-                    <h1>{props.siteTitle}</h1>
+                <a href="/" className="header__logo">
+                    <TypeIt options={{ strings: [props.siteTitle], speed: 30, lifeLike: true }}>{props.siteTitle}</TypeIt>
                </a>
                <ul className="header__links">
-                    <li><a href="/posts">Blog</a></li>
-                    <li><a href="/cv">Resume</a></li>
+                    <li>
+                        <a href="/posts">Blog</a>
+                    </li>
+                    <li>
+                        <a href="/cv">Resume</a>
+                    </li>
                </ul>
            </nav>
        </header>
--- a/package-lock.json
+++ b/package-lock.json
@ -16,7 +16,8 @@
        "react-dom": "17.0.2",
        "react-markdown": "^4.3.1",
        "rfc822-date": "0.0.3",
-        "sass": "^1.38.0"
+        "sass": "^1.38.0",
+        "typeit-react": "^2.0.1"
      }
    },
    "node_modules/@babel/code-frame": {
@ -617,6 +618,26 @@
      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.6.1.tgz",
      "integrity": "sha512-Sr7BhXEAer9xyGuCN3Ek9eg9xPviCF2gfu9kTfuU2HkTVAMYSDeX40fvpmo72n5nansg3nsBjuQBrsS28r+NUw=="
    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+    },
+    "node_modules/@types/react": {
+      "version": "17.0.19",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.19.tgz",
+      "integrity": "sha512-sX1HisdB1/ZESixMTGnMxH9TDe8Sk709734fEQZzCV/4lSu9kJCPbo2PbTRoZM+53Pp0P10hYVyReUueGwUi4A==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
    "node_modules/abbrev": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@ -1141,6 +1162,11 @@
        }
      }
    },
+    "node_modules/csstype": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
+      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
+    },
    "node_modules/data-uri-to-buffer": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz",
@ -3503,6 +3529,18 @@
        "node": ">=8"
      }
    },
+    "node_modules/typeit-react": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/typeit-react/-/typeit-react-2.0.1.tgz",
+      "integrity": "sha512-j9QZlEj0KOjuLfMSutrOCg9FqyueZ0eV5Ev+EVmyjitfHyyh+ATxf0B4/uv7/ELJeMCfNNt0s2WRVc6+YuEBqA==",
+      "dependencies": {
+        "@types/react": "^17.0.18"
+      },
+      "peerDependencies": {
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      }
+    },
    "node_modules/unbox-primitive": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@ -4217,6 +4255,26 @@
      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.6.1.tgz",
      "integrity": "sha512-Sr7BhXEAer9xyGuCN3Ek9eg9xPviCF2gfu9kTfuU2HkTVAMYSDeX40fvpmo72n5nansg3nsBjuQBrsS28r+NUw=="
    },
+    "@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+    },
+    "@types/react": {
+      "version": "17.0.19",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.19.tgz",
+      "integrity": "sha512-sX1HisdB1/ZESixMTGnMxH9TDe8Sk709734fEQZzCV/4lSu9kJCPbo2PbTRoZM+53Pp0P10hYVyReUueGwUi4A==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
    "abbrev": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@ -4678,6 +4736,11 @@
        "cssnano-preset-simple": "^3.0.0"
      }
    },
+    "csstype": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
+      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
+    },
    "data-uri-to-buffer": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz",
@ -6544,6 +6607,14 @@
      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.7.1.tgz",
      "integrity": "sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg=="
    },
+    "typeit-react": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/typeit-react/-/typeit-react-2.0.1.tgz",
+      "integrity": "sha512-j9QZlEj0KOjuLfMSutrOCg9FqyueZ0eV5Ev+EVmyjitfHyyh+ATxf0B4/uv7/ELJeMCfNNt0s2WRVc6+YuEBqA==",
+      "requires": {
+        "@types/react": "^17.0.18"
+      }
+    },
    "unbox-primitive": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
--- a/package.json
+++ b/package.json
@ -17,6 +17,7 @@
    "react-dom": "17.0.2",
    "react-markdown": "^4.3.1",
    "rfc822-date": "0.0.3",
-    "sass": "^1.38.0"
+    "sass": "^1.38.0",
+    "typeit-react": "^2.0.1"
  }
 }
--- a/styles/components/header.scss
+++ b/styles/components/header.scss
@ -1,41 +1,69 @@
 nav {
    display: flex;
    justify-content: space-between;
-    flex-direction: row;
+    flex-direction: column;
    align-items: center;
-    a h1 {
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    &__links {
+        list-style-type: none;
+        display: flex;
+        flex-direction: row;
+        margin: 0;
+        padding: 0;
+        text-align: center;
+        align-items: center;
+        li {
+            padding: 24px;
+        }
+    }
+
+    &__logo {
        margin: 0;
        color: $color-text-dark;
        padding: 24px;
        font-weight: 400;
        font-family: 'Roboto Mono', Courier, monospace;
        font-size: 24px;
+        display: flex;
+        border-bottom: 1px solid;

        @media (prefers-color-scheme: light) {
            color: $color-primary-light;
        }
+        &__cursor {
+            display: inline-block;
+            margin-left: 8px;
+            height: 100%;
+            width: 2px;
+            background: $color-primary-dark;
+
+            @media (prefers-color-scheme: light) {
+                background: $color-primary-light;
+            }
+        }
    }
 }

-.header__links {
-    list-style-type: none;
-    display: flex;
-    flex-direction: row;
-    margin: 0;
-    padding: 0;
-    text-align: center;
-    align-items: center;
-}
-.header__links li {
-    padding: 24px;
-}
@media (min-width: 768px) {
    .header {
        left: 0;
        top: 0;
+        
+        &__logo {
+            border-bottom: none;
+        }
    }
    .nav {
        height: 100%;
        align-items: flex-start;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: row;
+        align-items: center;
    }
 }