Automated commit at 2023-12-14 02:02:00 UTC by middleman-deploy 2.0.0

index.html

@@ -21,8 +21,13 @@ <h1 class="text-6xl mb-4">I love <br class="md:hidden">solving problems.</h1>
     <p class="mb-4">
       I design, build, and implement web applications. I use Ruby and Rails. And
       of course HTML, CSS, and Javascript. I love bringing design principles to
-      my code.
+      my code. Here are some things I keep in mind:
     </p>
+    <ul class="mb-4 list-disc list-inside">
+      <li>Remember the <a href="https://en.wikipedia.org/wiki/Principle_of_least_astonishment" class="underline" target="_blank">principle of least surprise</a>.</li>
+      <li>Leave things better than you found them.</li>
+      <li>Clever is good, but don't be too clever.</li>
+    </ul>
     <p class="mb-6">
       Sometimes I
       <a href="https://twitter.com/jwilsjustin" class="underline" target="_blank">tweet</a>
@@ -31,7 +36,7 @@ <h1 class="text-6xl mb-4">I love <br class="md:hidden">solving problems.</h1>
       <a href="http://www.linkedin.com/pub/justin-wilson/3/a15/223" class="underline">LinkedIn</a> too.
     </p>
     <p>
-      <a href="/resume.html" class="rounded bg-rose-600 px-4 py-2 text-xs font-semibold text-white shadow-sm hover:bg-blue-900 transition-colors">
+      <a href="/resume.html" class="rounded bg-gradient-to-r from-rose-500 to-orange-600 px-4 py-2 text-xs font-semibold text-white shadow-sm hover:from-rose-600 hover:to-orange-700 transition-colors font-mono">
         View My Resume
       </a>
     </p>

main.css

@@ -684,15 +684,24 @@ video {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-.bg-rose-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(225 29 72 / var(--tw-bg-opacity));
-}
-
 .bg-\[url\(\'\/assets\/images\/grid\.svg\'\)\] {
   background-image: url('/assets/images/grid.svg');
 }
 
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.from-rose-500 {
+  --tw-gradient-from: #f43f5e var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(244 63 94 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-orange-600 {
+  --tw-gradient-to: #ea580c var(--tw-gradient-to-position);
+}
+
 .bg-center {
   background-position: center;
 }
@@ -712,6 +721,10 @@ video {
   padding-bottom: 1.5rem;
 }
 
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 .font-serif {
   font-family: "Gentium Book Basic", Palatino, Georgia, serif;
 }
@@ -804,9 +817,14 @@ video {
     radial-gradient(at 75% 68%, rgb(82, 82, 82) 0, transparent 75%);
 } */
 
-.hover\:bg-blue-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
+.hover\:from-rose-600:hover {
+  --tw-gradient-from: #e11d48 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(225 29 72 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.hover\:to-orange-700:hover {
+  --tw-gradient-to: #c2410c var(--tw-gradient-to-position);
 }
 
 @media (min-width: 640px) {