green. fix header layout on tablet.

src/hero/hero.scss

@@ -1,5 +1,7 @@
 @import "../variables.scss";
 
+$horizontal_breakpoint: 800px;
+
 .hero {
   h1 {
     font-size: 3.5rem;
@@ -24,7 +26,7 @@
     transform: translateY(20px);
     z-index: -1;
 
-    @media all and (min-width: 724px) {
+    @media all and (min-width: $horizontal_breakpoint) {
       transform: translateY(0px);
     }
 
@@ -48,7 +50,7 @@
   header {
     max-width: 30rem;
 
-    @media all and (min-width: 724px) {
+    @media all and (min-width: $horizontal_breakpoint) {
       max-width: unset;
     }
   }
@@ -59,7 +61,7 @@
     }
   }
 
-  @media all and (min-width: 724px) {
+  @media all and (min-width: $horizontal_breakpoint) {
     display: flex;
     justify-content: center;
     padding-top: 4rem;

src/history/history.scss

@@ -48,7 +48,12 @@ $horizontal_breakpoint: 724px;
       right: 0;
       bottom: 0;
       left: 0;
-      background: $primary;
+      background-color: $primary;
+      background-image: linear-gradient(
+        to top left,
+        darken($primary, 8),
+        $primary
+      );
       border-radius: $card_radius;
       top: -1rem;
       right: -1rem;

src/stats/stats.scss

@@ -44,11 +44,11 @@
     &:before {
       content: "";
       background-color: $primary;
-      // background-image: linear-gradient(
-      //   to top right,
-      //   darken($secondary, 10),
-      //   $secondary
-      // );
+      background-image: linear-gradient(
+        to right,
+        darken($primary, 8),
+        $primary
+      );
       border-radius: $card_radius;
       position: absolute;
       top: -1rem;

todo.md

@@ -1,15 +1,14 @@
 # TODO:
 
+- clean up copy
+- css vars + shifting $primary color animation? slowly hue rotate?
+
 ## General
 
 - print version => resume
 - downloadable pdf for resume
 - clean up repetitive styling for sections
 
-## Hero
-
-- add more bio, way to show/hide extended version?
-
 ## Contributions
 
 - overflow indicator