feat: style updates

.gitignore

@@ -10,3 +10,4 @@ yarn-error.log*
 public/*
 !public/favicon.png
 !public/pgp.txt
+!public/fonts*

src/constants.js

@@ -11,7 +11,7 @@ export const COLORS = {
 }
 
 export const FONT_FAMILIES = {
-  MONOSPACE: 'Roboto Mono, monospace'
+  MONOSPACE: 'Berkeley Mono, monospace'
 }
 
 export const FONT_SIZES = {

src/containers/hero.js

@@ -28,6 +28,7 @@ const Title = styled.h2`
   line-height: 1.5;
   text-align: center;
 `
+
 const Hero = styled.section`
   align-items: center;
   animation: ${animations.fadeInDown} ${TIMINGS.LONG} ease ${TIMINGS.SHORT} 1 forwards;
@@ -54,7 +55,7 @@ export default () => (
       Tyler O'Donnell
     </Headline>
     <Title>
-      Senior Infosec Engineering Manager at <Role href='https://articulate.com' target='_blank' rel='noopener noreferrer'>Articulate</Role>
+      Information Security Leader
     </Title>
   </Hero>
 )

src/containers/links.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { FaEnvelope, FaGithub, FaKeybase, FaLinkedin } from 'react-icons/fa'
+import { FaEnvelope, FaGithub, FaKey, FaLinkedin } from 'react-icons/fa'
 
 import { Link } from '../components'
 import {
@@ -31,8 +31,8 @@ export default () => (
       <FaLinkedin />
     </Link>
 
-    <Link href='https://keybase.io/tylerodonnell' target='_blank' rel='noopener noreferrer'>
-      <FaKeybase />
+    <Link href='/pgp.txt' target='_blank' rel='noopener noreferrer'>
+      <FaKey />
     </Link>
   </Links>
 )

src/index.html

@@ -16,12 +16,11 @@
     />
     <title>Tyler O'Donnell</title>
     <link
-      href="https://fonts.gstatic.com"
-      rel="preconnect"
-    >
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;600&display=swap"
-      rel="stylesheet"
+      href="/fonts/BerkeleyMono-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      rel="preload"
+      crossorigin
     >
     <style>
       html {