Refactor components and styles to be consistent

10 files changed, 270 insertions, 278 deletions

diff --git a/src/components/BlockLink.tsx b/src/components/BlockLink.tsx
new file mode 100644
index 0000000..3144c86
--- /dev/null
+++ b/src/components/BlockLink.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { BlockAnchor, BlockBody } from "../styles";
+
+const BlockLink = ({ children, ...attributes }) => {
+  return (
+    <BlockBody>
+      <BlockAnchor {...attributes}>{children}</BlockAnchor>
+    </BlockBody>
+  );
+};
+
+export default BlockLink;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..3e6932b
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,103 @@
+import React from "react";
+import { Footer } from "../styles";
+
+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";
+}
+
+const FooterInfo = ({ timestamp }) => {
+  return (
+    <Footer>
+      <span>
+        &copy;2022 kjhoerr@https://submelon.dev/:
+        {getTimestamp(parseInt(timestamp))}
+      </span>
+    </Footer>
+  );
+};
+
+export default FooterInfo;
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index ac489f1..6b0b85a 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,52 +1,24 @@
 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 theme={{ padding: "4px 8px" }}>
+          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>
   );
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 33b062b..58f5616 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,250 +1,67 @@
 import React from "react";
-import styled from "styled-components";
 import { StaticImage } from "gatsby-plugin-image";
 import "../styles/main.css";
 import { FaGithub, FaMastodon } from "react-icons/fa";
+import BlockLink from "../components/BlockLink";
+import Footer from "../components/Footer";
+import { BlockBody, BlockHeader, Content } from "../styles";
 
 const TIMESTAMP = "1668805149";
-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;
-  }
-`;
 
 // markup
 const IndexPage = (): React.ReactElement => {
   return (
     <main>
-      <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://github.com/kjhoerr">
-                <FaGithub size={20} style={{ marginBottom: "-4px" }} /> My git
-                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 theme={{ padding: "4px 8px" }}>
+          <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;2022 kjhoerr@https://submelon.dev/:
-            {getTimestamp(parseInt(TIMESTAMP))}
-          </span>
-        </div>
-      </StyledContainer>
+      <Footer timestamp={TIMESTAMP} />
     </main>
   );
 };
diff --git a/src/styles/BlockAnchor.ts b/src/styles/BlockAnchor.ts
new file mode 100644
index 0000000..05eb2a2
--- /dev/null
+++ b/src/styles/BlockAnchor.ts
@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+export default styled.a`
+  padding: 8px;
+  width: 328px;
+  display: block;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #666;
+  &:visited,
+  &:active {
+    padding: 8px;
+    width: 328px;
+    display: block;
+    text-align: center;
+    -webkit-text-decoration: none;
+    text-decoration: none;
+    color: #666;
+  }
+`;
diff --git a/src/styles/BlockBody.ts b/src/styles/BlockBody.ts
new file mode 100644
index 0000000..7791873
--- /dev/null
+++ b/src/styles/BlockBody.ts
@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import BlockAnchor from "./BlockAnchor";
+
+export default styled.div`
+  & + & {
+    margin-top: 3px;
+  }
+
+  background-color: #fff;
+  border: 1px #000 solid;
+  border-left: 3px #000 solid;
+  border-right: 3px #000 solid;
+
+  padding: ${(props) => props.theme.padding ?? "0"};
+
+  & > ${BlockAnchor} {
+    &:hover {
+      background-color: #ddd;
+      color: #222;
+    }
+  }
+  &:last-child,
+  &:last-child > ${BlockAnchor} {
+    border-bottom-left-radius: 18px;
+    border-bottom-right-radius: 18px;
+  }
+`;
diff --git a/src/styles/BlockHeader.ts b/src/styles/BlockHeader.ts
new file mode 100644
index 0000000..eb6fe93
--- /dev/null
+++ b/src/styles/BlockHeader.ts
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export default styled.div`
+  background-color: #000;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 36px;
+  font-weight: bold;
+  margin-top: 3px;
+  padding-top: 4px;
+`;
diff --git a/src/styles/Content.ts b/src/styles/Content.ts
new file mode 100644
index 0000000..388e12f
--- /dev/null
+++ b/src/styles/Content.ts
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export default styled.div`
+  width: 350px;
+  margin: 0px auto;
+  margin-bottom: 120px;
+  padding-top: 136px;
+`;
diff --git a/src/styles/Footer.ts b/src/styles/Footer.ts
new file mode 100644
index 0000000..a121b68
--- /dev/null
+++ b/src/styles/Footer.ts
@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export default styled.div`
+  width: 100%;
+  position: fixed;
+  left: 0px;
+  bottom: 0px;
+  text-align: center;
+  font-size: 12px;
+  span {
+    background-color: #e1e1e1;
+  }
+`;
diff --git a/src/styles/index.ts b/src/styles/index.ts
new file mode 100644
index 0000000..8eee62a
--- /dev/null
+++ b/src/styles/index.ts
@@ -0,0 +1,7 @@
+import BlockAnchor from "./BlockAnchor";
+import BlockBody from "./BlockBody";
+import BlockHeader from "./BlockHeader";
+import Content from "./Content";
+import Footer from "./Footer";
+
+export { BlockAnchor, BlockBody, BlockHeader, Content, Footer };