wadehammes · wadehammes · Dec 21, 2024 · Dec 20, 2024
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@jest/types": "^29.6.3",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/react": "^16.1.0",
+    "classnames": "^2.5.1",
     "gsap": "^3.12.5",
     "html-react-parser": "^5.2.1",
     "next": "^15.1.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/favicon.webp b/public/favicon.webp
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,11 +1,19 @@
 "use client";
 
 import isValidProp from "@emotion/is-prop-valid";
+import { Space_Mono } from "next/font/google";
 import StyledComponentsRegistry from "src/lib/registry";
 import { CSSRootVariables } from "src/styles/cssVariables";
 import { GlobalStyles } from "src/styles/global";
 import { StyleSheetManager } from "styled-components";
 
+const spaceMono = Space_Mono({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+  display: "swap",
+  variable: "--font-mono",
+});
+
 export default function RootLayout({
   // Layouts must accept a children prop.
   // This will be populated with nested layouts or pages
@@ -14,21 +22,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <head>
-        <title>Wade Hammes</title>
-        <link rel="icon" href="favicon.webp" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"
-          rel="stylesheet"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Suez+One&display=swap"
-          rel="stylesheet"
-        />
-      </head>
+    <html
+      lang="en"
+      className={spaceMono.className}
+      style={{ fontFamily: spaceMono.style.fontFamily }}
+    >
       <body>
         <StyledComponentsRegistry>
           <CSSRootVariables />

diff --git a/src/app/manifest.ts b/src/app/manifest.ts
@@ -0,0 +1,21 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "Wade Hammes",
+    short_name: "Wade Hammes",
+    description:
+      "Wade is a software engineer for Rhythm Energy, helping build the best customer experience in retail renewable energy, and a co-founder of Provisioner, a full-service creative agency helping to grow brands.",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#171717",
+    theme_color: "#171717",
+    icons: [
+      {
+        src: "/favicon.ico",
+        sizes: "any",
+        type: "image/x-icon",
+      },
+    ],
+  };
+}
diff --git a/src/app/opengraph-image.alt.txt b/src/app/opengraph-image.alt.txt
@@ -0,0 +1 @@
+Wade Hammes - Software Engineer
diff --git a/src/app/opengraph-image.png b/src/app/opengraph-image.png
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,42 +1,18 @@
-"use client";
+import type { Metadata } from "next";
+import { HomePage } from "src/components/HomePage/HomePage.component";
 
-import { type FC, type ReactElement, useEffect, useState } from "react";
-import { useInView } from "react-intersection-observer";
-import { Bio } from "src/components/Bio/Bio.component";
-import { Footer, FooterActions } from "src/components/Layout";
-import { PageContainer } from "src/components/PageContainer/Page.component";
-import { SpiralsActions } from "src/components/Spirals/SpiralsActions";
-import { SpiralsSVG } from "src/components/Spirals/SpiralsSVG.component";
-import { isBrowser } from "src/utils/helpers";
+export function generateMetadata(): Metadata {
+  return {
+    metadataBase: new URL("https://wadehammes.com/"),
+    creator: "Wade Hammes",
+    publisher: "Wade Hammes",
+    description:
+      "Wade Hammes is a software engineer for Rhythm Energy, helping build the best customer experience in retail renewable energy, and a co-founder of Provisioner, a full-service creative agency helping to grow brands.",
+  };
+}
 
-const Home: FC = (): ReactElement => {
-  const [key, updateKey] = useState<Date>(new Date());
-  const [clientReady, setClientReady] = useState<boolean>(false);
-  const { inView, ref } = useInView({
-    triggerOnce: true,
-    initialInView: true,
-    fallbackInView: true,
-  });
-
-  useEffect(() => {
-    if (isBrowser() && inView) {
-      setClientReady(true);
-    }
-  }, [inView]);
-
-  return (
-    <>
-      <PageContainer ref={ref}>
-        <Footer>
-          <Bio />
-          <FooterActions>
-            <SpiralsActions handleClick={updateKey} />
-          </FooterActions>
-        </Footer>
-      </PageContainer>
-      {clientReady && <SpiralsSVG key={key.toDateString()} visible={inView} />}
-    </>
-  );
+const Home = () => {
+  return <HomePage />;
 };
 
 export default Home;
diff --git a/src/app/robots.ts b/src/app/robots.ts
@@ -0,0 +1,11 @@
+import type { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+    },
+    sitemap: "https://www.wadehammes.com/sitemap-index.xml",
+  };
+}
diff --git a/src/components/Bio/Bio.component.tsx b/src/components/Bio/Bio.component.tsx
@@ -32,6 +32,14 @@ export const Bio = () => (
       <a href="https://instagram.com/wade" target="_blank" rel="noreferrer">
         Instagram
       </a>
+      ,{" "}
+      <a
+        href="https://bsky.app/profile/wadehammes.com"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Bluesky
+      </a>
       , and{" "}
       <a href="https://linktr.ee/wadehammes" target="_blank" rel="noreferrer">
         all other links

diff --git a/src/components/HomePage/HomePage.component.tsx b/src/components/HomePage/HomePage.component.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useInView } from "react-intersection-observer";
+import { Bio } from "src/components/Bio/Bio.component";
+import { Footer, FooterActions } from "src/components/Layout";
+import PageContainer from "src/components/PageContainer/Page.component";
+import SpiralsActions from "src/components/Spirals/SpiralsActions";
+import SpiralsSVG from "src/components/Spirals/SpiralsSVG.component";
+import { isBrowser } from "src/helpers/helpers";
+
+export const HomePage = () => {
+  const [key, updateKey] = useState<Date>(new Date());
+  const [clientReady, setClientReady] = useState<boolean>(false);
+  const { inView, ref } = useInView({
+    triggerOnce: true,
+    initialInView: true,
+    fallbackInView: true,
+  });
+
+  useEffect(() => {
+    if (isBrowser() && inView) {
+      setClientReady(true);
+    }
+  }, [inView]);
+
+  return (
+    <>
+      <PageContainer ref={ref}>
+        <Footer>
+          <Bio />
+          <FooterActions>
+            <SpiralsActions handleClick={updateKey} />
+          </FooterActions>
+        </Footer>
+      </PageContainer>
+      {clientReady && <SpiralsSVG key={key.toDateString()} visible={inView} />}
+    </>
+  );
+};
diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx
@@ -4,8 +4,7 @@ import styled from "styled-components";
 
 export const H1 = styled.h1`
   font-size: 2rem;
-  font-family: "Suez One", serif;
-  font-weight: ${FontWeight.Bold};
+  font-weight: 700;
   padding-bottom: 1.5rem;
   line-height: 1.1;
 

diff --git a/src/styles/cssVariables.ts b/src/styles/cssVariables.ts
@@ -11,7 +11,7 @@ export const CSSRootVariables = createGlobalStyle`
     --colors-green: hsla(145,55%,58%,1);
     --colors-red: hsla(350,95%,58%,0.83);
     --colors-purple: hsla(229,94%,76%,0.915);
-    --colors-trueBlack: #000000;
+    --colors-trueBlack: #171717;
     --colors-alphaBlack: rgba(0, 0, 0, 0.25);
     --sizing-mobilePadding: 2em;
     --sizing-desktopPadding: 5em;

diff --git a/src/styles/global.ts b/src/styles/global.ts
@@ -32,7 +32,7 @@ export const GlobalStyles = createGlobalStyle`
   body {
     background: var(--color-bg);
     color: var(--color-text);
-    font-family: 'Space Mono', monospace;
+    font-family: var(--font-mono);
     font-size: 14px;
     transition: background 0.2s ease-in-out;
 
@@ -42,6 +42,7 @@ export const GlobalStyles = createGlobalStyle`
   }
   body {
     line-height: 1;
+    font-family: var(--font-mono);
   }
   img {
     max-width: 100%;