src/components/AboutMe/AboutMe.scss

@@ -26,12 +26,11 @@
     width: fit-content;
 
     #info-parent {
-      display: flex;
+      display: grid;
-      flex-direction: row;
+      grid-template-columns: 1fr 1fr;
-      gap: 5px;
 
       @media screen and (max-width: 660px) {
-        flex-direction: column;
+        grid-template-columns: 1fr;
       }
     }
 
@@ -67,11 +66,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() - 1021288800000;
+        let ageMs = new Date().getTime() - 1021004428000;
         const yearMs = milliseconds_year();
         const ageYearsComponent = Math.floor(ageMs / yearMs);
         const ageSecondsComponent = Math.floor((ageMs % yearMs) / 1000);

src/components/ProjectGrid.scss

@@ -202,22 +202,10 @@ $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 {
@@ -226,18 +214,10 @@ $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;
-      display: flex;
+    flex-direction: column;
-      flex-direction: column;
+    width: available;
-      width: available;
-      align-items: center;
-    }
-
 
     img {
       width: 100%;
@@ -319,7 +299,6 @@ $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={"ElasticMatch"}
+            title={"ElaticMatch"}
             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 feature-set with a number of custom moderation and authentication tools and has been used for 
+              extensive featureset 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,17 +382,6 @@ 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: hsl(230, 5%, 13%);
+  --background: #1f2022;
   --about-me: #F1F1F1;
   --grid-background: var(--background);
   --grid-header-background: var(--background);