From 651f019141b488a82fd42028bce5b0003abbfaf5 Mon Sep 17 00:00:00 2001
From: Kevin Hoerr <kjhoerr@protonmail.com>
Date: Mon, 21 Nov 2022 18:19:16 -0500
Subject: Layout changes (#15)

* Layout refactor and standardization

* Use split to condense short array

* Fix verbage
---
 src/pages/404.tsx   |  35 ++++++++--------
 src/pages/index.tsx | 113 +++++++++++++++++++++++-----------------------------
 2 files changed, 65 insertions(+), 83 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 0a593d6..d8d27cb 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,26 +1,23 @@
-import * as React from "react";
-import BlockLink from "../components/BlockLink";
-import { BlockBody, BlockHeader, Content } from "../styles";
+import React from "react";
+import { BlockLink, Layout } from "../components";
+import { BlockBody, BlockHeader } from "../styles";
 import "../styles/main.css";
 
-// markup
 const NotFoundPage = (): React.ReactElement => {
   return (
-    <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>
+    <Layout>
+      <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>
+    </Layout>
   );
 };
 
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e4b4ec6..370a10d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,74 +2,59 @@ import React from "react";
 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";
-import package_json from "../../package.json";
-import { IconContext } from "react-icons";
+import { BlockLink, Layout } from "../components";
+import { BlockBody, BlockHeader } from "../styles";
 
-const VERSION = package_json.version;
-
-// markup
 const IndexPage = (): React.ReactElement => {
   return (
-    <main>
-      <IconContext.Provider
-        value={{ size: "20", style: { marginBottom: "-4px" } }}
+    <Layout>
+      <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 and NextJS for the front-end. For
+          back-end development, I have built services enabled by Java with
+          Spring Boot, Quarkus, and rust+actix-web with a GraphQL serving public
+          API.
+        </p>
+        <p>
+          I run a personal Kubernetes cluster at home using MicroOS and k3d. I
+          have also run multiple clusters via DigitalOcean with deployments
+          dedicated for hosting git projects, CI/CD, and code coverage. Since
+          then all projects have been moved to GitHub.
+        </p>
+        <em>- Kevin H.</em>
+      </BlockBody>
+      <BlockLink
+        href="https://cybr.es/@kjhoerr"
+        rel="me"
+        aria-label="My Mastodon account"
       >
-        <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 and NextJS for the
-              front-end. For back-end development, I have built services enabled
-              by Java with Spring Boot, Quarkus, and rust+actix-web with a
-              GraphQL serving public API.
-            </p>
-            <p>
-              I run a personal Kubernetes cluster at home using MicroOS and k3d.
-              I have also run multiple clusters via DigitalOcean with
-              deployments dedicated for hosting git projects, CI/CD, and code
-              coverage. Since then all projects have been moved to GitHub.
-            </p>
-            <em>- Kevin H.</em>
-          </BlockBody>
-          <BlockLink
-            href="https://cybr.es/@kjhoerr"
-            rel="me"
-            aria-label="My Mastodon account"
-          >
-            <FaMastodon /> @kjhoerr@cybr.es
-          </BlockLink>
-          <BlockLink
-            href="https://github.com/kjhoerr"
-            rel="me"
-            aria-label="My GitHub account with my most active personal projects"
-          >
-            <FaGithub /> kjhoerr on GitHub
-          </BlockLink>
-        </Content>
-
-        <Footer timestamp={VERSION} />
-      </IconContext.Provider>
-    </main>
+        <FaMastodon /> @kjhoerr@cybr.es
+      </BlockLink>
+      <BlockLink
+        href="https://github.com/kjhoerr"
+        rel="me"
+        aria-label="My GitHub account with my most active personal projects"
+      >
+        <FaGithub /> kjhoerr on GitHub
+      </BlockLink>
+    </Layout>
   );
 };
 
-- 
cgit