Add download, source links. Style footer.

src/footer/Footer.tsx

@@ -5,6 +5,8 @@ import { ReactComponent as Linkedin } from "./icons/linkedin.svg";
 import { ReactComponent as Copy } from "./icons/clipboard.svg";
 import { ReactComponent as CopyFailed } from "./icons/clipboard-sad.svg";
 import { ReactComponent as CopySuccess } from "./icons/clipboard-check.svg";
+import { ReactComponent as SourceCode } from "./icons/code.svg";
+import { ReactComponent as PDF } from "./icons/pdf.svg";
 
 import callme from "./call-me.png";
 import hearts from "./hearts.png";
@@ -138,27 +140,29 @@ export function Footer() {
       </div>
       <div className="meta">
         <div className="social">
-          <a
-            href="https://github.com/theruther4d"
-            data-something="https://github.com/theruther4d"
-          >
-            <span className="offscreen">Github</span>
-            <Github width={36} height={36} />
+          <a href="https://github.com/theruther4d" title="Github">
+            <Github />
           </a>
-          <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 href="https://codepen.io/the_ruther4d" title="Codepen">
+            <Codepen />
           </a>
           <a
             href="https://www.linkedin.com/in/josh-rutherford-b10b2190"
-            data-something="https://www.linkedin.com/in/josh-rutherford-b10b2190"
+            title="Linkedin"
           >
-            <span className="offscreen">Linkedin</span>
-            <Linkedin width={36} height={36} />
+            <Linkedin />
           </a>
+          <div className="gap">
+            <a href="https://github.com/theruther4d/jushy" title="Source">
+              <SourceCode />
+            </a>
+            <a
+              href={`${process.env.PUBLIC_URL}/josh-rutherford-resume.pdf`}
+              title="Download as PDF"
+            >
+              <PDF />
+            </a>
+          </div>
         </div>
         <span className="copyright noprint">
           <img

src/footer/footer.scss

@@ -136,6 +136,21 @@ $img_size: 173px;
     display: flex;
     justify-content: center;
 
+    svg {
+      width: 1rem;
+      height: 1rem;
+
+      @media all and (min-width: 275px) {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      @media all and (min-width: 350px) {
+        width: 2rem;
+        height: 2rem;
+      }
+    }
+
     a {
       display: block;
 
@@ -160,6 +175,28 @@ $img_size: 173px;
         }
       }
     }
+
+    .gap {
+      position: relative;
+      margin-left: 2rem;
+      padding-left: 2rem;
+      display: flex;
+
+      &:before {
+        content: "";
+        width: 1px;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        background: rgba(white, 0.5);
+
+        @media all and (min-width: 632px) {
+          top: -1.75rem;
+          bottom: -1.75rem;
+        }
+      }
+    }
   }
 
   .copyright {
@@ -180,7 +217,7 @@ $img_size: 173px;
     }
   }
 
-  @media all and (min-width: $horizontal_breakpoint) {
+  @media all and (min-width: 632px) {
     .meta {
       justify-content: space-between;
       padding: 0.5rem $gutter 0;

todo.md

@@ -1,22 +1,24 @@
 # TODO:
 
-- clean up copy
 - css vars + shifting $primary color animation? slowly hue rotate?
 
 ## General
 
-- print version => resume
-- downloadable pdf for resume
+- downloadable pdf link
 - clean up repetitive styling for sections
 
 ## Contributions
 
 - overflow indicator
-- legend
-- backwards/forwards arrows?
 - disclaimer?
 - better loading state
 - error state - use error boundary, link to github version?
+- fix month label issue on iOS after adding a few pages
+
+# Self Taught
+
+- add more LOC
+- script to do syntax highlighting for easier changes?
 
 ## Stats