diff options
Diffstat (limited to 'src/pages/index.tsx')
| -rw-r--r-- | src/pages/index.tsx | 295 |
1 files changed, 54 insertions, 241 deletions
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'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'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> - ©2021 kjhoerr@https://submelon.dev/: - {getTimestamp(parseInt(TIMESTAMP))} - </span> - </div> - </StyledContainer> + <Footer timestamp={version} /> </main> ); }; export default IndexPage; +export { Head } from "../components/SEO"; |