Numerous style updates to keep image sizes from getting out of hand

src/components/AboutMe/AboutMe.scss

@@ -26,11 +26,12 @@
     width: fit-content;
 
     #info-parent {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
+      display: flex;
+      flex-direction: row;
+      gap: 5px;
 
       @media screen and (max-width: 660px) {
-        grid-template-columns: 1fr;
+        flex-direction: column;
       }
     }
 
@@ -66,11 +67,11 @@
     li {
       font-family: "Montserrat", sans-serif;
       font-size: 18px;
-      list-style-type: symbols("+");
+      list-style-type: symbols(">");
       list-style-position: inside;
     }
     li::-moz-list-bullet {
-      content: "+ ";
+      content: "> ";
     }
   }
 

src/components/AboutMe/Age.tsx

@@ -54,7 +54,7 @@ export function Age() {
     }
 
     function CalcAge() {
-        let ageMs = new Date().getTime() - 1021004428000;
+        let ageMs = new Date().getTime() - 1021288800000;
         const yearMs = milliseconds_year();
         const ageYearsComponent = Math.floor(ageMs / yearMs);
         const ageSecondsComponent = Math.floor((ageMs % yearMs) / 1000);

src/components/ProjectGrid.scss

@@ -202,10 +202,22 @@ $breakpoints: (x-small: 520px, small: 760px, medium: 1100px, large: 1400px, x-la
   flex-direction: column;
   width: available;
 
+  .image {
+    margin-bottom: 5px;
+    width: 100%;
+    max-width: 225px;
+  }
+
   img {
     width: 100%;
     margin-bottom: 5px;
   }
+
+  .GridElementInternal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 }
 
 .Medium {
@@ -214,10 +226,18 @@ $breakpoints: (x-small: 520px, small: 760px, medium: 1100px, large: 1400px, x-la
     margin-bottom: 5px;
   }
 
+  .image {
+    max-width: 225px;
+  }
+
   @include media("<medium") {
+    .GridElementInternal {
       display: flex;
       flex-direction: column;
       width: available;
+      align-items: center;
+    }
+
 
     img {
       width: 100%;
@@ -299,6 +319,7 @@ $breakpoints: (x-small: 520px, small: 760px, medium: 1100px, large: 1400px, x-la
   background: var(--chainlink-icon-background);
   border-radius: 5px;
 }
+
 svg {
   fill: var(--chainlink-icon-color);
 }

src/components/ProjectGrid.tsx

@@ -248,7 +248,7 @@ export function ProjectGrid() {
         <div id={"project-grid"} aria-label={"Projects Grid"}>
           <div className={"GridSizer"} />
           <SmallElement
-            title={"ElaticMatch"}
+            title={"ElasticMatch"}
             org={"CodeDay"}
             text={`A set of tools, including a custom suggestion and weighting system, as well as a custom matching
               algorithm that I wrote and used to match around 350 students to the best-fitting mentors in the CodeDay
@@ -259,7 +259,7 @@ export function ProjectGrid() {
             title={"John Peter"}
             org={"CodeDay"}
             text={`John Peter is a Discord bot used for moderation and server management for Virtual CodeDay. It has a very
-              extensive featureset with a number of custom moderation and authentication tools and has been used for 
+              extensive feature-set with a number of custom moderation and authentication tools and has been used for 
               multiple CodeDay events, impacting well over 1,000 students.`}
             link={"https://github.com/codeday/johnpeter-discord"}
           />
@@ -382,6 +382,17 @@ export function ProjectGrid() {
                 nothing.`}
             link={"https://Cobular.github.io/WhatsThatNumberExtension/"}
           />
+          <SmallElement
+            title={"FPGA Piano"}
+            org={"Classwork"}
+            text={`With two group-mates, I made a piano on the Nexys 3 FPGA 
+              that can play one octave of notes. We used what we'd learned 
+              throughout the quarter to sample a sign wave in a LUT at various 
+              frequencies as well as generate the clocks required to send sound
+               to an ADC over I2S. I learned a ton in this project, it was 
+               really fascinating overall!`}
+            link={"https://Cobular.github.io/WhatsThatNumberExtension/"}
+          />
         </div>
       </div>
     </div>

src/vars.scss

@@ -1,6 +1,6 @@
 :root {
   --text: white;
-  --background: #1f2022;
+  --background: hsl(230, 5%, 13%);
   --about-me: #F1F1F1;
   --grid-background: var(--background);
   --grid-header-background: var(--background);