From 299159ab2b4b1488cfc99e38c921e35d61a1264a Mon Sep 17 00:00:00 2001 From: Kevin J Hoerr Date: Fri, 18 Nov 2022 17:57:24 -0500 Subject: Refactor components and styles to be consistent --- src/pages/404.tsx | 60 +++-------- src/pages/index.tsx | 285 ++++++++++------------------------------------------ 2 files changed, 67 insertions(+), 278 deletions(-) (limited to 'src/pages') 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 ( -
- Not found -

Page not found

-

- Sorry{" "} - - 😔 - {" "} - we couldn’t find what you were looking for. -
- {process.env.NODE_ENV === "development" ? ( - <> -
- Try creating a page in src/pages/. -
- - ) : null} -
- Go home. -

+
+ + Not found + + Sorry{" "} + + 😔 + {" "} + we couldn't find what you were looking for. + + + Home + +
); }; 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 (
- -
- -
Hello!
-
-

- 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. -

-

- 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. -

-

- This site was recently rebuilt using GatsbyJS since the instance - formerly holding this website broke during upgrades. Thank - goodness for backups. -

- - Kevin H. -
- + +
+
+ Hello! + +

+ 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. +

+

+ 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. +

+

+ This site was recently rebuilt using GatsbyJS since the instance + formerly holding this website broke during upgrades. Thank goodness + for backups. +

+ - Kevin H. + + + {" "} + @kjhoerr@cybr.es + + + kjhoerr on + GitHub + + -
- - ©2022 kjhoerr@https://submelon.dev/: - {getTimestamp(parseInt(TIMESTAMP))} - -
- +
); }; -- cgit