diff --git a/src/footer/Footer.tsx b/src/footer/Footer.tsx
index 78c3c7e..f45d64b 100644
--- a/src/footer/Footer.tsx
+++ b/src/footer/Footer.tsx
@@ -13,7 +13,7 @@ import highFive from "./high-five.png";
 
 import "./footer.scss";
 
-const address = "contact@joshrutherford.me";
+export const address = "contact@joshrutherford.me";
 const RESET_MS = 4000;
 
 export function Footer() {
diff --git a/src/hero/Hero.tsx b/src/hero/Hero.tsx
index 179bbc9..256c05e 100644
--- a/src/hero/Hero.tsx
+++ b/src/hero/Hero.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { address } from "../footer/Footer";
 import "./hero.scss";
 import waving from "./waving.png";
 
@@ -20,6 +21,9 @@ export function Hero() {
           <h1>Josh Rutherford</h1>
           <h2>Software Developer</h2>
         </div>
+        <a className="address noscreen" href={`mailto:${address}`}>
+          {address}
+        </a>
       </header>
       <p className="content">
         I’m a curiosity-driven developer with over 8 years of experience. I've
diff --git a/src/hero/hero.scss b/src/hero/hero.scss
index 787d95a..d00fc67 100644
--- a/src/hero/hero.scss
+++ b/src/hero/hero.scss
@@ -8,6 +8,13 @@ $horizontal_breakpoint: 724px;
   gap: 2rem;
   grid-template-columns: (minmax(auto, 30rem));
   max-width: 55rem;
+  position: relative;
+
+  .address {
+    position: absolute;
+    top: 0.25rem;
+    right: 0;
+  }
 
   h1 {
     font-size: 3.5rem;