Run prettier

4 files changed, 316 insertions, 192 deletions

diff --git a/src/components/SEO.tsx b/src/components/SEO.tsx
index ce86222..26018e9 100644
--- a/src/components/SEO.tsx
+++ b/src/components/SEO.tsx
@@ -1,7 +1,7 @@
-import React from "react"
-import PropTypes from "prop-types"
-import { Helmet } from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
+import React from "react";
+import PropTypes from "prop-types";
+import { Helmet } from "react-helmet";
+import { useStaticQuery, graphql } from "gatsby";
 
 function SEO({ description, lang, meta, title }) {
   const { site } = useStaticQuery(
@@ -16,8 +16,8 @@ function SEO({ description, lang, meta, title }) {
         }
       }
     `
-  )
-  const metaDescription = description || site.siteMetadata.description
+  );
+  const metaDescription = description || site.siteMetadata.description;
   return (
     <Helmet
       htmlAttributes={{
@@ -60,17 +60,17 @@ function SEO({ description, lang, meta, title }) {
         },
       ].concat(meta)}
     />
-  )
+  );
 }
 SEO.defaultProps = {
   lang: `en`,
   meta: [],
   description: ``,
-}
+};
 SEO.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string.isRequired,
-}
-export default SEO
\ No newline at end of file
+};
+export default SEO;
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 053ae0e..fd99104 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,28 +1,28 @@
-import * as React from "react"
-import { Link } from "gatsby"
+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,
-}
+};
 
 // markup
 const NotFoundPage = () => {
@@ -48,7 +48,7 @@ const NotFoundPage = () => {
         <Link to="/">Go home</Link>.
       </p>
     </main>
-  )
-}
+  );
+};
 
-export default NotFoundPage
+export default NotFoundPage;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index c811a55..22efa1b 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -6,102 +6,190 @@ import "../styles/main.css";
 import { FaMastodon } from "react-icons/fa";
 
 const TIMESTAMP = "1619122879";
-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"];
+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 toShort(valu: number): string {
+  return valu
+    .toString()
+    .match(/.{1,2}/g)
+    .map((s) => SHORT_CHARS[parseInt(s)])
+    .join("");
 }
 
-function getTimestamp (seconds: number): string {
+function getTimestamp(seconds: number): string {
   const date = new Date(seconds * 1000);
   const year = date.getFullYear();
   const month = date.getMonth();
   const day = date.getDate();
   const hour = date.getHours();
   const minute = date.getMinutes();
-	return toShort(year)+'.'+toShort(month)+'.'+toShort(day)+'.'+toShort(hour)+'.'+toShort(minute)+"-0";
+  return (
+    toShort(year) +
+    "." +
+    toShort(month) +
+    "." +
+    toShort(day) +
+    "." +
+    toShort(hour) +
+    "." +
+    toShort(minute) +
+    "-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;
-}
+  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;
-}
+  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;
-}
+  div#meta {
+    width: 100%;
+    position: fixed;
+    left: 0px;
+    bottom: 0px;
+    text-align: center;
+    font-size: 12px;
+  }
+  div#meta > span {
+    background-color: #e1e1e1;
+  }
 `;
 
 // markup
@@ -110,39 +198,65 @@ const IndexPage = () => {
     <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'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>
-	</div>
+        <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'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>
+        </div>
 
-	<div id="meta"><span>&copy;2021 kjhoerr@https://submelon.dev/:{getTimestamp(parseInt(TIMESTAMP))}</span></div>
-  </StyledContainer>
+        <div id="meta">
+          <span>
+            &copy;2021 kjhoerr@https://submelon.dev/:
+            {getTimestamp(parseInt(TIMESTAMP))}
+          </span>
+        </div>
+      </StyledContainer>
     </main>
   );
 };
diff --git a/src/styles/main.css b/src/styles/main.css
index 1c75053..4553a42 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -3,92 +3,102 @@
   * Author: Kevin J Hoerr
   */
 body {
-	background-color: #e1e1e1; /* #e1e1e1, #d5d5d5 */
-	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAGXpUWHRUaXRsZQAACNdLSkzOTi/KL81LAQAWSwQhPQTyzQAAABt6VFh0QXV0aG9yAAAI1/NOLcvMU/DITy0qAgAYDwQeUS3vvwAAAZNJREFUeNrt3bFtQ0EMREH5x+q/M3Wi3IJaMGR7yHtbwCWDBY4J+fV4PL5vH879fr9tz/P5/JV3rzAcjI+DhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhDHglxXG/+RdjisMB2N1QyZirAWZirESZDLGOpDpGKtANmCsAdmCsQJkE8Z4kG0Yo0E2YowF2YoxEmQzxjiQ7RijQE7AGANyCsYIkJMweJDTMGiQEzFYkFMxSJCTMTiQ0zEokDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAGTuph/E3e5bjCcDBGNOS03fRXGA4GDXLq1YYrDAeDBDn9nskVhoNBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYTxs7wA+yQwVSKvoHMAAAAASUVORK5CYII=);
-	background-repeat: repeat;
-	font-family: Verdana;
-	font-size: 16px;
+  background-color: #e1e1e1; /* #e1e1e1, #d5d5d5 */
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAGXpUWHRUaXRsZQAACNdLSkzOTi/KL81LAQAWSwQhPQTyzQAAABt6VFh0QXV0aG9yAAAI1/NOLcvMU/DITy0qAgAYDwQeUS3vvwAAAZNJREFUeNrt3bFtQ0EMREH5x+q/M3Wi3IJaMGR7yHtbwCWDBY4J+fV4PL5vH879fr9tz/P5/JV3rzAcjI+DhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhDHglxXG/+RdjisMB2N1QyZirAWZirESZDLGOpDpGKtANmCsAdmCsQJkE8Z4kG0Yo0E2YowF2YoxEmQzxjiQ7RijQE7AGANyCsYIkJMweJDTMGiQEzFYkFMxSJCTMTiQ0zEokDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAGTuph/E3e5bjCcDBGNOS03fRXGA4GDXLq1YYrDAeDBDn9nskVhoNBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYTxs7wA+yQwVSKvoHMAAAAASUVORK5CYII=);
+  background-repeat: repeat;
+  font-family: Verdana;
+  font-size: 16px;
 }
 ::selection {
-	background-color: #999;
-	color: #fff;
+  background-color: #999;
+  color: #fff;
 }
 div#content {
-	width: 350px;
-	margin: 0px auto;
-	margin-bottom: 120px;
-	padding-top: 136px;
+  width: 350px;
+  margin: 0px auto;
+  margin-bottom: 120px;
+  padding-top: 136px;
 }
 div#header {
-	margin: 0px 5px;
-	text-align: center;
-	pointer-events: none;
-	user-select: none;
+  margin: 0px 5px;
+  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;
+  background-color: #000;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 36px;
+  font-weight: bold;
 }
 div#info {
-	padding: 4px 8px;
+  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,
+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,
+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;
+  background-color: #d5d5d5;
 }
-div.link, div#tagline {
-	margin-top: 3px;
+div#info,
+div.link {
+  background-color: #fff;
+  border: 1px #000 solid;
+  border-left: 3px #000 solid;
+  border-right: 3px #000 solid;
 }
-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,
+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;
+  background-color: #ddd;
+  color: #222;
 }
-div.link:last-child, div.link:last-child > a {
-	border-bottom-left-radius: 18px;
-	border-bottom-right-radius: 18px;
+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;
+q,
+p,
+em {
+  display: block;
+  text-indent: 28px;
 }
 
 p {
-	margin: 0px 0px 16px;
+  margin: 0px 0px 16px;
 }
 
 div#meta {
-	width: 100%;
-	position: fixed;
-	left: 0px;
-	bottom: 0px;
-	text-align: center;
-	font-size: 12px;
+  width: 100%;
+  position: fixed;
+  left: 0px;
+  bottom: 0px;
+  text-align: center;
+  font-size: 12px;
 }
 div#meta > span {
-	background-color: #e1e1e1;
+  background-color: #e1e1e1;
 }