diff --git a/components/ContactForm/ContactForm.tsx b/components/ContactForm/ContactForm.tsx
index 9a13aa6b..196a38f2 100644
--- a/components/ContactForm/ContactForm.tsx
+++ b/components/ContactForm/ContactForm.tsx
@@ -78,7 +78,7 @@ const SubmitButton = styled("button", {
   color: theme.colors.text,
   backgroundColor: theme.colors.kindaLight,
 
-  "&:hover": {
+  "&:hover, &:focus-visible": {
     color: theme.colors.superDuperLight,
     backgroundColor: theme.colors.link,
   },
diff --git a/components/CopyButton/CopyButton.tsx b/components/CopyButton/CopyButton.tsx
index 857319c0..a507b4af 100644
--- a/components/CopyButton/CopyButton.tsx
+++ b/components/CopyButton/CopyButton.tsx
@@ -17,7 +17,7 @@ const Button = styled("button", {
       false: {
         color: theme.colors.mediumDark,
 
-        "&:hover": {
+        "&:hover, &:focus-visible": {
           color: theme.colors.link,
         },
       },
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index 1aed5532..038a8141 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -38,7 +38,7 @@ const PlainLink = styled(Link, {
 });
 
 const NextjsLink = styled(PlainLink, {
-  "&:hover": {
+  "&:hover, &:focus-visible": {
     color: theme.colors.medium,
   },
 });
@@ -47,7 +47,7 @@ const ViewSourceLink = styled(PlainLink, {
   paddingBottom: "2px",
   borderBottom: `1px solid ${theme.colors.light}`,
 
-  "&:hover": {
+  "&:hover, &:focus-visible": {
     borderColor: theme.colors.kindaLight,
   },
 });
diff --git a/components/Heading/Heading.tsx b/components/Heading/Heading.tsx
index eb778de2..290901c3 100644
--- a/components/Heading/Heading.tsx
+++ b/components/Heading/Heading.tsx
@@ -9,7 +9,7 @@ const Anchor = styled(HeadingAnchor, {
   color: theme.colors.medium,
   opacity: 0, // overridden on hover below (except on small screens)
 
-  "&:hover": {
+  "&:hover, &:focus-visible": {
     color: theme.colors.link,
   },
 
diff --git a/components/Link/Link.tsx b/components/Link/Link.tsx
index 9c65bab5..fea64f58 100644
--- a/components/Link/Link.tsx
+++ b/components/Link/Link.tsx
@@ -25,7 +25,7 @@ const StyledLink = styled(NextLink, {
           transition: `background-size ${theme.transitions.linkHover}`,
         },
 
-        "&:hover": {
+        "&:hover, &:focus-visible": {
           backgroundSize: `100% ${theme.borderWidths.underline}`,
         },
       },
diff --git a/components/Loading/Loading.tsx b/components/Loading/Loading.tsx
index e158e299..a6ab6cfd 100644
--- a/components/Loading/Loading.tsx
+++ b/components/Loading/Loading.tsx
@@ -1,15 +1,6 @@
 import { styled, theme, keyframes } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";
 
-const pulse = keyframes({
-  "0%, 80%, 100%": {
-    transform: "scale(0)",
-  },
-  "40%": {
-    transform: "scale(0.6)",
-  },
-});
-
 const Wrapper = styled("div", {
   display: "inline-block",
   textAlign: "center",
@@ -18,7 +9,14 @@ const Wrapper = styled("div", {
 const Box = styled("div", {
   display: "inline-block",
   height: "100%",
-  animation: `${pulse} 1.5s infinite ease-in-out both`,
+  animation: `${keyframes({
+    "0%, 80%, 100%": {
+      transform: "scale(0)",
+    },
+    "40%": {
+      transform: "scale(0.6)",
+    },
+  })} 1.5s infinite ease-in-out both`,
   backgroundColor: theme.colors.mediumLight,
 });
 
diff --git a/components/MenuItem/MenuItem.tsx b/components/MenuItem/MenuItem.tsx
index d470f906..950d5892 100644
--- a/components/MenuItem/MenuItem.tsx
+++ b/components/MenuItem/MenuItem.tsx
@@ -14,7 +14,7 @@ const MenuLink = styled(Link, {
         borderBottom: `0.2em solid ${theme.colors.linkUnderline}`,
       },
       false: {
-        "&:hover": {
+        "&:hover, &:focus-visible": {
           marginBottom: "-0.2em",
           borderBottom: `0.2em solid ${theme.colors.kindaLight}`,
         },
diff --git a/components/OctocatLink/OctocatLink.tsx b/components/OctocatLink/OctocatLink.tsx
index a19e60e0..e216e6e7 100644
--- a/components/OctocatLink/OctocatLink.tsx
+++ b/components/OctocatLink/OctocatLink.tsx
@@ -7,7 +7,7 @@ const GitHubLink = styled(Link, {
   margin: "0 0.4em",
   color: theme.colors.text,
 
-  "&:hover": {
+  "&:hover, &:focus-visible": {
     color: theme.colors.link,
   },
 });
diff --git a/components/RepositoryCard/RepositoryCard.tsx b/components/RepositoryCard/RepositoryCard.tsx
index c44c636b..791f0272 100644
--- a/components/RepositoryCard/RepositoryCard.tsx
+++ b/components/RepositoryCard/RepositoryCard.tsx
@@ -42,7 +42,7 @@ const MetaItem = styled("div", {
 const MetaLink = styled(Link, {
   color: "inherit",
 
-  "&:hover": {
+  "&:hover, &:focus-visible": {
     color: theme.colors.link,
   },
 });
diff --git a/components/Selfie/Selfie.tsx b/components/Selfie/Selfie.tsx
index 2624b902..a5e09873 100644
--- a/components/Selfie/Selfie.tsx
+++ b/components/Selfie/Selfie.tsx
@@ -24,7 +24,7 @@ const SelfieLink = styled(Link, {
   alignItems: "center",
   color: theme.colors.mediumDark,
 
-  "&:hover": {
+  "&:hover, &:focus-visible": {
     color: theme.colors.link,
 
     "@medium": {
diff --git a/components/ThemeToggle/ThemeToggle.tsx b/components/ThemeToggle/ThemeToggle.tsx
index e38b093f..70bef976 100644
--- a/components/ThemeToggle/ThemeToggle.tsx
+++ b/components/ThemeToggle/ThemeToggle.tsx
@@ -14,7 +14,7 @@ const Button = styled("button", {
   cursor: "pointer",
   color: theme.colors.mediumDark,
 
-  "&:hover": {
+  "&:hover, &:focus-visible": {
     color: theme.colors.warning,
   },
 });
diff --git a/pages/index.tsx b/pages/index.tsx
index 4e7fd2ca..a961f607 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -103,13 +103,6 @@ const Quiet = styled("span", {
   color: theme.colors.mediumLight,
 });
 
-const EasterEgg = styled(ColorfulLink, {
-  // rotated 🪄 emoji on hover
-  "&:hover": {
-    cursor: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='30' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-20, 6)'>🪄</text></svg>") 5 5, auto`,
-  },
-});
-
 const Index = () => {
   return (
     <>
@@ -225,14 +218,20 @@ const Index = () => {
           backend programming
         </ColorfulLink>{" "}
         back when my only source of income was{" "}
-        <EasterEgg
+        <ColorfulLink
           href="/birthday/"
           title="🎉 Cranky Birthday Boy on VHS Tape 📼"
           lightColor="#e40088"
           darkColor="#fd40b1"
+          css={{
+            // rotated 🪄 emoji on hover
+            "&:hover": {
+              cursor: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='30' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-20, 6)'>🪄</text></svg>") 5 5, auto`,
+            },
+          }}
         >
           the Tooth Fairy
-        </EasterEgg>
+        </ColorfulLink>
         . <Quiet>I've improved a bit since then, I think? 🤷</Quiet>
       </Paragraph>