cleanup package.json, update sass, fix router (css class issue)

src/about/AboutPage.tsx

@@ -5,10 +5,8 @@ import japanese from "../img/IMG_20230531_000224_01.jpg";
 import {PropsWithChildren} from "react";
 
 export default function AboutPage() {
-  return <main>
-    <div className="edge">
-
-    </div>
+  return <main className="about-page">
+    <div className="edge"/>
     <section className="about-container">
       <img src={openingImage} alt="Tymur Arsentiev" className="self"/>
       <h1 className="title">Welcome to my blog and personal website!</h1>
@@ -16,7 +14,7 @@ export default function AboutPage() {
         For the longest time, I never had a personal website to show my skills.
         I'm a longtime coder, project after project, but have never considered making a place to share my thoughts.
         After a while, I was inspired by my <ExternalLink href="https://medium.com/@tymur.arsent">Medium</ExternalLink> and
-        &nbsp;<ExternalLink  href="https://substack.com/@timsnodocmartins">Substack</ExternalLink> account to begin journaling my thoughts on my own.
+        &nbsp;<ExternalLink href="https://substack.com/@timsnodocmartins">Substack</ExternalLink> account to begin journaling my thoughts on my own.
       </p>
       <p>
         I like to take pride in my uniqueness as a web developer.
@@ -38,9 +36,7 @@ export default function AboutPage() {
         My favorite thing about Ebay is that they have almost every clothing brand, typically at reduced prices due to use.
       </p>
     </section>
-    <div className="edge">
-
-    </div>
+    <div className="edge"/>
   </main>
 }
 

src/about/about.scss

@@ -1,6 +1,6 @@
-@import "../nav/nav.scss";
+@use "../nav/nav.scss";
 
-main {
+.about-page {
   color: white;
   display: flex;
   justify-content: center;
@@ -8,7 +8,7 @@ main {
 
 .title {
   text-align: center;
-  margin: $padding;
+  margin: nav.$padding;
 }
 
 .self {
@@ -17,7 +17,7 @@ main {
 }
 
 .about-container {
-  margin-top: 2 * $padding;
+  margin-top: 2 * nav.$padding;
   flex-shrink: 1;
   max-width: 75%;
   display: flex;
@@ -30,7 +30,7 @@ main {
   }
 
   p {
-    text-indent: 2 * $padding;
+    text-indent: 2 * nav.$padding;
     margin: 10px;
     max-width: 600px;
     line-height: 40px;