Site updates (#1)

* Add current page as reference

* Upgrade dependencies: Gatsby 5.0.1

* Refactor components and styles to be consistent

* Switch tense of BlockBody prop

* Remove header on stylesheet

* move timestamp to package version

* Commit public dir for use with static site builders

* Remove 1.0.7 file ref

2 files changed, 71 insertions, 285 deletions

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 0f6164c..48de764 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,54 +1,27 @@
 import * as React from "react";
-import { Link } from "gatsby";
-
-// styles
-const pageStyles = {
-  color: "#232129",
-  padding: "96px",
-  fontFamily: "-apple-system, Roboto, sans-serif, serif",
-};
-const headingStyles = {
-  marginTop: 0,
-  marginBottom: 64,
-  maxWidth: 320,
-};
-
-const paragraphStyles = {
-  marginBottom: 48,
-};
-const codeStyles = {
-  color: "#8A6534",
-  padding: 4,
-  backgroundColor: "#FFF4DB",
-  fontSize: "1.25rem",
-  borderRadius: 4,
-};
+import BlockLink from "../components/BlockLink";
+import { BlockBody, BlockHeader, Content } from "../styles";
 
 // markup
 const NotFoundPage = (): React.ReactElement => {
   return (
-    <main style={pageStyles}>
-      <title>Not found</title>
-      <h1 style={headingStyles}>Page not found</h1>
-      <p style={paragraphStyles}>
-        Sorry{" "}
-        <span role="img" aria-label="Pensive emoji">
-          😔
-        </span>{" "}
-        we couldn’t find what you were looking for.
-        <br />
-        {process.env.NODE_ENV === "development" ? (
-          <>
-            <br />
-            Try creating a page in <code style={codeStyles}>src/pages/</code>.
-            <br />
-          </>
-        ) : null}
-        <br />
-        <Link to="/">Go home</Link>.
-      </p>
+    <main>
+      <Content>
+        <BlockHeader>Not found</BlockHeader>
+        <BlockBody>
+          Sorry{" "}
+          <span role="img" aria-label="Pensive emoji">
+            😔
+          </span>{" "}
+          we couldn&apos;t find what you were looking for.
+        </BlockBody>
+        <BlockLink href="/" aria-label="Return to the front page">
+          Home
+        </BlockLink>
+      </Content>
     </main>
   );
 };
 
 export default NotFoundPage;
+export { Head } from "../components/SEO";
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a1f4f35..7d92d74 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,256 +1,69 @@
 import React from "react";
-import styled from "styled-components";
 import { StaticImage } from "gatsby-plugin-image";
-import SEO from "../components/SEO";
 import "../styles/main.css";
-import { FaMastodon } from "react-icons/fa";
-
-const TIMESTAMP = "1641237448";
-const SHORT_CHARS = [
-  "0",
-  "1",
-  "2",
-  "3",
-  "4",
-  "5",
-  "6",
-  "7",
-  "8",
-  "9",
-  "a",
-  "b",
-  "c",
-  "d",
-  "e",
-  "f",
-  "g",
-  "h",
-  "i",
-  "j",
-  "k",
-  "l",
-  "m",
-  "n",
-  "o",
-  "p",
-  "q",
-  "r",
-  "s",
-  "t",
-  "u",
-  "v",
-  "w",
-  "x",
-  "y",
-  "z",
-  "A",
-  "B",
-  "C",
-  "D",
-  "E",
-  "F",
-  "G",
-  "H",
-  "I",
-  "J",
-  "K",
-  "L",
-  "M",
-  "N",
-  "O",
-  "P",
-  "Q",
-  "R",
-  "S",
-  "T",
-  "U",
-  "V",
-  "W",
-  "X",
-  "Y",
-  "Z",
-];
-
-function toShort(valu: number): string {
-  return valu
-    .toString()
-    .match(/.{1,2}/g)
-    .map((s) => SHORT_CHARS[parseInt(s)])
-    .join("");
-}
-
-function getTimestamp(seconds: number): string {
-  const date = new Date(seconds * 1000);
-  const dateArr = [
-    date.getUTCFullYear(),
-    date.getUTCMonth(),
-    date.getUTCDate(),
-    date.getUTCHours(),
-    date.getUTCMinutes(),
-  ];
-
-  return dateArr.map(toShort).join(".") + "-0";
-}
-
-// styles
-const StyledContainer = styled.div`
-  div#content {
-    width: 350px;
-    margin: 0px auto;
-    margin-bottom: 120px;
-    padding-top: 136px;
-  }
-  div#header {
-    text-align: center;
-    pointer-events: none;
-    user-select: none;
-  }
-  div#tagline {
-    background-color: #000;
-    width: 100%;
-    text-align: center;
-    color: #fff;
-    font-size: 36px;
-    font-weight: bold;
-  }
-  div#info {
-    padding: 4px 8px;
-  }
-  div#info a,
-  div#info a:visited,
-  div#info a:hover {
-    text-decoration: none;
-    color: #000;
-    padding: 1px 3px;
-  }
-  div#info a,
-  div#info a:visited {
-    background-color: #e1e1e1;
-  }
-  div#info a:hover {
-    background-color: #d5d5d5;
-  }
-  div#info,
-  div.link {
-    background-color: #fff;
-    border: 1px #000 solid;
-    border-left: 3px #000 solid;
-    border-right: 3px #000 solid;
-  }
-  div.link,
-  div#tagline {
-    margin-top: 3px;
-  }
-  div.link > a,
-  div.link > a:visited,
-  div.link > a:active {
-    padding: 8px;
-    width: 328px;
-    display: block;
-    text-align: center;
-    text-decoration: none;
-    color: #666;
-  }
-  div.link:hover {
-    background-color: #ddd;
-    color: #222;
-  }
-  div.link:last-child,
-  div.link:last-child > a {
-    border-bottom-left-radius: 18px;
-    border-bottom-right-radius: 18px;
-  }
-  q,
-  p,
-  em {
-    display: block;
-    text-indent: 28px;
-  }
-
-  p {
-    margin: 0px 0px 16px;
-  }
-
-  div#meta {
-    width: 100%;
-    position: fixed;
-    left: 0px;
-    bottom: 0px;
-    text-align: center;
-    font-size: 12px;
-  }
-  div#meta > span {
-    background-color: #e1e1e1;
-  }
-`;
+import { FaGithub, FaMastodon } from "react-icons/fa";
+import BlockLink from "../components/BlockLink";
+import Footer from "../components/Footer";
+import { BlockBody, BlockHeader, Content } from "../styles";
+import { version } from "../../package.json";
 
 // markup
 const IndexPage = (): React.ReactElement => {
   return (
     <main>
-      <SEO title="Kevin J Hoerr <kjhoerr@submelon.tech>" />
-      <StyledContainer>
-        <div id="content">
-          <div id="header">
-            <StaticImage
-              src="../images/main.png"
-              alt="Kevin J Hoerr"
-              placeholder="blurred"
-              layout="fixed"
-              width={340}
-              height={340}
-            />
-          </div>
-          <div id="tagline">Hello!</div>
-          <div id="info">
-            <p>
-              I&apos;m a computer science and math graduate from Millersville
-              University. I work as an IT consultant and specialize in
-              development operations and systems validation for web
-              applications.
-            </p>
-            <p>
-              My most recent projects have been focused on full-stack
-              development. I use Kubernetes for orchestration, NextJS for
-              front-end, and rust+actix-web for my backend services with GraphQL
-              serving as the public API.
-            </p>
-            <p>
-              This site was recently rebuilt using GatsbyJS since the instance
-              formerly holding this website broke during upgrades. Thank
-              goodness for backups.
-            </p>
-            <em>- Kevin H.</em>
-          </div>
-          <div id="links">
-            <div className="link">
-              <a href="https://cybr.es/@kjhoerr" rel="me">
-                <FaMastodon size={20} style={{ marginBottom: "-4px" }} />{" "}
-                @kjhoerr@cybr.es
-              </a>
-            </div>
-            <div className="link">
-              <a href="https://order.blackrockbrews.com">
-                Black Rock Brewing (recent project)
-              </a>
-            </div>
-            <div className="link">
-              <a href="https://git.submelon.dev">
-                My Gitea instance for pet projects
-              </a>
-            </div>
-          </div>
+      <Content>
+        <div>
+          <StaticImage
+            src="../images/main.png"
+            alt="Picture of Kevin Hoerr"
+            placeholder="tracedSVG"
+            layout="fixed"
+            width={350}
+            height={350}
+          />
         </div>
+        <BlockHeader>Hello!</BlockHeader>
+        <BlockBody>
+          <p>
+            I&apos;m a computer science and math graduate from Millersville
+            University. I work as an IT consultant and specialize in development
+            operations and systems validation for web applications.
+          </p>
+          <p>
+            My most recent projects have been focused on full-stack development.
+            I use Kubernetes for orchestration, NextJS for front-end, and
+            rust+actix-web for my backend services with GraphQL serving as the
+            public API.
+          </p>
+          <p>
+            This site was recently rebuilt using GatsbyJS since the instance
+            formerly holding this website broke during upgrades. Thank goodness
+            for backups.
+          </p>
+          <em>- Kevin H.</em>
+        </BlockBody>
+        <BlockLink
+          href="https://cybr.es/@kjhoerr"
+          rel="me"
+          aria-label="My Mastodon account"
+        >
+          <FaMastodon size={20} style={{ marginBottom: "-4px" }} />{" "}
+          @kjhoerr@cybr.es
+        </BlockLink>
+        <BlockLink
+          href="https://github.com/kjhoerr"
+          rel="me"
+          aria-label="My GitHub account with my most active personal projects"
+        >
+          <FaGithub size={20} style={{ marginBottom: "-4px" }} /> kjhoerr on
+          GitHub
+        </BlockLink>
+      </Content>
 
-        <div id="meta">
-          <span>
-            &copy;2021 kjhoerr@https://submelon.dev/:
-            {getTimestamp(parseInt(TIMESTAMP))}
-          </span>
-        </div>
-      </StyledContainer>
+      <Footer timestamp={version} />
     </main>
   );
 };
 
 export default IndexPage;
+export { Head } from "../components/SEO";