From d4f172ed203e6f3f6d1143f49c304cea8d45170e Mon Sep 17 00:00:00 2001 From: Kevin J Hoerr Date: Thu, 22 Apr 2021 01:39:47 -0400 Subject: Changes --- src/pages/index.tsx | 149 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 src/pages/index.tsx (limited to 'src/pages/index.tsx') diff --git a/src/pages/index.tsx b/src/pages/index.tsx new file mode 100644 index 0000000..884f829 --- /dev/null +++ b/src/pages/index.tsx @@ -0,0 +1,149 @@ +import React from "react"; +import styled from "styled-components"; +import { StaticImage } from "gatsby-plugin-image"; +import SEO from "../components/SEO"; +import "../styles/main.css"; + +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 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"; +} + +// 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 = () => { + 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 was recently rebuilt in GatsbyJS since the instance formerly holding this website broke during upgrades. Thank goodness for backups.

+ - Kevin H. +
+ +
+ +
©2021 kjhoerr@//submelon.tech/:{getTimestamp(parseInt(process.env.GATSBY_TIMESTAMP))}
+ +
+ ); +}; + +export default IndexPage; -- cgit