diff --git a/src/App.scss b/src/App.scss
index 3503a3f..3aeb9dc 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -22,10 +22,20 @@ html {
   fill: white;
   font-size: 16px;
   overflow-x: hidden;
+
+  @media print {
+    background: white;
+    color: black;
+    fill: black;
+  }
 }
 
 body {
   padding: 2rem 0 0;
+
+  @media print {
+    padding: 0;
+  }
 }
 
 h1,
@@ -41,6 +51,10 @@ h6 {
   em {
     color: $primary;
     font-style: normal;
+
+    @media print {
+      color: black;
+    }
   }
 }
 
@@ -49,6 +63,11 @@ h3 {
   line-height: 2.625rem;
   font-weight: 800;
   margin: 0.5rem auto;
+
+  @media print {
+    font-size: 1.25rem;
+    line-height: 1.25rem;
+  }
 }
 
 p {
@@ -57,6 +76,13 @@ p {
   line-height: 2rem;
   color: rgba(255, 255, 255, 0.7);
   margin: 2rem auto;
+
+  @media print {
+    color: black;
+    margin: 0.25rem auto;
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
 }
 
 section {
@@ -64,6 +90,10 @@ section {
   margin: 0 auto;
   padding: 0 $gutter;
   overflow: hidden;
+
+  @media print {
+    max-width: none;
+  }
 }
 
 section + section {
@@ -72,11 +102,20 @@ section + section {
   @media all and (min-width: 1000px) {
     margin-top: 4rem;
   }
+
+  @media print {
+    margin-top: 0.5rem;
+  }
 }
 
 a {
   color: $primary;
   text-decoration: underline;
+
+  @media print {
+    color: black;
+    text-decoration: none;
+  }
 }
 
 .breakable {
@@ -112,4 +151,21 @@ button.link {
   &:disabled {
     color: desaturate($color: $primary, $amount: 75);
   }
+
+  @media print {
+    color: black;
+    text-decoration: none;
+  }
+}
+
+.noprint {
+  @media print {
+    display: none !important;
+  }
+}
+
+.noscreen {
+  @media screen {
+    display: none;
+  }
 }
diff --git a/src/contributions/Contributions.tsx b/src/contributions/Contributions.tsx
index 198ce60..5f1b7b3 100644
--- a/src/contributions/Contributions.tsx
+++ b/src/contributions/Contributions.tsx
@@ -49,7 +49,7 @@ export function Contributions() {
   }, 0);
 
   return (
-    <section className="contributions">
+    <section className="contributions noprint">
       <h3 className="breakable">Code Contributions ({totalContributions})</h3>
       {isLoading ? (
         <p>Loading...</p>
diff --git a/src/footer/Footer.tsx b/src/footer/Footer.tsx
index 00b8899..0988f16 100644
--- a/src/footer/Footer.tsx
+++ b/src/footer/Footer.tsx
@@ -62,7 +62,7 @@ export function Footer() {
 
   return (
     <footer className="footer">
-      <div className="contact" id="get-in-touch">
+      <div className="contact noprint" id="get-in-touch">
         <figure className={failed ? "failed" : copied ? "copied" : ""}>
           <img
             className="uncopied-img"
@@ -132,15 +132,24 @@ export function Footer() {
       </div>
       <div className="meta">
         <div className="social">
-          <a href="https://github.com/theruther4d">
+          <a
+            href="https://github.com/theruther4d"
+            data-something="https://github.com/theruther4d"
+          >
             <span className="offscreen">Github</span>
             <Github width={36} height={36} />
           </a>
-          <a href="https://codepen.io/the_ruther4d">
+          <a
+            href="https://codepen.io/the_ruther4d"
+            data-something="https://codepen.io/the_ruther4d"
+          >
             <span className="offscreen">Codepen</span>
             <Codepen width={36} height={36} />
           </a>
-          <a href="https://www.linkedin.com/in/josh-rutherford-b10b2190">
+          <a
+            href="https://www.linkedin.com/in/josh-rutherford-b10b2190"
+            data-something="https://www.linkedin.com/in/josh-rutherford-b10b2190"
+          >
             <span className="offscreen">Linkedin</span>
             <Linkedin width={36} height={36} />
           </a>
diff --git a/src/footer/footer.scss b/src/footer/footer.scss
index 8a7da16..b6d8b3e 100644
--- a/src/footer/footer.scss
+++ b/src/footer/footer.scss
@@ -98,6 +98,10 @@ $img_size: 173px;
       margin-bottom: 2rem;
       text-shadow: 0 0 4px black;
     }
+
+    @media print {
+      max-width: none;
+    }
   }
 
   .meta {
@@ -110,6 +114,10 @@ $img_size: 173px;
     padding: 2rem $gutter 0;
     border-top: 1px solid rgba(white, 0.5);
     overflow: hidden;
+
+    @media print {
+      max-width: none;
+    }
   }
 
   .copyright,
@@ -129,6 +137,22 @@ $img_size: 173px;
       + a {
         margin-left: 1rem;
       }
+
+      @media print {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        &:after {
+          content: attr(href);
+        }
+
+        svg {
+          width: 1.5rem;
+          height: 1.5rem;
+          margin-right: 0.5rem;
+        }
+      }
     }
   }
 
@@ -144,6 +168,10 @@ $img_size: 173px;
       vertical-align: middle;
       margin-right: 0.5rem;
     }
+
+    @media print {
+      color: black;
+    }
   }
 
   @media all and (min-width: $horizontal_breakpoint) {
@@ -295,6 +323,10 @@ $img_size: 173px;
 
   .fill-target {
     fill: white;
+
+    @media print {
+      fill: black;
+    }
   }
 
   a:hover {
diff --git a/src/hero/Hero.tsx b/src/hero/Hero.tsx
index 4543a9d..3931271 100644
--- a/src/hero/Hero.tsx
+++ b/src/hero/Hero.tsx
@@ -8,7 +8,7 @@ export function Hero() {
   return (
     <section className="hero">
       <header>
-        <figure>
+        <figure className="noprint">
           <img
             src={waving}
             alt="Cartoon of me waving"
@@ -27,7 +27,7 @@ export function Hero() {
         last 5 years working primarily with React and Typescript.{" "}
         {showMore ? null : (
           <button
-            className="link"
+            className="link noprint"
             onClick={function toggle() {
               setShowMore((showing) => !showing);
             }}
diff --git a/src/hero/hero.scss b/src/hero/hero.scss
index 0cdf6b6..67e4af6 100644
--- a/src/hero/hero.scss
+++ b/src/hero/hero.scss
@@ -8,16 +8,32 @@ $horizontal_breakpoint: 724px;
   gap: 2rem;
   grid-template-columns: (minmax(auto, 30rem));
 
+  @media print {
+    grid-template-columns: none;
+    gap: 0.5rem;
+  }
+
   h1 {
     font-size: 3.5rem;
     line-height: 3rem;
     margin: 0;
     color: $primary;
+
+    @media print {
+      font-size: 1.75rem;
+      color: black;
+    }
   }
 
   h2 {
     font-size: 1.25rem;
     margin: 0.25rem 0 0;
+
+    @media print {
+      font-size: 1rem;
+      margin: 0;
+      color: rgba(black, 0.5);
+    }
   }
 
   p {
@@ -54,6 +70,16 @@ $horizontal_breakpoint: 724px;
     &:not(.visible) {
       @extend .offscreen;
     }
+
+    @media print {
+      width: unset !important;
+      height: unset !important;
+      overflow: unset !important;
+      position: unset !important;
+      top: unset !important;
+      left: unset !important;
+      grid-column: unset;
+    }
   }
 
   @media all and (min-width: $horizontal_breakpoint) {
diff --git a/src/history/History.tsx b/src/history/History.tsx
index 2783a52..3da4220 100644
--- a/src/history/History.tsx
+++ b/src/history/History.tsx
@@ -6,7 +6,7 @@ import { ReactComponent as RiskMatch } from "./logos/riskmatch.svg";
 import { ReactComponent as Vertafore } from "./logos/vertafore.svg";
 
 import "./history.scss";
-import { Fragment, MouseEvent } from "react";
+import { MouseEvent } from "react";
 
 const today = new Date();
 const contactId = "get-in-touch";
@@ -27,7 +27,7 @@ export function History() {
 
   return (
     <section className="history">
-      <header>
+      <header className="noprint">
         <h3>
           I've been lucky to work on some <em>amazing</em> teams.
         </h3>
@@ -43,8 +43,7 @@ export function History() {
         <article className="card">
           <div className="card-content">
             <h3>
-              Employment
-              <br />
+              Employment <br className="noprint" />
               History
             </h3>
             <dl>
@@ -54,7 +53,7 @@ export function History() {
                 const duration = formatDistance(start, end);
 
                 return (
-                  <Fragment key={`${job.name}-${job.title}`}>
+                  <li key={`${job.name}-${job.title}`} className="item">
                     <dt>{job.name}</dt>
                     <dd>
                       <figure>
@@ -75,8 +74,13 @@ export function History() {
                         {" - "}
                         <time>{duration}</time>
                       </span>
+                      <ul className="notes noscreen">
+                        {job.notes.map((note) => (
+                          <li key={note}>{note}</li>
+                        ))}
+                      </ul>
                     </dd>
-                  </Fragment>
+                  </li>
                 );
               })}
             </dl>
@@ -94,6 +98,10 @@ export const jobs = [
     start: "July 1 2013",
     end: "November 30 2015",
     Logo: Sourcebits,
+    notes: [
+      "Built app marketing websites",
+      "After 1 year hired and trained junior developers offshore",
+    ],
   },
   {
     name: "Apple",
@@ -101,6 +109,7 @@ export const jobs = [
     start: "December 1 2015",
     end: "May 31 2016",
     Logo: Apple,
+    notes: ["Built product marketing pages for apple.com"],
   },
   {
     name: "RiskMatch",
@@ -108,6 +117,11 @@ export const jobs = [
     start: "June 1 2016",
     end: "May 31 2017",
     Logo: RiskMatch,
+    notes: [
+      "Prototyped new UI features and wrote production CSS",
+      "Converted from legacy PHP setup to React + Webpack + Typescript",
+      "Unified Prototyping and frontend development processes to save speed up delivery",
+    ],
   },
   {
     name: "RiskMatch",
@@ -115,12 +129,22 @@ export const jobs = [
     start: "Jun 1 2017",
     end: "December 31 2020",
     Logo: RiskMatch,
+    notes: [
+      "Promoted to head of UI development in a year",
+      "Hired, trained, and managed team of 3-4 junior developers",
+      "Oversaw development of InsureTech web app",
+      "Used React, Typescript, Redux, MobX, SCSS, Webpack",
+    ],
   },
   {
     name: "Vertafore",
     title: "Staff Architect",
     start: "January 1 2021",
     Logo: Vertafore,
+    notes: [
+      "Promoted to core architechture group at parent company",
+      "Oversee UI development for entire companies portfolio of products",
+    ],
   },
 ];
 const jobsDescending = [...jobs].reverse();
diff --git a/src/history/history.scss b/src/history/history.scss
index 8c47668..e8d96f6 100644
--- a/src/history/history.scss
+++ b/src/history/history.scss
@@ -11,9 +11,17 @@ $horizontal_breakpoint: 724px;
   margin-left: auto;
   margin-right: auto;
 
+  @media print {
+    max-width: none;
+  }
+
   h3,
   p {
     max-width: 30rem;
+
+    @media print {
+      max-width: none;
+    }
   }
 
   @media all and (min-width: $horizontal_breakpoint) {
@@ -79,6 +87,33 @@ $horizontal_breakpoint: 724px;
       position: relative;
       z-index: 1;
     }
+
+    @media print {
+      margin: 0;
+      max-width: none;
+      display: block;
+      color: black;
+
+      &:before {
+        display: none;
+      }
+
+      .card-content {
+        transform: none;
+      }
+
+      h3 {
+        padding: 0;
+        font-size: 1.25rem;
+        line-height: 1.25rem;
+      }
+    }
+  }
+
+  .item {
+    list-style-type: none;
+    padding: 0;
+    page-break-inside: avoid;
   }
 
   dl,
@@ -91,10 +126,18 @@ $horizontal_breakpoint: 724px;
   dt,
   dd {
     padding: 0 $card_padding 0 0;
+
+    @media print {
+      padding: 0;
+    }
   }
 
   dl {
     padding-left: calc(#{$logo_area} + (#{$logo_padding} * 2));
+
+    @media print {
+      padding-left: calc(#{$logo_area} + (#{$logo_padding} * 1));
+    }
   }
 
   dt {
@@ -141,10 +184,18 @@ $horizontal_breakpoint: 724px;
     box-shadow: 0 4px 7px 1px rgba($black, 0.2),
       0 16px 10px -12px rgba($black, 0.4);
 
+    @media print {
+      top: -2rem;
+    }
+
     svg {
       width: $logo_size;
       height: $logo_size;
       fill: $black;
+
+      @media print {
+        fill: black;
+      }
     }
   }
 
@@ -164,5 +215,17 @@ $horizontal_breakpoint: 724px;
   .when {
     font-size: 0.75rem;
     font-weight: 600;
+
+    @media print {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
+
+  .notes {
+    padding: 0 0 0 1rem;
+    margin: 0;
+    font-size: 0.875rem;
   }
 }
diff --git a/src/self-taught/SelfTaught.tsx b/src/self-taught/SelfTaught.tsx
index 9a2ebd2..755315b 100644
--- a/src/self-taught/SelfTaught.tsx
+++ b/src/self-taught/SelfTaught.tsx
@@ -10,12 +10,12 @@ export function SelfTaught() {
           From 0 to landing my first development job in San Francisco in under a
           year. Working at apple in 2.5 years. Team Lead in 3.
         </p>
-        <p>
+        <p className="noprint">
           I'm a self-starter who hates to be bored. I love learning new things
           and my best days are when I'm busy solving tough problems.
         </p>
       </main>
-      <aside>
+      <aside className="noprint">
         <figure>
           <div aria-hidden>
             <pre>
diff --git a/src/self-taught/self-taught.scss b/src/self-taught/self-taught.scss
index fb75737..6280f66 100644
--- a/src/self-taught/self-taught.scss
+++ b/src/self-taught/self-taught.scss
@@ -10,6 +10,10 @@ $dark: darken($light, 11);
     h3,
     p {
       max-width: 30rem;
+
+      @media print {
+        max-width: none;
+      }
     }
   }
 
diff --git a/src/stats/stats.scss b/src/stats/stats.scss
index 3746c56..4194062 100644
--- a/src/stats/stats.scss
+++ b/src/stats/stats.scss
@@ -11,6 +11,10 @@ $black: darken($primary, 35);
     h3,
     p {
       max-width: 30rem;
+
+      @media print {
+        max-width: none;
+      }
     }
   }
 
diff --git a/src/variables.scss b/src/variables.scss
index 33adf1c..f4a5a22 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -13,3 +13,14 @@ $card_radius: 2rem;
   top: -2000px;
   left: -2000px;
 }
+
+.onscreen-print {
+  @media print {
+    width: unset;
+    height: unset;
+    overflow: unset;
+    position: unset;
+    top: unset;
+    left: unset;
+  }
+}