prioritize above-the-fold images

components/notes/List.module.css

@@ -39,6 +39,10 @@
 }
 
 @media screen and (max-width: 768px) {
+  .section {
+    margin: 1.8em 0;
+  }
+
   .year {
     font-size: 2em;
   }

pages/cli.tsx

@@ -36,7 +36,7 @@ const CLI = () => (
         target="_blank"
         rel="noopener noreferrer"
       >
-        <Image src={cliImg} placeholder="blur" alt="Terminal Screenshot" />
+        <Image src={cliImg} placeholder="blur" alt="Terminal Screenshot" priority />
       </a>
       <h2>Usage</h2>
       <pre>

pages/previously.tsx

@@ -44,7 +44,7 @@ const Previously = () => (
           target="_blank"
           rel="noopener noreferrer"
         >
-          <Image src={img_wayback} placeholder="blur" alt="Timeline of this website's past." />
+          <Image src={img_wayback} placeholder="blur" alt="Timeline of this website's past." priority />
         </a>
         <figcaption>
           ...the{" "}

pages/uses.tsx

@@ -34,7 +34,7 @@ const Uses = () => (
         . ❤️
       </p>
 
-      <Image src={desktopImg} placeholder="blur" alt="My mess of a desktop." />
+      <Image src={desktopImg} placeholder="blur" alt="My mess of a desktop." priority />
 
       <h2>🍎 Hardware</h2>
       <ul>