Adjusted styling again, added night mode!!

package.json

@@ -33,12 +33,11 @@
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
-    "typescript": "^4.1.3",
-    "web-vitals": "^0.2.4",
     "react-snapshot": "^1.3.0",
-    "serve": "^11.3.2"
+    "serve": "^11.3.2",
+    "typescript": "^4.1.3",
+    "web-vitals": "^0.2.4"
   },
   "devDependencies": {
     "@types/react-snapshot": "^1.3.0"

src/components/AboutMe/AboutMe.scss

@@ -16,6 +16,7 @@
     margin: 0 5px 0;
     padding: 10px;
     width: fit-content;
+    color: var(--text);
   }
 
   #about-me {
@@ -37,6 +38,7 @@
       font-family: "Fira Code", monospace;
       font-weight: 500;
       font-size: 46px;
+      color: var(--text);
     }
 
     h2 {
@@ -44,6 +46,7 @@
       line-height: normal;
       margin-bottom: 0;
       font-weight: 400;
+      color: var(--text);
 
       text-align: left;
     }

src/components/AboutMe/AboutMe.tsx

@@ -1,5 +1,4 @@
 import "./AboutMe.scss";
-import { Link } from "react-router-dom";
 import { Tooltip } from "antd";
 import { Age } from "./Age";
 import { LastFmLi } from "./LastFmLi";
@@ -14,22 +13,21 @@ export function AboutMe() {
   return (
     <div id={"about-me-parent"}>
       <div id={"about-me"} className={"about-me-card"}>
-        <h1> Hi! I'm Jake!</h1>
+        <h1>Hi! I'm Jake!</h1>
 
         <div id={"info-parent"}>
           <div id={"specific-info"}>
             <h2> A bit about me:</h2>
-
             <ul>
-              {/*<li>*/}
-              {/*  <b>Pronouns</b>: He/Him*/}
-              {/*</li>*/}
               <li>
                 <b>Occupation:</b> Student
               </li>
               <li>
                 <b>Location:</b> Southern California
               </li>
+              <li>
+                <b>Pronouns</b>: They/Them
+              </li>
               <Age />
               <LastFmLi />
             </ul>

src/components/Footer.scss

@@ -1,49 +0,0 @@
-.site-footer {
-  background: var(--footer);
-  margin: 10px;
-  border-radius: 5px;
-
-  h2 {
-    font-family: "Fira Code", monospace;
-    margin: 0;
-  }
-
-  p {
-    font-family: "Montserrat", sans-serif;
-
-    @media screen and (min-width: 900px) {
-      font-size: 16px;
-    }
-  }
-}
-
-.footer-grid {
-  display: flex;
-  justify-content: space-evenly;
-
-  .blurb {
-    flex: 9;
-  }
-
-  .links-container {
-    flex: 4;
-  }
-
-  .footer-links {
-    padding-left: 0;
-    margin: 0;
-
-    columns: 100px 2;
-
-    li {
-      list-style: none;
-    }
-
-    a {
-      //color: black;
-      font-family: "Montserrat", sans-serif;
-      text-decoration: underline;
-    }
-  }
-
-}

src/components/Footer.tsx

@@ -1,41 +0,0 @@
-import "./Footer.scss"
-import { Link } from "react-router-dom";
-
-
-export function Footer() {
-  return (
-    <footer className="site-footer">
-      <div className="footer-grid">
-        <div className="blurb">
-          <p className="text-justify">
-            Made with ☕ and ❤️ by Jake Cover, a CS student who really needs to find something
-            witty and interesting to put here soon. Feel free to reach out!
-            <br />
-            Checklist Icon by Arthur Shlain from the Noun Project
-          </p>
-        </div>
-        <div className="links-container">
-          <h2>Links and Stuff</h2>
-          <ul className="footer-links">
-            <li>
-              <Link to={"/"}>Home</Link>
-            </li>
-            <li>
-              <Link to={"/contact"}>Contact</Link>
-            </li>
-            <li>
-              <Link  to={"/resume"}>Resume</Link>
-            </li>
-            <li>
-              <a href="https://github.com/JakeCover">GitHub</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <hr />
-      <div className="copyright-text">
-        Copyright &copy; 2021 All Rights Reserved by Jake Cover
-      </div>
-    </footer>
-  );
-};

src/components/Header.scss

@@ -1,89 +0,0 @@
-header {
-  display: flex;
-  flex-direction: row;
-
-  margin: 10px;
-  padding: 10px;
-  border-radius: 5px;
-  background: var(--header);
-  font-family: "Fira Code", monospace;
-
-  h1 {
-    font-weight: 600;
-    margin: 0 0 0 5px;
-  }
-
-  .headerLinks {
-    display: flex;
-    flex-direction: row;
-    align-content: center;
-    margin-left: auto;
-
-    h2 {
-      margin: 0;
-      border-radius: 5px;
-      line-height: normal;
-
-      &:hover {
-        background: #ddd;
-      }
-
-      &.active {
-        background-color: #4CAF50;
-        color: white;
-      }
-    }
-
-    h2:last-of-type {
-      margin-right: 5px;
-    }
-  }
-
-  /* Hide the link that should open and close the topnav on small screens */
-  .icon {
-    display: none;
-  }
-
-  @media screen and (max-width: 660px) {
-    h2 {
-      display: none;
-    }
-
-    .icon {
-      margin-left: auto;
-      display: block;
-      position: absolute;
-      top: 19px;
-      right: 24px;
-      font-size: 30px;
-      border: none;
-    }
-
-    .headerLinks {
-      visibility: hidden;
-      transition: visibility 0s, opacity 0.5s linear;
-    }
-  }
-
-  @media screen and (max-width: 660px) {
-    &.responsive {
-      display: block;
-
-      .headerLinks {
-        visibility: visible;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-      }
-
-      h1 {
-        text-align: left;
-      }
-
-      h2 {
-        display: block;
-        margin-left: 5px;
-      }
-    }
-  }
-}

src/components/Header.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import "./Header.scss";
-import { Button, Space } from "antd";
-import { Link } from "react-router-dom";
-import { MenuOutlined } from "@ant-design/icons";
-
-export function Header() {
-  function showHideHamburger() {
-    var x = document.getElementById("myHeader");
-    // @ts-ignore
-    if (x.className === "header") {
-      // @ts-ignore
-      x.className += " responsive";
-    } else {
-      // @ts-ignore
-      x.className = "header";
-    }
-  }
-
-  return (
-    <header className={"header"} id={"myHeader"}>
-      <Link to="/" className="navbar-brand">
-        <h1>Jake Cover</h1>
-      </Link>
-      <Button
-        href={void 0}
-        className="icon"
-        onClick={() => showHideHamburger()}
-      >
-        <MenuOutlined className={"fa fa-bars"} />
-      </Button>
-
-      <Space className={"headerLinks"}>
-        <Link className="nav-link" to="/">
-          <h2>Home</h2>
-        </Link>
-
-        <Link className="nav-link" to="/resume">
-          <h2>Resume</h2>
-        </Link>
-        <a
-          className="nav-link"
-          href="https://github.com/JakeCover"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <h2>GitHub</h2>
-        </a>
-      </Space>
-    </header>
-  );
-}

src/components/Main.tsx

@@ -1,7 +1,4 @@
-import { Route, Switch } from "react-router-dom";
-import { Contact } from "./Contact";
 import { Home } from "./Home";
-import { Resume } from "./Resume";
 
 export function Main() {
   return (

src/components/ProjectGrid.scss

@@ -12,10 +12,17 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 1000px, large: 1300px, x-la
   @return m#{a}x(#{$numbers});
 }
 
-#project-grid-parent {
+#project-grid-background {
   background: var(--grid-background);
+}
+
+#project-grid-parent {
   border-radius: 5px;
   margin: 10px;
+  padding-left: 5px;
+  padding-right: 5px;
+    //background: var(--grid-background);
+
 
   @include media(">=medium")  {
     width: 95%;
@@ -150,9 +157,13 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 1000px, large: 1300px, x-la
 .GridElement {
   padding: 5px;
 
+
   .GridElementInternal {
     padding: 9px;
     border-radius: 5px;
+    border: var(--grid-element-border);
+    border-width: 2px;
+    border-style: solid;
     background: var(--grid-element-background);
 
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
@@ -167,6 +178,7 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 1000px, large: 1300px, x-la
     font-family: "Fira Code", monospace;
     font-weight: 400;
     margin-bottom: 0px;
+    color: var(--grid-element-header);
     line-height: normal;
   }
 
@@ -179,7 +191,7 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 1000px, large: 1300px, x-la
   p {
     font-family: "Montserrat", sans-serif;
     font-size: 16px;
-    color: black;
+    color: var(--text);
     margin-bottom: 0;
   }
 }

src/components/ProjectGrid.tsx

@@ -16,7 +16,6 @@ import { useEffect } from "react";
 import { LinkOutlined } from "@ant-design/icons";
 import CodeDaySD from "../images/SanDiego.svg";
 import Foresight from "../images/foresightsports.png";
-import Distest from "../images/distest.svg";
 import Scoresaver from "../images/scoresaver.svg";
 import Hashicorp from "../images/HashiCorp_Logo_no_text.png";
 import Bennu from "../images/bennu.gif";
@@ -234,7 +233,7 @@ export function ProjectGrid() {
   });
 
   return (
-    <div style={{paddingBottom: 20}}>
+    <div id={"project-grid-background"} style={{paddingBottom: 20}}>
       <div id={"project-grid-parent"}>
         <div id={"project-header"}>
           <h2>&lt;/&gt; My Projects</h2>
@@ -255,8 +254,6 @@ export function ProjectGrid() {
             }
             link={"https://github.com/codeday/labs-elastic-match"}
           />
-
-
           <SmallElement
             title={"John Peter"}
             org={"CodeDay"}
@@ -284,7 +281,8 @@ export function ProjectGrid() {
             title={"CodeDay San Diego"}
             text={
               `A 24 hour hackathon occurring around the world a few times a year. I volunteered for and then later ran
-              the San Diego event.`
+              the San Diego event where I grew to love hackathons and leaned a lot about leadership and event logistics
+              in the process!`
             }
             link={"https://event.codeday.org/sandiego"}
           />
@@ -315,7 +313,7 @@ export function ProjectGrid() {
               text={
                 `I've made quite a number of discord bots over time! Some of them, like ReplyBot, which added a reply
               functionality to Discord years before they finally implemented it first-party, have been obsoleted
-              nowadays, others like DiscordChannelMirror really aren't significantly notable, and many more have been
+              nowadays, others like DiscordChannelMirror just do simple things for my own use, and many more have been
               lost to time and past me's lack of understanding of the importance of backup. I digress, however I really
                do love writing these sorts of applications!`
               }
@@ -399,6 +397,20 @@ export function ProjectGrid() {
               }
               link={"https://www.bennu.io/"}
           />
+          <SmallElement
+              title={"What's That Number"}
+              org={"Random Projects"}
+              text={
+                `A service that allows for the reversing of arbitrary decimals back to fractions of irrational numbers.
+                Basically, it's able to reverse 3.1415 to π, but more interestingly reverse 0.385694 to √2 * 3 / 11!
+                It can't solve all problems and it isn't mathematically provable or anything, but it's optimized to
+                give you the right answer for most things you'll actually run into and tell you when you've gotten 
+                nothing.`
+              }
+              link={
+                "https://jakecover.github.io/WhatsThatNumberExtension/"
+              }
+          />
         </div>
       </div>
     </div>

src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {} from "react";
 import { render } from "react-snapshot";
 
 import "./index.scss";
@@ -6,12 +6,9 @@ import "./imports.scss";
 import "./vars.scss"
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import { HashRouter } from "react-router-dom";
 
 render(
-  <HashRouter>
+    <App />,
-    <App />
-  </HashRouter>,
   document.getElementById("root")
 );
 

src/vars.scss

@@ -1,18 +1,21 @@
 :root {
-  --text: black;
+  --text: white;
-  --background: #FDFFFC;
+  --background: #1f2022;
   --header: #84B7DB;
   --footer: var(--header);
-  --about-me: #FDFFFC;
+  --about-me: #F1F1F1;
-  --grid-background: #E4F5DC;
+  --grid-background: #1F1E33;
-  --grid-header-background: #A4ABA1;
+  --grid-header-background: #1F1E33;
-  --grid-header-text: #black;
+  --grid-header-text: #F1F1F1;
-  --grid-element-background: #FDFFFC;
+  --grid-element-background: #354560;
-  --chainlink-icon-background: rgba(224, 255, 255, 0.7);
+  --grid-element-border: #6f6f6f;
- --link-color: #9D18DB;
+  --grid-element-header: rgb(169 162 228 / 100%);
- --grid-element-subheader: #CAABD9;
+  --chainlink-icon-background: rgba(43, 43, 43, 0.3);
+  --link-color: #1890ff;
+  --grid-element-subheader: darkgrey;
 }
 
+
 //:root {
 //  --text: black;
 //  --background: #FFFFFF;
@@ -23,6 +26,7 @@
 //  --grid-header-background: #55CDFC;
 //  --grid-header-text: black;
 //  --grid-element-background: #FFFFFF;
+//  --grid-element-border: var(--grid-element-background);
 //  --chainlink-icon-background: rgba(224, 255, 255, 0.7);
 //  --link-color: grey;
 //  --grid-element-subheader: #F7A8B8;