fix: add custom font

Author: thejustinwalsh

src/components/header.jsx

@@ -3,12 +3,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faAdjust, faVolumeMute, faVolumeUp, faSpinner } from "@fortawesome/free-solid-svg-icons"
 
 import { useTheme } from "../context/theme"
-import { useAudio } from "../context/audio"
 
 const Header = () => {
   const { toggleDarkMode } = useTheme()
-  const { start, stop, synth, fetching } = useAudio()
-  const spinner = fetching && faSpinner
 
   return (
     <header>
@@ -18,19 +15,6 @@ const Header = () => {
             <div className="flex-1 flex items-center justify-end sm:items-stretch">
               <div className="block ml-8 text-gray-800 dark:text-gray-100 transition-none">
                 <div className="flex space-x-4 sm:text-base md:text-lg text-sm">
-                  <button
-                    type="button"
-                    aria-label="audio volume"
-                    className="flex-grow focus:outline-none"
-                    onClick={() => (synth ? stop() : start())}
-                  >
-                    <FontAwesomeIcon
-                      icon={spinner || synth ? faVolumeUp : faVolumeMute}
-                      size="1x"
-                      alt="audio volume"
-                    />
-                  </button>
-
                   <button
                     type="button"
                     aria-label="toggle theme"

src/components/layout.jsx

@@ -2,7 +2,6 @@ import React from "react"
 import styled from "astroturf/react"
 
 import { ThemeProvider } from "../context/theme"
-import { AudioProvider } from "../context/audio"
 import Header from "./header"
 
 const Layout = ({ children }) => {
@@ -12,12 +11,10 @@ const Layout = ({ children }) => {
 
   return (
     <ThemeProvider>
-      <AudioProvider>
-        <div className="flex flex-col h-screen bg-white dark:bg-black transition-none">
-          <Header />
-          <Content>{children}</Content>
-        </div>
-      </AudioProvider>
+      <div className="flex flex-col h-screen bg-white dark:bg-black transition-none">
+        <Header />
+        <Content>{children}</Content>
+      </div>
     </ThemeProvider>
   )
 }

src/pages/index.jsx

@@ -3,80 +3,74 @@ import styled from "astroturf/react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faTwitter, faGithub, faLinkedin, faDiscord } from "@fortawesome/free-brands-svg-icons"
 
-import { useAudio } from "../context/audio"
-
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 
-const Greeting = styled.h1`
+const TitlePrefix = styled.span`
+  ${"@apply leading-normal font-title"};
+`
+const TitlePostfix = styled.span`
   background-clip: text;
   -webkit-text-fill-color: transparent;
-  ${"@apply leading-normal font-sans font-semibold text-black bg-black"};
+  ${"@apply leading-normal font-title-light text-black bg-black"};
   ${"@apply bg-gradient-to-r from-purple-700 via-red-500 to-yellow-500"};
 `
 
-const SocialIcons = () => {
-  const { playNote } = useAudio()
-
-  return (
-    <div className="flex font-normal leading-none align-middle text-center text-black dark:text-white sm:text-3xl md:text-5xl text-1xl transition-none">
-      {/* }
+const SocialIcons = () => (
+  <div className="flex font-normal leading-none align-middle text-center text-black dark:text-white sm:text-3xl md:text-5xl text-1xl transition-none">
+    {/* }
       <a href="https://twitter.com/thejustinwalsh" className="flex-grow">
         <FontAwesomeIcon
           className="transform transition-transform duration-200 hover:scale-125"
           icon={faTwitter}
           size="1x"
           alt="twitter"
-          onMouseEnter={() => playNote("C")}
         />
         <span className="hidden">Twitter</span>
       </a>
       */}
-      <a href="https://github.com/tjw-dev" className="flex-grow">
-        <FontAwesomeIcon
-          className="transform transition-transform duration-200 hover:scale-125"
-          icon={faGithub}
-          size="1x"
-          alt="github"
-          onMouseEnter={() => playNote("D")}
-        />
-        <span className="hidden">Github</span>
-      </a>
-      {/* }
+    <a href="https://github.com/tjw-dev" className="flex-grow">
+      <FontAwesomeIcon
+        className="transform transition-transform duration-200 hover:scale-125"
+        icon={faGithub}
+        size="1x"
+        alt="github"
+      />
+      <span className="hidden">Github</span>
+    </a>
+    {/* }
       <a href="https://www.linkedin.com/in/justinwalsh/" className="flex-grow">
         <FontAwesomeIcon
           className="transform transition-transform duration-200 hover:scale-125"
           icon={faLinkedin}
           size="1x"
           alt="linkedin"
-          onMouseEnter={() => playNote("E")}
         />
         <span className="hidden">LinkedIn</span>
       </a>
       */}
-      <a href="https://discord.gg/SzxMh6GjS8" className="flex-grow">
-        <FontAwesomeIcon
-          className="transform transition-transform duration-200 hover:scale-125"
-          icon={faDiscord}
-          size="1x"
-          alt="discord"
-          onMouseEnter={() => playNote("G")}
-        />
-        <span className="hidden">Discord</span>
-      </a>
-    </div>
-  )
-}
+    <a href="https://discord.gg/SzxMh6GjS8" className="flex-grow">
+      <FontAwesomeIcon
+        className="transform transition-transform duration-200 hover:scale-125"
+        icon={faDiscord}
+        size="1x"
+        alt="discord"
+      />
+      <span className="hidden">Discord</span>
+    </a>
+  </div>
+)
 
 const IndexPage = () => (
   <Layout>
     <SEO title="Home" />
     <div className="container mx-auto h-full flex justify-center items-center">
       <div className="flex">
         <div className="px-6 text-left">
-          <Greeting className="sm:text-7xl md:text-8xl text-4xl md:text-left text-center">
-            tjw.DEV
-          </Greeting>
+          <h1 className="sm:text-7xl md:text-8xl text-4xl md:text-left text-center">
+            <TitlePrefix className="text-black dark:text-white transition-none">tjw</TitlePrefix>
+            <TitlePostfix>.dev</TitlePostfix>
+          </h1>
           <SocialIcons />
         </div>
       </div>

src/styles/global.css

@@ -2,3 +2,20 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* ./src/styles/global.css */
+@font-face {
+  font-family: "TJW Title";
+  src: url("tjw-title.woff2") format("woff2"), url("tjw-title.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "TJW Title Light";
+  src: url("tjw-title-light.woff2") format("woff2"), url("tjw-title-light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}

src/styles/tjw-title-light.woff

@@ -7,6 +7,10 @@ module.exports = {
     extend: {
       animation: {},
       keyframes: {},
+      fontFamily: {
+        title: ["'TJW Title', sans-serif"],
+        "title-light": ["'TJW Title Light', sans-serif"],
+      },
     },
   },
   variants: {