Tweak copy, refine contact interaction.

src/footer/Footer.tsx

@@ -97,18 +97,19 @@ export function Footer() {
         <h3 className="noprint">Get in touch</h3>
         <div className="contact-button">
           <button
-            disabled={failed}
-            className="copy noprint"
+            disabled={copied || failed}
+            className={cn("copy noprint", { copied, failed })}
             onClick={onCopy}
             title="Copy email address to clipboard"
           >
             <div
-              className={`icon-wrap ${
-                failed ? "failed" : copied ? "success" : ""
-              }`}
+              className={cn("icon-wrap", {
+                failed,
+                success: copied,
+              })}
             >
               <CopySuccess />
-              <Copy />
+              <Copy className="icon" />
               <CopyFailed />
             </div>
           </button>
@@ -127,10 +128,10 @@ export function Footer() {
           <div className="message noprint">
             {failed ? (
               <div className="error-message">
-                Oops! Something went wrong. Try copying it manually 🥲
+                Oops! Something went wrong. Try copying it manually :/
               </div>
             ) : copied ? (
-              <div className="success-message">Copied! 🎉</div>
+              <div className="success-message">Copied!</div>
             ) : null}
           </div>
         </div>

src/footer/footer.scss

@@ -241,6 +241,11 @@ $img_size: 173px;
       position: relative;
       overflow: hidden;
 
+      &.copied,
+      &.failed {
+        cursor: unset;
+      }
+
       .icon-wrap {
         transition: transform 0.25s ease;
         position: absolute;
@@ -270,7 +275,19 @@ $img_size: 173px;
         cursor: unset;
       }
 
-      &:focus {
+      .icon {
+        transition: transform 0.25s ease;
+      }
+
+      &:hover .icon {
+        transform: scale(1.1);
+      }
+
+      &:active .icon {
+        transform: scale(0.9);
+      }
+
+      &:focus-visible {
         outline: none;
         border-color: $primary;
         background: $primary;

src/hero/Hero.tsx

@@ -23,8 +23,8 @@ export function Hero() {
       </header>
       <p className="content">
         I’m a curiosity-driven developer with over 8 years of experience. I've
-        spent most of that time focused on building web apps and UI, for the
-        last 5 years working primarily with React and Typescript.{" "}
+        spent most of that time focused on building web apps and sites, and for
+        the last 5 years I've worked primarily with React and Typescript.{" "}
         {showMore ? null : (
           <button
             className="link noprint"
@@ -41,24 +41,23 @@ export function Hero() {
         aria-hidden={!showMore}
       >
         <p>
-          My background is in design, and in 2013{" "}
+          My background is in design, and in 2013 I left my design job in
+          Arkansas for a{" "}
           <a
             href="https://blog.codepen.io/2013/08/23/josh-rutherford-gets-a-job-on-codepen/"
             rel="noreferrer"
             target="_blank"
             tabIndex={showMore ? undefined : -1}
           >
-            I left my design job in Arkansas for a development gig at a startup
-            in San Francisco
+            development gig
           </a>{" "}
-          after spending the previous year learning web development in my spare
-          time. I got the itch while working on a portfolio site for myself and
-          haven't been able to stop tinkering since.
+          at a startup in San Francisco after spending the previous year
+          learning web development in my spare time.
         </p>
         <p>
-          Currently considering individual contributor roles. Especially
-          interested in areas of nature, biology, physics, art, politics, and
-          literature.{" "}
+          I've got a strong background in the web fundamentals of HTML, CSS, and
+          Javascript while having the wealth of experience of working with React
+          and Typescript since nearly the beginning.{" "}
           <button
             className="link noprint"
             tabIndex={showMore ? undefined : -1}

src/hero/hero.scss

@@ -7,6 +7,7 @@ $horizontal_breakpoint: 724px;
   justify-content: center;
   gap: 2rem;
   grid-template-columns: (minmax(auto, 30rem));
+  max-width: 55rem;
 
   h1 {
     font-size: 3.5rem;

src/history/History.tsx

@@ -131,18 +131,19 @@ export const jobs = [
     Logo: RiskMatch,
     notes: [
       "Promoted to head of UI development in a year",
-      "Hired, trained, and managed team of 3-4 junior developers",
+      "Hired, trained, managed, and mentored team of 3-4 junior developers",
       "Used React, Typescript, Redux, MobX, SCSS, Webpack",
     ],
   },
   {
     name: "Vertafore",
-    title: "Staff Architect",
+    title: "Principal 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",
+      "Promoted to core architecture group at parent company",
+      "Oversaw UI development for entire company's portfolio of apps",
+      "Consulted on all UI-related development company-wide",
     ],
   },
 ];