css and routing update

I did a lot with the css

package-lock.json

@@ -7,12 +7,24 @@
       "dependencies": {
         "node": "^16.9.1",
         "node-dom": "^0.1.0",
+        "react-router-dom": "^5.3.0",
         "yarn": "^1.22.11"
       },
       "devDependencies": {
         "gh-pages": "^3.2.3"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.15.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+      "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -232,6 +244,27 @@
       "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
       "dev": true
     },
+    "node_modules/history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -248,6 +281,16 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
     "node_modules/jsonfile": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -275,6 +318,17 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -290,6 +344,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mini-create-react-context": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "tiny-warning": "^1.0.3"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.0.0",
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -334,7 +401,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -402,6 +468,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/path-to-regexp": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "dependencies": {
+        "isarray": "0.0.1"
+      }
+    },
     "node_modules/pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
@@ -444,6 +518,81 @@
         "node": ">=8"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
+    "node_modules/react": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react-router": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
+      "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.4.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
+      "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.1",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
+    "node_modules/resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -465,6 +614,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "node_modules/trim-repeated": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
@@ -486,6 +645,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -507,6 +671,14 @@
     }
   },
   "dependencies": {
+    "@babel/runtime": {
+      "version": "7.15.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+      "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -680,6 +852,27 @@
       "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
       "dev": true
     },
+    "history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -696,6 +889,16 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
     "jsonfile": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -720,6 +923,14 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
     "make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -729,6 +940,15 @@
         "semver": "^6.0.0"
       }
     },
+    "mini-create-react-context": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "tiny-warning": "^1.0.3"
+      }
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -759,8 +979,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-      "dev": true
     },
     "once": {
       "version": "1.4.0",
@@ -807,6 +1026,14 @@
       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
       "dev": true
     },
+    "path-to-regexp": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "requires": {
+        "isarray": "0.0.1"
+      }
+    },
     "pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
@@ -837,6 +1064,72 @@
         "find-up": "^4.0.0"
       }
     },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
+    "react": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "react-router": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
+      "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.4.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
+      "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.1",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -852,6 +1145,16 @@
         "escape-string-regexp": "^1.0.2"
       }
     },
+    "tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "trim-repeated": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
@@ -867,6 +1170,11 @@
       "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
       "dev": true
     },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

package.json

@@ -2,6 +2,7 @@
   "dependencies": {
     "node": "^16.9.1",
     "node-dom": "^0.1.0",
+    "react-router-dom": "^5.3.0",
     "yarn": "^1.22.11"
   },
   "devDependencies": {

site/src/App.css

@@ -1,80 +1,142 @@
 html, body{
-  overflow-y: scroll;
+  background-color: #1b1f27;
+  overflow-x: hidden;
 }
 body{
+  margin: 0;
   background-image: url('https://i.pinimg.com/originals/d6/c3/ac/d6c3ac09021dbc0cda8ee27837d2c795.png')
 }
-h1, h2 {
+h1, h2, p{
   font-family: "Roboto Condensed",sans-serif;
-  color: #1f1f1f;
 }
-.header h1{
+h1, h2{
-  display: inline-block;
+  color: #ecebeb;
-  margin-bottom: 0px;
-  margin-top: 2vmin;
-  font-size: 6vmin;
-}
-.header{
-  margin-bottom: 0px;
-  background-color: white;
-  width: 100%;
-  z-index: 10;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-.socials{
-  display: inline;
-  float: right;
-  margin: 0px;
-}
-.socials img{
-  margin: .5vmin;
-  margin-top: 2vmin;
-  height: 6vmin;
-}
-.navBar li{
-  display: inline;
-  background-color: rgb(156,49,45,.5);
-  border-top: .5vmin black solid;
-  border-bottom: .5vmin black solid;
-  border-right: .5vmin black solid;
-  font-size: 4vmin;
-}
-.navBar li:hover{
-  background-color: rgb(156,49,45,.8);
-}
-.navBar li:first-child{
-  border-left: .5vmin black solid;
-}
-.navBar li a{
-  color: white;
-  padding: 3vmax;
-  line-height: 1.2vmax;
-}
-.navBar{
-  margin-bottom: 0px;
-  padding-left: 0px;
-}
-.foreground{
-  position:absolute;
-  margin-top: 13vmin;
-  margin-left: -10px;
-  padding-left: 10px;
-  width:100%;
-  background-color: rgb(156,49,45,.5);
-}
-.foreground p{
-  max-width: 1000px;
 }
 h2{
-  font-size: calc(4vmin + 7px);
+  font-size: 2rem;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+h3{
+  color: #a8a8a8;
 }
 p{
   color: #ffffff;
-  font-size: calc(3vmin + 3px);
+  font-size: 1rem;
 }
 a { 
   color: #a0a0a0a0;
   text-decoration: none;
 }
+.header h1{
+  display: inline-block;
+  margin-bottom: 0px;
+  margin-top: .5rem;
+  font-size: 2.5rem;
+}
+.header{
+  margin-bottom: 0px;
+  margin-left: .3rem;
+  padding-bottom: .2rem;
+  background-color: #0f1216;
+  width: 100%;
+  z-index: 10;
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+.navBar li{
+  display: inline;
+  background-color: rgb(156,49,45,.5);
+  border-top: .2rem black solid;
+  border-bottom: .2rem black solid;
+  border-right: .2rem black solid;
+  font-size: 1.2rem;
+}
+.navBar li:hover{
+  background-color: rgb(156,49,45,.8);
+}
+.navBar li:first-child{
+  border-left: .2rem black solid;
+}
+.navBar li a{
+  color: white;
+  padding-left: 2rem;;
+  padding-right: 2rem;
+  line-height: 1.2vmax;
+}
+.navBar{
+  margin-top: 1rem;
+  margin-bottom: 0px;
+  padding-left: 0px;
+}
+.foreground{
+  padding-top:5.5rem;
+  padding-left: .5rem;
+  width:100%;
+  background-color: rgb(44,44,44,.5);
+  padding-bottom: 1rem;
+  overflow: hidden;
+}
+.foreground p{
+  max-width: 40rem;
+}
+.sideimg{
+  float: right;
+  display: block;
+  margin-right: 10rem;
+  max-width: 20rem;
+  max-height: 20rem;
+}
+.projectList{
+  float:left;
+  background-color: rgba(11, 17, 26, 0.5);
+  border: solid rgba(34, 52, 75, 0.5) .3rem;
+  width: calc(95% - .5rem);
+}
+.project{
+  background-color: #25282c;
+  display: inline;
+  float: left;
+  padding: .5rem;
+  margin: 2rem;
+  width: 20rem;
+  height: 15rem;
+  border: .3rem black solid;
+}
+.project h3{
+  border-bottom: black solid .2rem;
+}
+.topBox{
+  height: 70%;
+}
+.bottomBox{
+  height: auto;
+}
+.bottomBox a{
+  vertical-align: middle;
+}
+.project a{
+  padding: .5rem;
+  border: solid black .2rem;
+  background-color: rgb(80, 80, 80);
+}
+.footer{
+  display: block;
+  background-color: rgb(156,49,45);
+}
+.socials{
+  padding-left: 3rem;
+  padding-right: 3rem;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+  margin-right: auto;
+  table-layout: fixed;
+}
+.socials td{
+  width:15%;
+}
+.socials img{
+  height: 2rem;
+}

site/src/App.js

@@ -1,23 +1,36 @@
+import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
+
 import './App.css';
 import Nav from './componets/Nav.js'
-import Link from './componets/Link.js'
 import Socials from './componets/Socials.js'
 import About from './componets/About.js'
+import Projects from './Projects';
+
+const routs = (
+  <Router>
+    <div>
+      <Route exact path='/' component={About} />
+      <Route exact path='/projects' component={Projects} />
+    </div>
+  </Router>
+)
 
 function App() {
   return (
     <div className="App">
       <div className="header">
         <h1>Andrew Simonson</h1>
-        <Socials />
         <Nav>
-          <Link onClick='/home'>Home</Link>
+          <a href='/'>Home</a>
-          <Link onClick='resume.pdf'>Resume</Link>
+          <a href='resume.pdf'>Resume</a>
-          <Link onClick='/projects'>Projects</Link>
+          <a href='/projects'>Projects</a>
         </Nav>
       </div>
       <div className='foreground'>
-        <About />
+        {routs}
+      </div>
+      <div className='footer'>
+        <Socials />
       </div>
     </div>
   );

site/src/Projects.js

@@ -0,0 +1,33 @@
+import ProjectList from './componets/ProjectList'
+import Project from './componets/Project'
+
+export default function Projects(){
+    return(
+      <>
+        <h2>Projects</h2>
+        <ProjectList>
+          <Project status='WIP' title='Digital Portfolio' link='https://github.com/asimonson1125/asimonson1125.github.io' linkText='view code'>
+            A personal portfolio site made with React.js
+          </Project>
+          <Project status='WIP' title='Slate' link='https://github.com/asimonson1125/Slate' linkText='view code'>
+            Slate is a thing
+          </Project>
+          <Project status='WIP' title='Querist' link='https://github.com/asimonson1125/Querist' linkText='view code'>
+            A modular discord bot to manage class discord servers.
+          </Project>
+          <Project status='Complete' title='NationsGame Rolls Simulator' link='https://github.com/asimonson1125/NG-Rolls-Simulator' linkText='view code'>
+            A simulator for the browser game, NationsGame, to analyze unit composition and predict in-game victors and unit statistics.
+          </Project>
+          <Project status='Complete' title='Humans vs. Zombies Bot' link='https://github.com/asimonson1125/HvZ-bot' linkText='view code'>
+            A Discord bot to handle role management and statistics for RIT's Humans vs. Zombies games.
+          </Project>
+          <Project status='Incomplete' title='WallCycle' link='https://github.com/asimonson1125/WallCycle' linkText='view code'>
+            A GNOME extension that cycles through a folder of wallpapers
+          </Project>
+          <Project status='Complete' title='WinKeylogger' link='https://github.com/asimonson1125/WinKeylogger' linkText='view code'>
+            A C++ keylogger for windows based off a udemy course with my custom modifications and powershell script.
+          </Project>
+        </ProjectList>
+      </>
+    )
+}

site/src/componets/About.js

@@ -1,9 +1,11 @@
 import React from 'react';
+import picture from '../assets/itsa_me.JPG'
 
 export default function About(){
     return(
         <>
             <h2>A biography</h2>
+            <p>Ahoy, I'm Andrew Simonson</p>
             <p>I'm primarily an <strong>extremely</strong> forgetful person 
                 who, when productive, rewrites fate in favor of my own 
                 short-term interests, or rather, whatever half-assed mistake

site/src/componets/Link.js

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export default function Link(props){
-    return(
-        <a className={props.className} href={props.onClick}>{props.children}</a>
-    )
-}

site/src/componets/Project.js

@@ -0,0 +1,25 @@
+import React from 'react'
+
+export default function Project(props){
+    let statusColor = 'rgb(0,0,0)'
+    if(props.status == "WIP"){
+        statusColor = 'yellow';
+    }
+    else if(props.status == "Complete"){
+        statusColor = 'green';
+    }
+    else if(props.status == "Incomplete"){
+        statusColor = 'red';
+    }
+    return (
+        <li className='project'>
+            <div className='topBox'>
+                <h3>{props.title}</h3>
+                <p>{props.children}</p>
+            </div>
+            <div className='bottomBox'>
+                <a href={props.link}>{props.linkText}</a>
+            </div>
+        </li>
+    )
+}

site/src/componets/ProjectList.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default function ProjectList(props){
+    let projects;
+    props.children.forEach(function(x){
+        projects = (
+            <>
+            {projects}
+            {x}
+            </>
+        );
+    });
+    return(
+        <>
+        <ul className='projectList'>
+            {projects}
+        </ul>
+        </>
+    );
+} 

site/src/componets/Socials.js

@@ -7,11 +7,13 @@ import email from '../assets/email.svg'
 
 export default function Socials(){
     return(
-        <ul class='socials' data-aos='fade-up'>
+        <table class='socials'>
-            <a href='https://github.com/asimonson1125'><img alt='Github' src={github} /></a>
+            <tr>
-            <a href='https://www.instagram.com/an_a.simonson/'><img alt='Instagram' src={instagram} /></a>
+                <td><a href='https://github.com/asimonson1125'><img alt='Github' src={github} /></a></td>
-            <a href='https://www.linkedin.com/in/simonsonandrew/'><img alt='LinkedIn' src={linkedin} /></a>
+                <td><a href='https://www.instagram.com/an_a.simonson/'><img alt='Instagram' src={instagram} /></a></td>
-            <a href='mailto:asimonson1125@gmail.com'><img alt='E-mail' src={email} /></a>
+                <td><a href='https://www.linkedin.com/in/simonsonandrew/'><img alt='LinkedIn' src={linkedin} /></a></td>
-        </ul>
+                <td><a href='mailto:asimonson1125@gmail.com'><img alt='E-mail' src={email} /></a></td>
+            </tr>
+        </table>
     )
 }