diff --git a/package-lock.json b/package-lock.json
index c205fc57..ca285907 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,15 @@
       "name": "project1-bootcamp",
       "version": "0.1.0",
       "dependencies": {
+        "@formspree/react": "^2.4.0",
+        "aos": "^3.0.0-beta.6",
+        "bootstrap": "^5.2.2",
+        "bootstrap-icons": "^1.9.1",
+        "gh-pages": "^4.0.0",
         "react": "^18.1.0",
+        "react-bootstrap": "^2.5.0",
         "react-dom": "^18.1.0",
+        "react-responsive": "^9.0.0",
         "react-scripts": "5.0.1"
       }
     },
@@ -1764,9 +1771,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
-      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.4.tgz",
+      "integrity": "sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==",
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -2057,6 +2064,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@formspree/react": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@formspree/react/-/react-2.4.0.tgz",
+      "integrity": "sha512-7zPt9tjX0zEiqJhbz5S35+AFyAz76iIJ5Qu9Mw+25kgO+FfmA1i9APakbJG57UsqEGT/dLX2aQa824A87zUtQw==",
+      "dependencies": {
+        "@stripe/react-stripe-js": "^1.7.1",
+        "@stripe/stripe-js": "^1.35.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -2866,6 +2882,57 @@
         }
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.3.0.tgz",
+      "integrity": "sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
+      "integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==",
+      "dependencies": {
+        "dequal": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.0.tgz",
+      "integrity": "sha512-5dDj5uDzUgK1iijWPRg6AnxjkHM04XhTQDJirM1h/8tIc7KyLtF9YyjcCpNEn259hPMXswpkfXKNgiag0skPFg==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -2966,6 +3033,24 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@stripe/react-stripe-js": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-1.13.0.tgz",
+      "integrity": "sha512-6v2VVYorWalmlHF5DIlHp5xtFzX9rY36N4d7kyS8D/4jxvZYHOKJj96LCQfwuFi/o19/dCX8rxt/ct+pF9kI8A==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "@stripe/stripe-js": "^1.41.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@stripe/stripe-js": {
+      "version": "1.41.0",
+      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-1.41.0.tgz",
+      "integrity": "sha512-9cbv1CO/fF37qDiHFCxkRgSJjlIZLV0bl+m6zu4dUObRnfYq5bpczCByOvhiSWtbrKqNhYL1j+otPSogRfSqGw=="
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -3387,6 +3472,11 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.0.tgz",
       "integrity": "sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw=="
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
     "node_modules/@types/q": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
@@ -3402,6 +3492,24 @@
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
+    "node_modules/@types/react": {
+      "version": "18.0.21",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
+      "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -3415,6 +3523,11 @@
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
     "node_modules/@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -3450,6 +3563,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -4065,6 +4183,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/aos": {
+      "version": "3.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/aos/-/aos-3.0.0-beta.6.tgz",
+      "integrity": "sha512-VLWrpq8bfAWcetynVHMMrqdC+89Qq/Ym6UBJbHB4crIwp3RR8uq1dNGgsFzoDl03S43rlVMK+na3r5+oUCZsYw==",
+      "dependencies": {
+        "classlist-polyfill": "^1.2.0",
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
@@ -4121,6 +4249,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/array.prototype.flat": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
@@ -4635,6 +4771,29 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "node_modules/bootstrap": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.2.tgz",
+      "integrity": "sha512-dEtzMTV71n6Fhmbg4fYJzQsw1N29hJKO1js5ackCgIpDcGid2ETMGC6zwSYw09v05Y+oRdQ9loC54zB1La3hHQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
+    },
+    "node_modules/bootstrap-icons": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz",
+      "integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g=="
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4891,6 +5050,16 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classlist-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
+    },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
@@ -5277,6 +5446,11 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="
+    },
     "node_modules/css-minimizer-webpack-plugin": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz",
@@ -5586,6 +5760,11 @@
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
     },
+    "node_modules/csstype": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -5698,6 +5877,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -5829,6 +6016,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -5950,6 +6146,11 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.131.tgz",
       "integrity": "sha512-oi3YPmaP87hiHn0c4ePB67tXaF+ldGhxvZnT19tW9zX6/Ej+pLN0Afja5rQ6S+TND7I9EuwQTT8JYn1k7R7rrw=="
     },
+    "node_modules/email-addresses": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
+      "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg=="
+    },
     "node_modules/emittery": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
@@ -7073,6 +7274,30 @@
         "node": ">=10"
       }
     },
+    "node_modules/filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "dependencies": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/filesize": {
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
@@ -7508,6 +7733,87 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gh-pages": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-4.0.0.tgz",
+      "integrity": "sha512-p8S0T3aGJc68MtwOcZusul5qPSNZCalap3NWbhRUZYu1YOdp+EjZ+4kPmRM8h3NNRdqw00yuevRjlkuSzCn7iQ==",
+      "dependencies": {
+        "async": "^2.6.1",
+        "commander": "^2.18.0",
+        "email-addresses": "^3.0.1",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^8.1.0",
+        "globby": "^6.1.0"
+      },
+      "bin": {
+        "gh-pages": "bin/gh-pages.js",
+        "gh-pages-clean": "bin/gh-pages-clean.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gh-pages/node_modules/array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+      "dependencies": {
+        "array-uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gh-pages/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
+    "node_modules/gh-pages/node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/gh-pages/node_modules/globby": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+      "dependencies": {
+        "array-union": "^1.0.1",
+        "glob": "^7.0.3",
+        "object-assign": "^4.0.1",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gh-pages/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/gh-pages/node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@@ -7921,6 +8227,11 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -8057,6 +8368,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -10701,6 +11020,11 @@
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -10774,6 +11098,14 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/matchmediaquery": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
+      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
+      "dependencies": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -11470,6 +11802,33 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+      "dependencies": {
+        "pinkie": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@@ -12790,6 +13149,23 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/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/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -12965,6 +13341,35 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.5.0.tgz",
+      "integrity": "sha512-j/aLR+okzbYk61TM3eDOU1NqOqnUdwyVrF+ojoCRUxPdzc2R0xXvqyRsjSoyRoCo7n82Fs/LWjPCin/QJNdwvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.6",
+        "@restart/ui": "^1.3.1",
+        "@types/react-transition-group": "^4.4.4",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -13104,6 +13509,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -13112,6 +13522,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-responsive": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.0.tgz",
+      "integrity": "sha512-hyJmKpAglo1AdZsGmu1sab0VInEGzUTXT3nJ3Cl7cMDjR0ffV30lOM3N1xag456OsCGAgqRIkgloLy6tHaqZ2w==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=0.10"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -13184,6 +13611,21 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -13853,6 +14295,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -14216,6 +14663,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -14680,6 +15138,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -14816,6 +15285,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -14994,6 +15477,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
@@ -17044,9 +17535,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
-      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+      "version": "7.19.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.4.tgz",
+      "integrity": "sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==",
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -17231,6 +17722,15 @@
         }
       }
     },
+    "@formspree/react": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@formspree/react/-/react-2.4.0.tgz",
+      "integrity": "sha512-7zPt9tjX0zEiqJhbz5S35+AFyAz76iIJ5Qu9Mw+25kgO+FfmA1i9APakbJG57UsqEGT/dLX2aQa824A87zUtQw==",
+      "requires": {
+        "@stripe/react-stripe-js": "^1.7.1",
+        "@stripe/stripe-js": "^1.35.0"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -17810,6 +18310,43 @@
         "source-map": "^0.7.3"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
+    },
+    "@react-aria/ssr": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.3.0.tgz",
+      "integrity": "sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.2"
+      }
+    },
+    "@restart/hooks": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
+      "integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==",
+      "requires": {
+        "dequal": "^2.0.2"
+      }
+    },
+    "@restart/ui": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.0.tgz",
+      "integrity": "sha512-5dDj5uDzUgK1iijWPRg6AnxjkHM04XhTQDJirM1h/8tIc7KyLtF9YyjcCpNEn259hPMXswpkfXKNgiag0skPFg==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -17884,6 +18421,19 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "@stripe/react-stripe-js": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-1.13.0.tgz",
+      "integrity": "sha512-6v2VVYorWalmlHF5DIlHp5xtFzX9rY36N4d7kyS8D/4jxvZYHOKJj96LCQfwuFi/o19/dCX8rxt/ct+pF9kI8A==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@stripe/stripe-js": {
+      "version": "1.41.0",
+      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-1.41.0.tgz",
+      "integrity": "sha512-9cbv1CO/fF37qDiHFCxkRgSJjlIZLV0bl+m6zu4dUObRnfYq5bpczCByOvhiSWtbrKqNhYL1j+otPSogRfSqGw=="
+    },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -18201,6 +18751,11 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.0.tgz",
       "integrity": "sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw=="
     },
+    "@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
     "@types/q": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
@@ -18216,6 +18771,24 @@
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
+    "@types/react": {
+      "version": "18.0.21",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
+      "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -18229,6 +18802,11 @@
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
     },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
     "@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -18264,6 +18842,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+    },
     "@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -18706,6 +19289,16 @@
         "picomatch": "^2.0.4"
       }
     },
+    "aos": {
+      "version": "3.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/aos/-/aos-3.0.0-beta.6.tgz",
+      "integrity": "sha512-VLWrpq8bfAWcetynVHMMrqdC+89Qq/Ym6UBJbHB4crIwp3RR8uq1dNGgsFzoDl03S43rlVMK+na3r5+oUCZsYw==",
+      "requires": {
+        "classlist-polyfill": "^1.2.0",
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1"
+      }
+    },
     "arg": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
@@ -18750,6 +19343,11 @@
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="
     },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q=="
+    },
     "array.prototype.flat": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
@@ -19142,6 +19740,17 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.2.tgz",
+      "integrity": "sha512-dEtzMTV71n6Fhmbg4fYJzQsw1N29hJKO1js5ackCgIpDcGid2ETMGC6zwSYw09v05Y+oRdQ9loC54zB1La3hHQ==",
+      "requires": {}
+    },
+    "bootstrap-icons": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz",
+      "integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -19318,6 +19927,16 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classlist-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
+    },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "clean-css": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
@@ -19599,6 +20218,11 @@
         "semver": "^7.3.5"
       }
     },
+    "css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="
+    },
     "css-minimizer-webpack-plugin": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz",
@@ -19809,6 +20433,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+    },
     "damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -19889,6 +20518,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
       "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
     },
+    "dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
+    },
     "destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -19990,6 +20624,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -20080,6 +20723,11 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.131.tgz",
       "integrity": "sha512-oi3YPmaP87hiHn0c4ePB67tXaF+ldGhxvZnT19tW9zX6/Ej+pLN0Afja5rQ6S+TND7I9EuwQTT8JYn1k7R7rrw=="
     },
+    "email-addresses": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
+      "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg=="
+    },
     "emittery": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
@@ -20909,6 +21557,21 @@
         }
       }
     },
+    "filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ=="
+    },
+    "filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "requires": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      }
+    },
     "filesize": {
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
@@ -21202,6 +21865,70 @@
         "get-intrinsic": "^1.1.1"
       }
     },
+    "gh-pages": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-4.0.0.tgz",
+      "integrity": "sha512-p8S0T3aGJc68MtwOcZusul5qPSNZCalap3NWbhRUZYu1YOdp+EjZ+4kPmRM8h3NNRdqw00yuevRjlkuSzCn7iQ==",
+      "requires": {
+        "async": "^2.6.1",
+        "commander": "^2.18.0",
+        "email-addresses": "^3.0.1",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^8.1.0",
+        "globby": "^6.1.0"
+      },
+      "dependencies": {
+        "array-union": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+          "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+          "requires": {
+            "array-uniq": "^1.0.1"
+          }
+        },
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+        },
+        "fs-extra": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "globby": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+          "requires": {
+            "array-union": "^1.0.1",
+            "glob": "^7.0.3",
+            "object-assign": "^4.0.1",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+          "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        },
+        "universalify": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+          "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+        }
+      }
+    },
     "glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@@ -21504,6 +22231,11 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -21600,6 +22332,14 @@
         "side-channel": "^1.0.4"
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -23514,6 +24254,11 @@
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -23574,6 +24319,14 @@
         "tmpl": "1.0.5"
       }
     },
+    "matchmediaquery": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
+      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
+      "requires": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -24068,6 +24821,24 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
+    },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg=="
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+      "requires": {
+        "pinkie": "^2.0.0"
+      }
+    },
     "pirates": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@@ -24892,6 +25663,22 @@
         }
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "dependencies": {
+        "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=="
+        }
+      }
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -25009,6 +25796,25 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-bootstrap": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.5.0.tgz",
+      "integrity": "sha512-j/aLR+okzbYk61TM3eDOU1NqOqnUdwyVrF+ojoCRUxPdzc2R0xXvqyRsjSoyRoCo7n82Fs/LWjPCin/QJNdwvA==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.6",
+        "@restart/ui": "^1.3.1",
+        "@types/react-transition-group": "^4.4.4",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -25114,11 +25920,27 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-responsive": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.0.tgz",
+      "integrity": "sha512-hyJmKpAglo1AdZsGmu1sab0VInEGzUTXT3nJ3Cl7cMDjR0ffV30lOM3N1xag456OsCGAgqRIkgloLy6tHaqZ2w==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^1.2.1"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -25174,6 +25996,17 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -25662,6 +26495,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -25940,6 +26778,14 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
     },
+    "strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
     "style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -26286,6 +27132,14 @@
         "punycode": "^2.1.1"
       }
     },
+    "trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -26389,6 +27243,17 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -26524,6 +27389,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
diff --git a/package.json b/package.json
index a100866d..a23a8797 100644
--- a/package.json
+++ b/package.json
@@ -3,13 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@formspree/react": "^2.4.0",
+    "aos": "^3.0.0-beta.6",
+    "bootstrap": "^5.2.2",
+    "bootstrap-icons": "^1.9.1",
+    "gh-pages": "^4.0.0",
     "react": "^18.1.0",
+    "react-bootstrap": "^2.5.0",
     "react-dom": "^18.1.0",
+    "react-responsive": "^9.0.0",
     "react-scripts": "5.0.1"
   },
+  "homepage": "https://myusername.github.io/my-app",
   "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -b main -d build",
     "start": "react-scripts start",
-    "build": "react-scripts build"
+    "build": "react-scripts build",
   },
   "eslintConfig": {
     "extends": [
diff --git a/public/index.html b/public/index.html
index bd669818..40fb0167 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,9 +24,42 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Rubik+Mono+One&family=Share+Tech+Mono&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Monoton&family=Rubik+Mono+One&family=Share+Tech+Mono&display=swap" rel="stylesheet">
     <title>Rocket Bootcamp Project</title>
   </head>
   <body>
+    <script
+      src="https://unpkg.com/react/umd/react.production.min.js"
+      crossorigin
+    ></script>
+
+    <script
+      src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
+      crossorigin
+    ></script>
+
+    <script
+      src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
+      crossorigin
+    ></script>
+
+    <script>
+      var Alert = ReactBootstrap.Alert;
+    </script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/src/App.css b/src/App.css
index 97b7c578..dc16c43a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,19 +1,289 @@
-.App {
-  text-align: center;
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0px;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.App {
+  background-color: #112240;
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  gap: 5vh;
+}
+
+a {
+  text-decoration: none !important;
+}
+
+@media only screen and (min-width: 1150px) {
+  body #home {
+    background-size: cover;
+    background-image: url(../src/assets/images/hero1.jpg);
+    background-repeat: no-repeat;
+    align-items: flex-start;
+  }
+  body #skillswrap {
+    gap: 2vw;
+    flex-direction: row;
+  }
+
+  body .contact-text-align {
+    text-align: center;
+  }
+}
+
+@media only screen and (min-width: 720px) and (max-width: 1150px) {
+  body #home {
+    background-image: url(../src/assets/images/hero1.jpg);
+    background-repeat: no-repeat;
+    background-size: contain;
+    align-items: flex-start;
+    height: clamp(30vh, 100vw, 50vh);
+  }
+  body #skillswrap {
+    gap: 5vw;
+    flex-direction: row;
+  }
+  body .HeroLeft {
+    position: absolute;
+    top: 50%;
+    transform: translate(15%, -65%);
+  }
+  body .contact-text-align {
+    text-align: center;
+  }
+}
+/* NavBar CSS */
+
+.fixed-top {
+  position: sticky;
+  top: 0;
+  background-color: black !important;
+}
+
+/*Hero CSS  */
+
+#home {
+  flex-direction: column;
+  background-color: black;
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  padding-top: 10vh;
+  padding-left: 0px;
+  padding-right: 0px;
+  margin: 0px 0px;
+}
+
+.hero-button {
+  font-size: 1.8vw;
+  padding-left: 16px;
+  background-color: transparent;
+  border-color: #20c20e;
+  font-weight: bolder;
+  color: #20c20e;
+}
+
+.HeroLeft {
+  position: absolute;
+  top: 50%;
+  transform: translate(15%, -65%);
+}
+
+/* About Me CSS  */
+
+#about {
+  width: 80vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 15vh;
+}
+
+.logo {
+  width: 5vh;
+  height: 5vh;
+  object-fit: cover;
+}
+
+.logo-small {
+  width: max(16px, 1.5vw);
+  height: max(16px, 1.5vw);
+}
+
+/* Skills CSS  */
+
+#skills {
+  width: 100vw;
+  flex-direction: column;
+  padding-top: 15vh
+}
+
+#skillswrap {
+  gap: 0vh;
+  flex-direction: column;
+}
+
+.expert {
+  background-color: #900603 !important;
+}
+
+.intermediate {
+  background-color: aqua !important;
+}
+
+.advanced {
+  background-color: #51087e !important;
+}
+
+.basics {
+  background-color: #028a0f !important;
+}
+
+/* Project CSS*/
+
+#project {
+  width: 100vw;
+  padding-top: 15vh;
+  flex-direction: column;
+  max-width: 700px;
+}
+
+.cardSize {
+  width: max(240px, 20vw);
+  border-radius: 1vw !important;
+}
+
+.link-button {
+  background-color: transparent !important;
+  color: #028a0f !important;
+  border-width: 3px !important;
+  border-color: #028a0f !important;
+}
+
+.link-button:hover {
+  background-color: #028a0f !important;
+  color: black !important;
+}
+
+/* Education Tab CSS */
+
+#education {
+  flex-direction: column;
+  padding-top: 15vh;
+}
+
+/* Work Tab CSS */
+
+#work {
+  flex-direction: column;
+  padding-top: 15vh;
+}
+
+/* Contact CSS  */
+#contact {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding-top: 0vh;
+  max-width: 800px;
+}
+
+#contact-form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 1vh;
+}
+
+#form-email {
+  width: 70vw;
+  max-width: 500px;
+  background-color: transparent;
+  border: solid;
+  border-color: #028a0f;
+  color: #028a0f;
+  border-radius: 1vh;
+  padding-left: 0.5vw;
+}
+
+#form-message {
+  width: 70vw;
+  max-width: 500px;
+  height: 30vh;
+  max-height: 200px;
+  background-color: transparent;
+  border: solid;
+  border-color: #028a0f;
+  color: #028a0f;
+  border-radius: 1vh;
+  padding-left: 0.5vw;
+}
+
+.contact-text-align {
+  text-align: left;
+  font-size: max(1.2vw, 20px);
+}
+
+.submit-button {
+  width: 100px;
+  height: 40px;
+  margin-bottom: 5vh;
+  border: solid;
+  border-color: #028a0f;
+  border-radius: 1vw;
+  background-color: transparent;
+  color: #028a0f;
+  font-size: clamp(16px, 1.5vh, 32px);
+  font-weight: bold;
+}
+
+.submit-button:hover {
+  color: black;
+  background-color: #028a0f;
+}
+
+/* Misc CSS */
+
+.centerDiv {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.col label {
+  padding: 1vh;
+}
+
+.nav-pills .nav-link.active {
+  background-color: aqua !important;
+  color: navy !important;
+}
+
+.carousel-indicators button {
+  width: min(5vw, 2rem) !important;
+  height: min(5vw, 2rem) !important;
+  border-radius: 50%;
+}
+
+.carousel-indicators button:not(:first-child) {
+  margin-left: 1rem !important;
+}
+
+.carousel-indicators .active {
+  background-color: #028a0f !important;
+}
+
+.navbar-collapse {
+        height: auto !important;
 }
diff --git a/src/App.js b/src/App.js
index 4a6f800f..c6255b6b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,36 @@
 import React from "react";
-import logo from "./logo.png";
 import "./App.css";
+import "bootstrap/dist/css/bootstrap.min.css";
+
+import About from "./Components/About";
+import Education from "./Components/Education";
+import Menu from "./Components/Navbar";
+import Hero from "./Components/Hero";
+import Project from "./Components/Project";
+import Work from "./Components/WorkExpereince";
+import Contact from "./Components/Contact";
+import Skills from "./Components/skills";
 
 class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentPage: 1,
+    };
+  }
+  
   render() {
     return (
       <div className="App">
         <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
+          <Menu/>
+          <Hero />
+          <About />
+          <Education />
+          <Skills data-aos="fade-up" />
+          <Work />
+          <Project />
+          <Contact />
         </header>
       </div>
     );
diff --git a/src/Components/About.js b/src/Components/About.js
new file mode 100644
index 00000000..dde3c4bc
--- /dev/null
+++ b/src/Components/About.js
@@ -0,0 +1,307 @@
+import React, { useEffect } from "react";
+import { Container, Row, Col } from "react-bootstrap";
+import aos from "aos";
+import "aos/dist/aos.css";
+import { useMediaQuery } from "react-responsive";
+
+//import pictures nightmare
+import whatsapp from "../assets/logos/whatsapp.svg";
+import calender from "../assets/logos//calendar.svg";
+import email from "../assets/logos//envelope.svg";
+import telegram from "../assets/logos//telegram.svg";
+import location from "../assets/logos//location.svg";
+import linkedIn from "../assets/logos//linkedin.svg";
+import github from "../assets/logos//github.svg";
+import facebook from "../assets/logos//facebook.svg";
+import leetcode from "../assets/logos//leetcode.svg";
+
+function About() {
+  const isSmallScreen = useMediaQuery({ query: "(max-width: 359px)" });
+  let output;
+  useEffect(() => {
+    aos.init({ duration: 2000 });
+  }, []);
+  if (isSmallScreen) {
+    output = <SmallScreen />;
+  } else {
+    output = <Normal />;
+  }
+  return output;
+}
+function SmallScreen() {
+  return (
+    <Container
+      data-aos="fade-up"
+      id="about"
+      style={{
+        color: "#20C20E",
+        fontFamily: "Share Tech Mono",
+      }}
+    >
+      <Row>
+        <Container>
+          <Col>
+            <h2>About me</h2>
+            <p>
+              Hello! I'm Chai Ee. I enjoy tinkering around with
+              electronics/software and finding out how things work.
+            </p>
+            <p>
+              I like coding, especially backend, and am passionate about secured
+              websites and optimizing algorithms. I always seek to look for ways
+              that we can improve our products. I also like tinnkering around
+              electronic, currently ddoing an Arduino Project
+            </p>
+            <p>
+              Currently, I am an undergraduate at Nanyang Technological
+              University, studying Electrical and Electronic Engineering. I'm
+              looking for exciting opportunities to gain professional exposure
+              in the Software/IT Industry to jumpstart my career!
+            </p>
+          </Col>
+        </Container>
+        <Container>
+          <Col id="Bio">
+            <Row>
+              <h2>Bio</h2>
+              <Col>
+                <div>
+                  <img src={calender} alt="age" />
+                  <span style={{ marginLeft: "6px" }}>age: 22</span>
+                </div>
+                <div>
+                  <img src={whatsapp} alt="whatsapp" />
+                  <span style={{ marginLeft: "6px" }}>Phone: +65 81786416</span>
+                </div>
+                <div>
+                  <img src={telegram} alt="telegram" />
+                  <span style={{ marginLeft: "6px" }}>
+                    Telegram: @def_rebirth
+                  </span>
+                </div>
+                <div>
+                  <img src={email} alt="email" />
+                  <span style={{ marginLeft: "6px" }}>
+                    Email: chaiee@live.com.sg
+                  </span>
+                </div>
+                <div>
+                  <img src={location} alt="location" />
+                  <span style={{ marginLeft: "6px" }}>
+                    Address: Singapore, Singapore
+                  </span>
+                </div>
+              </Col>
+            </Row>
+          </Col>
+        </Container>
+      </Row>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginTop: "5vh",
+        }}
+      >
+        <a href="https://github.com/LoyChaiEe" target="_blank" rel="noreferrer">
+          <img
+            src={github}
+            className="logo"
+            style={{ padding: "6px" }}
+            alt="github"
+          />
+        </a>
+        <a
+          href="https://www.linkedin.com/in/loy-chai-889711235/"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img
+            src={linkedIn}
+            className="logo"
+            style={{ padding: "6px" }}
+            alt="linkedIn"
+          />
+        </a>
+        <a
+          href="https://www.facebook.com/chaiee.loy"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img
+            src={facebook}
+            className="logo"
+            style={{ padding: "6px" }}
+            alt="facebook"
+          />
+        </a>
+        <a href="google" target="_blank">
+          <img
+            src={leetcode}
+            className="logo"
+            style={{ padding: "6px" }}
+            alt="leetcode"
+          />
+        </a>
+      </div>
+    </Container>
+  );
+}
+
+function Normal() {
+  return (
+    <Container
+      data-aos="fade-up"
+      id="about"
+      style={{
+        color: "#20C20E",
+        fontFamily: "Share Tech Mono",
+      }}
+    >
+      <Row>
+        <Container>
+          <Col>
+            <h2
+              style={{
+                fontFamily: "Rubik Mono One",
+                fontSize: "max(3vw, 1.5em)",
+              }}
+            >
+              1.About me
+            </h2>
+            <p style={{ fontSize: "max(1.4vw, 20px)" }}>
+              Hello! I'm Chai Ee. I enjoy tinkering around with
+              electronics/software and finding out how things work.
+            </p>
+            <p style={{ fontSize: "max(1.4vw, 20px)" }}>
+              I like coding, especially backend, and am passionate about secured
+              websites and optimizing algorithms. I always seek to look for ways
+              that we can improve our products. I also like tinnkering around
+              electronic, currently ddoing an Arduino Project
+            </p>
+            <p style={{ fontSize: "max(1.4vw, 20px)" }}>
+              Currently, I am an undergraduate at Nanyang Technological
+              University, studying Electrical and Electronic Engineering. I'm
+              looking for exciting opportunities to gain professional exposure
+              in the Software/IT Industry to jumpstart my career!
+            </p>
+          </Col>
+        </Container>
+        <Container>
+          <Col id="Bio">
+            <Row>
+              <h2>Bio</h2>
+              <Col style={{ paddingRight: "0px" }}>
+                <div>
+                  <img src={calender} alt="age" className="logo-small" />
+                  <span
+                    style={{ marginLeft: "6px", fontSize: "max(1.2vw, 16px)" }}
+                  >
+                    age
+                  </span>
+                </div>
+                <div>
+                  <img src={whatsapp} alt="whatsapp" className="logo-small" />
+                  <span
+                    style={{ marginLeft: "6px", fontSize: "max(1.2vw, 16px)" }}
+                  >
+                    Phone
+                  </span>
+                </div>
+                <div>
+                  <img src={telegram} alt="telegram" className="logo-small" />
+                  <span
+                    style={{ marginLeft: "6px", fontSize: "max(1.2vw, 16px)" }}
+                  >
+                    Telegram
+                  </span>
+                </div>
+                <div>
+                  <img src={email} alt="email" className="logo-small" />
+                  <span
+                    style={{ marginLeft: "6px", fontSize: "max(1.2vw, 16px)" }}
+                  >
+                    Email
+                  </span>
+                </div>
+                <div>
+                  <img src={location} alt="location" className="logo-small" />
+                  <span
+                    style={{ marginLeft: "6px", fontSize: "max(1.2vw, 16px)" }}
+                  >
+                    Address
+                  </span>
+                </div>
+              </Col>
+              <Col>
+                <div style={{ fontSize: "max(1.2vw, 16px)" }}>22</div>
+                <div style={{ fontSize: "max(1.2vw, 16px)" }}>+65 81786416</div>
+                <div style={{ fontSize: "max(1.2vw, 16px)" }}>@def_rebirth</div>
+                <div style={{ fontSize: "max(1.2vw, 16px)" }}>
+                  chaiee@live.com.sg
+                </div>
+                <div style={{ fontSize: "max(1.2vw, 16px)" }}>
+                  Singapore, Singapore
+                </div>
+              </Col>
+            </Row>
+          </Col>
+        </Container>
+      </Row>
+      <h3 style={{margin: "3vh 0px"}}>Accounts</h3>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          gap: "1vw",
+        }}
+      >
+
+        <a href="https://github.com/LoyChaiEe" target="_blank" rel="noreferrer">
+          <img
+            src={github}
+            className="logo"
+            style={{ padding: "6px" }}
+            alt="github"
+          />
+        </a>
+        <a
+          href="https://www.linkedin.com/in/loy-chai-889711235/"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img
+            src={linkedIn}
+            className="logo"
+            style={{ padding: "6px" }}
+            alt="linkedIn"
+          />
+        </a>
+        <a
+          href="https://www.facebook.com/chaiee.loy"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img
+            src={facebook}
+            className="logo"
+            style={{ padding: "6px" }}
+            alt="facebook"
+          />
+        </a>
+        <a href="google" target="_blank">
+          <img
+            src={leetcode}
+            className="logo"
+            style={{ padding: "6px" }}
+            alt="leetcode"
+          />
+        </a>
+      </div>
+    </Container>
+  );
+}
+
+export default About;
diff --git a/src/Components/Contact.js b/src/Components/Contact.js
new file mode 100644
index 00000000..1e3637fb
--- /dev/null
+++ b/src/Components/Contact.js
@@ -0,0 +1,94 @@
+// Make sure to run npm install @formspree/react
+// For more help visit https://formspr.ee/react-help
+import React, { useState, useEffect } from "react";
+import { useForm, ValidationError } from "@formspree/react";
+import { Container } from "react-bootstrap";
+import aos from "aos";
+import "aos/dist/aos.css";
+
+function Contact() {
+  const [state, handleSubmit] = useForm("meqdlqak");
+  const [message, updateMessage] = useState("Message");
+  const [email, updateEmail] = useState("Your email");
+
+  useEffect(() => {
+    aos.init({ duration: 1500 });
+  }, []);
+
+  if (state.succeeded) {
+    return (
+      <p
+        style={{
+          color: "#20C20E",
+          fontFamily: "Monoton",
+          fontSize: "5.5vw",
+        }}
+      >
+        Thanks for joining!
+      </p>
+    );
+  }
+  return (
+    <Container
+      data-aos="fade-up"
+      id="contact"
+      style={{
+        color: "#20C20E",
+        fontFamily: "Share Tech Mono",
+        justifyContent: "flex-start",
+      }}
+    >
+      <h1
+        style={{
+          fontFamily: "Rubik Mono One",
+          fontSize: "max(2vw, 22pt)",
+        }}
+      >
+        6.Get in Touch
+      </h1>
+      <p className="contact-text-align">
+        I’m currently looking for any new opportunities to get more professional
+        experience in the software development industry.
+      </p>
+      <p className="contact-text-align">
+        My inbox is always open, so just hit me up and say Hello! Even if it is
+        not software-related, it is nice to have a chat
+      </p>
+      <p className="contact-text-align">
+        Just leave a message and your email and you are good to go!
+      </p>
+      <form onSubmit={handleSubmit} id="contact-form">
+        <label htmlFor="email" style={{ textAlign: "left" }}></label>
+        <input
+          id="form-email"
+          type="email"
+          name="email"
+          value={email}
+          onChange={(e) => updateEmail(e.target.value)}
+        />
+        <ValidationError prefix="Email" field="email" errors={state.errors} />
+        <textarea
+          id="form-message"
+          name="message"
+          value={message}
+          onChange={(e) => updateMessage(e.target.value)}
+        />
+        <ValidationError
+          prefix="Message"
+          field="message"
+          errors={state.errors}
+        />
+        <br></br>
+        <button
+          className="submit-button"
+          type="submit"
+          disabled={state.submitting}
+        >
+          Submit
+        </button>
+      </form>
+    </Container>
+  );
+}
+
+export default Contact;
diff --git a/src/Components/Education.js b/src/Components/Education.js
new file mode 100644
index 00000000..54c1fbbe
--- /dev/null
+++ b/src/Components/Education.js
@@ -0,0 +1,320 @@
+import React from "react";
+import { Container } from "react-bootstrap";
+import Col from "react-bootstrap/Col";
+import Nav from "react-bootstrap/Nav";
+import Row from "react-bootstrap/Row";
+import Tab from "react-bootstrap/Tab";
+import Tabs from "react-bootstrap/Tabs";
+import { useMediaQuery } from "react-responsive";
+
+
+
+function Education() {
+  const isMobile = useMediaQuery({ query: "(max-width: 720px)" });
+  let element;
+  if (isMobile) {
+    element = <Mobile />;
+  } else {
+    element = <PC />;
+  }
+  return element;
+}
+
+function Mobile() {
+  return (
+    <Container
+      id="education"
+      style={{
+        color: "#20C20E",
+        fontFamily: "Share Tech Mono",
+      }}
+    >
+      <h1
+        style={{
+          fontFamily: "Rubik Mono One",
+          fontSize: "max(3vw, 22pt)",
+        }}
+      >
+        2.Education && Courses
+      </h1>
+      <Tabs
+        defaultActiveKey="ntu"
+        id="justify-tab-example"
+        className="mb-3"
+        justify
+      >
+        <Tab eventKey="ntu" title="NTU" id="ntu">
+          <h2 style={{ color: "#0047AB", fontWeight: "bold" }}>
+            Bachelor of Engineering in Electrical and Electronics Engineering{" "}
+            <span style={{ color: "red", fontWeight: "bold" }}>@</span>{" "}
+            <span style={{ color: "magenta", fontWeight: "bold" }}>
+              Nanyang Technological University
+            </span>
+          </h2>
+          <span style={{ fontSize: "max(1.2vw, 16px)", color: "aquamarine" }}>
+            From Mar 2017 to May 2017
+          </span>
+          <p>
+            <ul>
+              <li>
+                Learnt the foundations of EEE Specialisation: Digital
+                Electronic, Analog Electronic, Circuit Analysis, Semiconductor
+                Fundamentals, Electrical Devices & Machines, Signal & Systems
+                Engineering Electromagnetics
+              </li>
+              <li>Specialisation: COMPUTER ENGINEERING</li>
+              <li>Final Year Project: Wait till the time comes :p</li>
+            </ul>
+          </p>
+        </Tab>
+        <Tab eventKey="nus" title="NUS">
+          <h2 style={{ color: "#0047AB", fontWeight: "bold" }}>
+            Master of Computing -- Artificial Intelligence Specialisation{" "}
+            <span style={{ color: "red", fontWeight: "bold" }}>@</span>{" "}
+            <span style={{ color: "magenta", fontWeight: "bold" }}>
+              National University of Singapore
+            </span>
+          </h2>
+          <span style={{ fontSize: "max(1.2vw, 16px)", color: "aquamarine" }}>
+            From Jul 20xx to May 20xx
+          </span>
+          <p>
+            <ul>
+              <li>Maybe in the future lolz.</li>
+              <li>Have to survive this hell call NTU EEE</li>
+            </ul>
+          </p>
+        </Tab>
+        <Tab eventKey="basic-ra" title="RA(Basics)">
+          <h2 style={{ color: "#0047AB", fontWeight: "bold" }}>
+            Coding Basic Course{" "}
+            <span style={{ color: "red", fontWeight: "bold" }}>@</span>{" "}
+            <span style={{ color: "magenta", fontWeight: "bold" }}>
+              Rocket academy
+            </span>
+          </h2>
+          <span style={{ fontSize: "max(1.2vw, 16px)", color: "aquamarine" }}>
+            June 2022
+          </span>
+          <p>
+            <ul>
+              <li>
+                Learnt Basic Javascript, HTML, CSS, github, DOM manipulation
+              </li>
+              <li>Understood Fundamental Computational Thinking</li>
+              <li>Capstone Project: Blackjack</li>
+            </ul>
+          </p>
+        </Tab>
+        <Tab eventKey="swe-ra" title="RA(SWE)">
+          <h2>Cisco Certified Network Associate @ Cisco</h2>
+          <h2 style={{ color: "#0047AB", fontWeight: "bold" }}>
+            Software Enginnering Bootcamp{" "}
+            <span style={{ color: "red", fontWeight: "bold" }}>@</span>{" "}
+            <span style={{ color: "magenta", fontWeight: "bold" }}>
+              Rocket Academy
+            </span>
+          </h2>
+          <span style={{ fontSize: "max(1.2vw, 16px)", color: "aquamarine" }}>
+            From Sept 2022 to Apr 2023
+          </span>
+          <p>
+            <ul>
+              <li>
+                Learnt Frotend Frameworks such as React Backend such as SQL,
+                Sequelize, Express.js
+              </li>
+              <li>Deploy atabases such as Firebase</li>
+              <li>Learnt Backend such as SQL, Sequelize, Express.js</li>
+              <li>
+                Learnt Data Structures and algorithms for efficient coding of
+                algorithms
+              </li>
+              <li>Capstone Project: Soon :p</li>
+            </ul>
+          </p>
+        </Tab>
+      </Tabs>
+    </Container>
+  );
+}
+
+function PC() {
+  return (
+    <Tab.Container defaultActiveKey="first">
+      <Container
+        id="education"
+        style={{
+          color: "#20C20E",
+          fontFamily: "Share Tech Mono",
+        }}
+      >
+        <h1
+          style={{
+            fontFamily: "Rubik Mono One",
+            fontSize: "max(3vw, 32pt)",
+          }}
+        >
+          2.Education/Courses
+        </h1>
+        <Row style={{}}>
+          <Col sm={3} style={{}}>
+            <Nav variant="pills" className="flex-column">
+              <Nav.Item>
+                <Nav.Link
+                  eventKey="first"
+                  style={{ fontSize: "max(1.2vw, 20px)", fontWeight: "bold" }}
+                >
+                  NTU(B.Eng)
+                </Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link
+                  eventKey="second"
+                  style={{ fontSize: "max(1.2vw, 20px)", fontWeight: "bold" }}
+                >
+                  NUS(Msc)
+                </Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link
+                  eventKey="third"
+                  style={{ fontSize: "max(1.2vw, 20px)", fontWeight: "bold" }}
+                >
+                  RA (Basic)
+                </Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link
+                  eventKey="fourth"
+                  style={{ fontSize: "max(1.2vw, 20px)", fontWeight: "bold" }}
+                >
+                  RA (Bootcamp)
+                </Nav.Link>
+              </Nav.Item>
+            </Nav>
+          </Col>
+          <Col sm={9} style={{ padding: "0px" }}>
+            <Tab.Content>
+              <Tab.Pane
+                eventKey="first"
+                style={{ fontSize: "max(1.2vw, 20px)" }}
+              >
+                <h2 style={{ color: "#0047AB", fontWeight: "bold" }}>
+                  Bachelor of Engineering in Electrical and Electronics
+                  Engineering{" "}
+                  <span style={{ color: "red", fontWeight: "bold" }}>@</span>{" "}
+                  <span style={{ color: "magenta", fontWeight: "bold" }}>
+                    Nanyang Technological University
+                  </span>
+                </h2>
+                <span
+                  style={{ fontSize: "max(1.2vw, 16px)", color: "aquamarine" }}
+                >
+                  From Mar 2017 to May 2017
+                </span>
+                <p>
+                  <ul>
+                    <li>
+                      Learnt the foundations of EEE Specialisation: Digital
+                      Electronic, Analog Electronic, Circuit Analysis,
+                      Semiconductor Fundamentals, Electrical Devices & Machines,
+                      Signal & Systems Engineering Electromagnetics
+                    </li>
+                    <li>Specialisation: COMPUTER ENGINEERING</li>
+                    <li>
+                      Final Year Project: Wait till the time comes :p
+                    </li>
+                  </ul>
+                </p>
+              </Tab.Pane>
+              <Tab.Pane
+                eventKey="second"
+                style={{ fontSize: "max(1.2vw, 20px)" }}
+              >
+                <h2 style={{ color: "#0047AB", fontWeight: "bold" }}>
+                  Master of Computing -- Artificial Intelligence Specialisation{" "}
+                  <span style={{ color: "red", fontWeight: "bold" }}>@</span>{" "}
+                  <span style={{ color: "magenta", fontWeight: "bold" }}>
+                    National University of Singapore
+                  </span>
+                </h2>
+                <span
+                  style={{ fontSize: "max(1.2vw, 16px)", color: "aquamarine" }}
+                >
+                  From Jul 20xx to May 20xx
+                </span>
+                <p>
+                  <ul>
+                    <li>Maybe in the future lolz.</li>
+                    <li>Have to survive this hell call NTU EEE</li>
+                  </ul>
+                </p>
+              </Tab.Pane>
+              <Tab.Pane
+                eventKey="third"
+                style={{ fontSize: "max(1.2vw, 20px)" }}
+              >
+                <h2 style={{ color: "#0047AB", fontWeight: "bold" }}>
+                  Coding Basic Course{" "}
+                  <span style={{ color: "red", fontWeight: "bold" }}>@</span>{" "}
+                  <span style={{ color: "magenta", fontWeight: "bold" }}>
+                    Rocket academy
+                  </span>
+                </h2>
+                <span
+                  style={{ fontSize: "max(1.2vw, 16px)", color: "aquamarine" }}
+                >
+                  June 2022
+                </span>
+                <p>
+                  <ul>
+                    <li>
+                      Learnt Basic Javascript, HTML, CSS, github, DOM
+                      manipulation
+                    </li>
+                    <li>Understood Fundamental Computational Thinking</li>
+                    <li>Capstone Project: Blackjack</li>
+                  </ul>
+                </p>
+              </Tab.Pane>
+              <Tab.Pane
+                eventKey="fourth"
+                style={{ fontSize: "max(1.2vw, 20px)" }}
+              >
+                <h2 style={{ color: "#0047AB", fontWeight: "bold" }}>
+                  Software Enginnering Bootcamp{" "}
+                  <span style={{ color: "red", fontWeight: "bold" }}>@</span>{" "}
+                  <span style={{ color: "magenta", fontWeight: "bold" }}>
+                    Rocket Academy
+                  </span>
+                </h2>
+                <span
+                  style={{ fontSize: "max(1.2vw, 16px)", color: "aquamarine" }}
+                >
+                  From Sept 2022 to Apr 2023
+                </span>
+                <p>
+                  <ul>
+                    <li>
+                      Learnt Frotend Frameworks such as React Backend such as
+                      SQL, Sequelize, Express.js
+                    </li>
+                    <li>Deploy atabases such as Firebase</li>
+                    <li>Learnt Backend such as SQL, Sequelize, Express.js</li>
+                    <li>
+                      Learnt Data Structures and algorithms for efficient coding
+                      of algorithms
+                    </li>
+                    <li>Capstone Project: Soon :p</li>
+                  </ul>
+                </p>
+              </Tab.Pane>
+            </Tab.Content>
+          </Col>
+        </Row>
+      </Container>
+    </Tab.Container>
+  );
+}
+export default Education;
diff --git a/src/Components/Hero.js b/src/Components/Hero.js
new file mode 100644
index 00000000..652979cc
--- /dev/null
+++ b/src/Components/Hero.js
@@ -0,0 +1,127 @@
+import React, { useEffect } from "react";
+import { Container } from "react-bootstrap";
+import { useMediaQuery } from "react-responsive";
+import Button from "react-bootstrap/Button";
+import aos from "aos";
+import "aos/dist/aos.css";
+
+function Hero() {
+  const isMobile = useMediaQuery({ query: "(max-width: 719px)" });
+  let element;
+  if (isMobile) {
+    element = <MobileHero />;
+  } else {
+    element = <PCHero />;
+  }
+  return element;
+}
+
+function PCHero() {
+  useEffect(() => {
+    aos.init({ duration: 1500 });
+  }, []);
+  return (
+    <Container id="home" className="centerDiv" fluid>
+      <div
+        className="HeroLeft"
+        style={{
+          color: "#20C20E",
+          fontFamily: "Share Tech Mono",
+        }}
+      >
+        <h6 data-aos="fade-right" style={{ fontSize: "1.2vw" }}>
+          Hello world! My name is
+        </h6>
+        <h1
+          data-aos="fade-right"
+          style={{ fontSize: "5.5vw", fontWeight: "bolder" }}
+        >
+          Loy Chai Ee
+        </h1>
+        <h3
+          data-aos="fade-right"
+          style={{ color: "magenta", fontSize: "2.4vw" }}
+        >
+          An Aspiring Software Engineer
+        </h3>
+        <p
+          data-aos="fade-right"
+          style={{fontSize: "1.2vw" }}
+        >
+          Undergraduate at Nanyang Technological University
+          <br />
+          Loves tinkering around with software and electronics!
+        </p>
+        <Button
+          href="../resume-sample.pdf"
+          download
+          style={{
+            fontSize: "1.8vw",
+            paddingLeft: "16px",
+            backgroundColor: "transparent",
+            borderColor: "#20C20E",
+            fontWeight: "bolder",
+            color: "#20C20E",
+            borderWidth: "5px",
+          }}
+          data-aos="fade-right"
+        >
+          Download Resume
+        </Button>
+      </div>
+    </Container>
+  );
+}
+
+function MobileHero() {
+  return (
+    <Container id="home" className="centerDiv" fluid>
+      <div
+        style={{
+          textAlign: "center",
+          color: "#20C20E",
+          fontFamily: "Share Tech Mono",
+        }}
+      >
+        <h6 data-aos="fade-right" style={{ fontSize: "20px" }}>
+          Hello world! My name is
+        </h6>
+        <h1
+          data-aos="fade-right"
+          style={{ fontWeight: "bolder", fontSize: "40pt" }}
+        >
+          Loy Chai Ee
+        </h1>
+        <h3
+          data-aos="fade-right"
+          style={{ color: "magenta", fontSize: "30pt" }}
+        >
+          An Aspiring Software Engineer
+        </h3>
+        <p data-aos="fade-right" style={{ fontSize: "20px" }}>
+          Undergraduate at Nanyang Technological University
+          <br />
+          Loves tinkering around with software and electronics!
+        </p>
+        <Button
+          href="../resume-sample.pdf"
+          download
+          style={{
+            fontSize: "20px",
+            paddingLeft: "16px",
+            backgroundColor: "transparent",
+            borderColor: "#20C20E",
+            fontWeight: "bolder",
+            color: "#20C20E",
+            borderWidth: "2px",
+          }}
+          data-aos="fade-right"
+        >
+          Download Resume
+        </Button>
+      </div>
+    </Container>
+  );
+}
+
+export default Hero;
diff --git a/src/Components/Navbar.js b/src/Components/Navbar.js
new file mode 100644
index 00000000..645aba95
--- /dev/null
+++ b/src/Components/Navbar.js
@@ -0,0 +1,105 @@
+import React from "react";
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
+import Navbar from "react-bootstrap/Navbar";
+import logo from "../assets/logos/logo.png"; 
+import { useState } from "react";
+
+function Menu() {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <Navbar
+      variant={"dark"}
+      expand="lg"
+      className="fixed-top"
+      expanded={expanded}
+      style={{
+        fontFamily: "Share Tech Mono",
+      }}
+    >
+      <Container>
+        <Navbar.Brand href="#home">
+          <img src={logo} alt="test" className="logo" />
+        </Navbar.Brand>
+        <Navbar.Toggle
+          aria-controls="basic-navbar-nav"
+          onClick={() => setExpanded(expanded ? false : "expanded")}
+        />
+        <Navbar.Collapse id="basic-navbar-nav">
+          <Nav className="ml-auto" style={{ gap: "16px" }}>
+            <Nav.Link
+              href="#about"
+              onClick={() => setExpanded(expanded ? false : "expanded")}
+              style={{
+                color: "#20C20E",
+                fontSize: "max(1vw, 20px)",
+                fontWeight: "bold",
+              }}
+            >
+              1.About Me
+            </Nav.Link>
+            <Nav.Link
+              href="#education"
+              onClick={() => setExpanded(expanded ? false : "expanded")}
+              style={{
+                color: "#20C20E",
+                fontSize: "max(1vw, 20px)",
+                fontWeight: "bold",
+              }}
+              data-transition="none"
+            >
+              2.Education
+            </Nav.Link>
+            <Nav.Link
+              href="#skills"
+              onClick={() => setExpanded(expanded ? false : "expanded")}
+              style={{
+                color: "#20C20E",
+                fontSize: "max(1vw, 20px)",
+                fontWeight: "bold",
+              }}
+            >
+              3.Skills
+            </Nav.Link>
+            <Nav.Link
+              href="#work"
+              onClick={() => setExpanded(expanded ? false : "expanded")}
+              style={{
+                color: "#20C20E",
+                fontSize: "max(1vw, 20px)",
+                fontWeight: "bold",
+              }}
+            >
+              4.Work Expereince
+            </Nav.Link>
+            <Nav.Link
+              href="#project"
+              onClick={() => setExpanded(expanded ? false : "expanded")}
+              style={{
+                color: "#20C20E",
+                fontSize: "max(1vw, 20px)",
+                fontWeight: "bold",
+              }}
+            >
+              5.Projects
+            </Nav.Link>
+            <Nav.Link
+              href="#contact"
+              onClick={() => setExpanded(expanded ? false : "expanded")}
+              style={{
+                color: "#20C20E",
+                fontSize: "max(1vw, 20px)",
+                fontWeight: "bold",
+              }}
+            >
+              6.Contact
+            </Nav.Link>
+          </Nav>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+}
+
+export default Menu;
diff --git a/src/Components/Project.js b/src/Components/Project.js
new file mode 100644
index 00000000..deda7a76
--- /dev/null
+++ b/src/Components/Project.js
@@ -0,0 +1,177 @@
+import React, { useState } from "react";
+import Carousel from "react-bootstrap/Carousel";
+import Button from "react-bootstrap/Button";
+import Card from "react-bootstrap/Card";
+import { Container } from "react-bootstrap";
+
+import logo from "../assets/images/hero1.jpg";
+import eee from "../assets/images/eee.png";
+import blackjack from "../assets/images/blackjack.png";
+
+function Project() {
+  const [index, setIndex] = useState(0);
+
+  const handleSelect = (selectedIndex, e) => {
+    setIndex(selectedIndex);
+  };
+
+  return (
+    <Container id="project">
+      <h1
+        style={{
+          textAlign: "center",
+          marginBottom: "2vh",
+          fontSize: "max(3vw, 22pt)",
+          fontFamily: "Rubik Mono One",
+          color: "#20C20E",
+        }}
+      >
+        5.Projects
+      </h1>
+      <Carousel
+        activeIndex={index}
+        onSelect={handleSelect}
+        variant="light"
+        className="centerDiv"
+        style={{
+          flexDirection: "column",
+          paddingBottom: "10vh",
+          color: "#20C20E",
+          fontFamily: "Share Tech Mono",
+        }}
+      >
+        <Carousel.Item>
+          <Container className="centerDiv">
+            <Card className="cardSize" bg={"dark"}>
+              <Card.Img
+                variant="top"
+                src={blackjack}
+                style={{ borderRadius: "1vw" }}
+              />
+              <Card.Body>
+                <Card.Title
+                  style={{ fontSize: "max(2vw, 28px)", fontWeight: "bold" }}
+                >
+                  Blackjack
+                </Card.Title>
+                <span
+                  style={{ color: "magenta", fontSize: "max(0.8vw, 28px)" }}
+                >
+                  HTML CSS Javascript DOM
+                </span>
+                <Card.Text style={{ fontSize: "max(1.3vw, 16px)" }}>
+                  <ul>
+                    <li>
+                      Create a multiplayer blackjack game, up till 6 players
+                    </li>
+                    <li>Game will track user's current bank balance and bet</li>
+                    <li style={{ color: "aquamarine" }}>
+                      <a
+                        href="https://github.com/LoyChaiEe/basics-blackjack-chaiee"
+                        style={{ textDecoration: "none", color: "aquamarine" }}
+                      >
+                        Link to Github Repo
+                      </a>
+                    </li>
+                  </ul>
+                </Card.Text>
+                <Button className="link-button">
+                  <a href="https://loychaiee.github.io/basics-blackjack-chaiee/">
+                    Github page
+                  </a>
+                </Button>
+              </Card.Body>
+            </Card>
+          </Container>
+        </Carousel.Item>
+        <Carousel.Item style={{ alignItems: "center" }}>
+          <Container className="centerDiv">
+            <Card className="cardSize" bg={"dark"}>
+              <Card.Img
+                variant="top"
+                src={logo}
+                style={{ borderRadius: "1vw" }}
+              />
+              <Card.Body>
+                <Card.Title
+                  style={{ fontSize: "max(2vw, 28px)", fontWeight: "bold" }}
+                >
+                  Portfolio (Frontend)
+                </Card.Title>
+                <span
+                  style={{ color: "magenta", fontSize: "max(0.8vw, 28px)" }}
+                >
+                  HTML CSS Javascript React Bootstrap
+                </span>
+                <Card.Text style={{ fontSize: "max(1.3vw, 16px)" }}>
+                  <ul>
+                    <li>Create a responsive portfolio website using React</li>
+                    <li>Use AOS to create transition for elements</li>
+                    <li>
+                      Allows using to see Projects via carousel and send an
+                      email to me
+                    </li>
+                    <li style={{ color: "aquamarine" }}>
+                      <a
+                        href="https://github.com/LoyChaiEe/project1-bootcamp"
+                        style={{ textDecoration: "none", color: "aquamarine" }}
+                      >
+                        Link to Github Repo
+                      </a>
+                    </li>
+                  </ul>
+                </Card.Text>
+                <Button className="link-button">
+                  <a href="#placeholder">Github page</a>
+                </Button>
+              </Card.Body>
+            </Card>
+          </Container>
+        </Carousel.Item>
+        <Carousel.Item>
+          <Container className="centerDiv">
+            <Card className="cardSize" bg={"dark"}>
+              <Card.Img
+                variant="top"
+                src={eee}
+                style={{ borderRadius: "1vw" }}
+              />
+              <Card.Body>
+                <Card.Title
+                  style={{ fontSize: "max(2vw, 28px)", fontWeight: "bold" }}
+                >
+                  EEE FYP
+                </Card.Title>
+                <span
+                  style={{ color: "magenta", fontSize: "max(0.8vw, 28px)" }}
+                >
+                  HTML CSS Javascript React Bootstrap
+                </span>
+                <Card.Text style={{ fontSize: "max(1.3vw, 16px)" }}>
+                  <ul>
+                    <li>Still Unknown</li>
+                    <li>Come back after 2 years</li>
+                    <li style={{ color: "aquamarine" }}>
+                      <a
+                        href="https://github.com/LoyChaiEe/basics-blackjack-chaiee"
+                        style={{ color: "aquamarine" }}
+                      >
+                        Link to Github Repo
+                      </a>
+                    </li>
+                  </ul>
+                </Card.Text>
+                <Button className="link-button">
+                  <a href="#placeholder">Github Page</a>
+                </Button>
+              </Card.Body>
+            </Card>
+          </Container>
+        </Carousel.Item>
+      </Carousel>
+    </Container>
+  );
+}
+
+
+export default Project;
diff --git a/src/Components/WorkExpereince.js b/src/Components/WorkExpereince.js
new file mode 100644
index 00000000..0db83c7b
--- /dev/null
+++ b/src/Components/WorkExpereince.js
@@ -0,0 +1,293 @@
+import React, { useEffect } from "react";
+import { Container } from "react-bootstrap";
+import Col from "react-bootstrap/Col";
+import Nav from "react-bootstrap/Nav";
+import Row from "react-bootstrap/Row";
+import Tab from "react-bootstrap/Tab";
+import Tabs from "react-bootstrap/Tabs";
+import { useMediaQuery } from "react-responsive";
+import aos from "aos";
+import "aos/dist/aos.css";
+
+function Work() {
+  useEffect(() => {
+    aos.init({ duration: 1500 });
+  }, []);
+  const isMobile = useMediaQuery({ query: "(max-width: 720px)" });
+  let element;
+  if (isMobile) {
+    element = <Mobile />;
+  } else {
+    element = <PC />;
+  }
+  return element;
+}
+
+function Mobile() {
+  return (
+    <Container
+      id="work"
+      style={{
+        color: "#20C20E",
+        fontFamily: "Share Tech Mono",
+      }}
+    >
+      <h1 style={{ textAlign: "center", marginBottom: "4vh" }}>
+        Professional Work Experience
+      </h1>
+      <Tabs
+        defaultActiveKey="cisco"
+        id="justify-tab-example"
+        className="mb-3"
+        fill
+      >
+        <Tab eventKey="cisco" title="Cisco">
+          <h2 style={{ color: "#0047AB", fontWeight: "bold" }}>
+            Cisco Certified Network Associate{" "}
+            <span style={{ color: "red", fontWeight: "bold" }}>@</span>{" "}
+            <span style={{ color: "magenta", fontWeight: "bold" }}>Cisco</span>
+          </h2>
+          <span style={{ fontSize: "max(1.2vw, 16px)", color: "aquamarine" }}>
+            From Mar 2017 to May 2017
+          </span>
+          <p>
+            <ul>
+              <li>
+                Learnt how to install, operate, configure, and verify basic IPv4
+                and IPv6 networks.
+              </li>
+              <li>
+                Covered configuring network components such as switches,routers,
+                and wireless LAN controllers; managing network devices; and
+                identifying basic security threats.
+              </li>
+              <li>
+                Established a foundation in network programmability, automation,
+                and software-defined networking.
+              </li>
+            </ul>
+          </p>
+        </Tab>
+        <Tab eventKey="st-electronic" title="ST Electronics">
+          <h2 style={{ color: "#0047AB", fontWeight: "bold" }}>
+            Software Development Intern{" "}
+            <span style={{ color: "red", fontWeight: "bold" }}>@</span>{" "}
+            <span style={{ color: "magenta", fontWeight: "bold" }}>
+              ST Electronics
+            </span>
+          </h2>
+          <span style={{ fontSize: "max(1.2vw, 16px)", color: "aquamarine" }}>
+            From Mar 2017 to May 2017
+          </span>
+          <p>
+            <ul>
+              <li>
+                Provided cybersecurity professionals with a conducive
+                environment to enhance their skills through the practical
+                application of knowledge.
+              </li>
+              <li>
+                Assisted in STECA's deep domain expertise and operational
+                experience
+              </li>
+              <li>
+                Imparted realistic cybersecurity training to the trainees using
+                real-life use cases to correlate with key concepts of
+                cybersecurity.
+              </li>
+            </ul>
+          </p>
+        </Tab>
+        <Tab eventKey="steca" title="STECA">
+          <h2 style={{ color: "#0047AB", fontWeight: "bold" }}>
+            Certified Cyber Security Operations Specialist{" "}
+            <span style={{ color: "red", fontWeight: "bold" }}>@</span>{" "}
+            <span style={{ color: "magenta", fontWeight: "bold" }}>STECA</span>
+          </h2>
+          <span style={{ fontSize: "max(1.2vw, 16px)", color: "aquamarine" }}>
+            From Mar 2017 to May 2017
+          </span>
+          <p>
+            <ul>
+              <li>
+                Applied best practices in cyber defence skills to detect,
+                contain, eradicate and report on successful cyber breaches.
+              </li>
+              <li>
+                Understood the team-based, communication and reporting skills
+                required to deliver an effective and efficient response to a
+                cyber breach.
+              </li>
+              <li>
+                Evaluated on explaining the entire kill-chain of various
+                cyber-attacks.
+              </li>
+            </ul>
+          </p>
+        </Tab>
+      </Tabs>
+    </Container>
+  );
+}
+
+function PC() {
+  return (
+    <Tab.Container defaultActiveKey="first">
+      <Container
+        id="work"
+        style={{
+          color: "#20C20E",
+          fontFamily: "Share Tech Mono",
+        }}
+      >
+        <h1
+          style={{
+            fontSize: "max(3vw, 32pt)",
+            fontFamily: "Rubik Mono One",
+          }}
+        >
+          4.Professional Work Experience
+        </h1>
+        <Row style={{}}>
+          <Col sm={3} style={{}}>
+            <Nav variant="pills" className="flex-column">
+              <Nav.Item>
+                <Nav.Link
+                  eventKey="first"
+                  style={{ fontSize: "max(1.2vw, 20px)", fontWeight: "bold" }}
+                >
+                  Cisco
+                </Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link
+                  eventKey="second"
+                  style={{ fontSize: "max(1.2vw, 20px)", fontWeight: "bold" }}
+                >
+                  ST Electronics
+                </Nav.Link>
+                <Nav.Item>
+                  <Nav.Link
+                    eventKey="third"
+                    style={{ fontSize: "max(1.2vw, 20px)", fontWeight: "bold" }}
+                  >
+                    STECA
+                  </Nav.Link>
+                </Nav.Item>
+              </Nav.Item>
+            </Nav>
+          </Col>
+          <Col sm={9} style={{ padding: "0px" }}>
+            <Tab.Content>
+              <Tab.Pane
+                eventKey="first"
+                style={{ fontSize: "max(1.2vw, 20px)" }}
+              >
+                <h2 style={{ color: "#0047AB", fontWeight: "bold" }}>
+                  Cisco Certified Network Associate{" "}
+                  <span style={{ color: "red", fontWeight: "bold" }}>@</span>{" "}
+                  <span style={{ color: "magenta", fontWeight: "bold" }}>
+                    Cisco
+                  </span>
+                </h2>
+                <span
+                  style={{ fontSize: "max(1.2vw, 16px)", color: "aquamarine" }}
+                >
+                  From Mar 2017 to May 2017
+                </span>
+                <p>
+                  <ul>
+                    <li>
+                      Learnt how to install, operate, configure, and verify
+                      basic IPv4 and IPv6 networks.
+                    </li>
+                    <li>
+                      Covered configuring network components such as
+                      switches,routers, and wireless LAN controllers; managing
+                      network devices; and identifying basic security threats.
+                    </li>
+                    <li>
+                      Established a foundation in network programmability,
+                      automation, and software-defined networking.
+                    </li>
+                  </ul>
+                </p>
+              </Tab.Pane>
+              <Tab.Pane
+                eventKey="second"
+                style={{ fontSize: "max(1.2vw, 20px)" }}
+              >
+                <h2 style={{ color: "#0047AB", fontWeight: "bold" }}>
+                  Software Development Intern{" "}
+                  <span style={{ color: "red", fontWeight: "bold" }}>@</span>{" "}
+                  <span style={{ color: "magenta", fontWeight: "bold" }}>
+                    ST Electronics
+                  </span>
+                </h2>
+                <span
+                  style={{ fontSize: "max(1.2vw, 16px)", color: "aquamarine" }}
+                >
+                  From Mar 2017 to May 2017
+                </span>
+                <p>
+                  <ul>
+                    <li>
+                      Provided cybersecurity professionals with a conducive
+                      environment to enhance their skills through the practical
+                      application of knowledge.
+                    </li>
+                    <li>
+                      Assisted in STECA's deep domain expertise and operational
+                      experience
+                    </li>
+                    <li>
+                      Imparted realistic cybersecurity training to the trainees
+                      using real-life use cases to correlate with key concepts
+                      of cybersecurity.
+                    </li>
+                  </ul>
+                </p>
+              </Tab.Pane>
+              <Tab.Pane
+                eventKey="third"
+                style={{ fontSize: "max(1.2vw, 20px)" }}
+              >
+                <h2 style={{ color: "#0047AB", fontWeight: "bold" }}>
+                  Certified Cyber Security Operations Specialist{" "}
+                  <span style={{ color: "red", fontWeight: "bold" }}>@</span>{" "}
+                  <span style={{ color: "magenta", fontWeight: "bold" }}>
+                    STECA
+                  </span>
+                </h2>
+                <span
+                  style={{ fontSize: "max(1.2vw, 16px)", color: "aquamarine" }}
+                >
+                  From Mar 2017 to May 2017
+                </span>
+                <p>
+                  <ul>
+                    <li>
+                      Applied best practices in cyber defence skills to detect,
+                      contain, eradicate and report on successful cyber
+                      breaches.
+                    </li>
+                    <li>
+                      Understood the team-based, communication and reporting
+                      skills required to deliver an effective and efficient
+                      response to a cyber breach.
+                    </li>
+                    <li>
+                      Evaluated on explaining the entire kill-chain of various
+                      cyber-attacks.
+                    </li>
+                  </ul>
+                </p>
+              </Tab.Pane>
+            </Tab.Content>
+          </Col>
+        </Row>
+      </Container>
+    </Tab.Container>
+  );
+}
+export default Work;
diff --git a/src/Components/skills.js b/src/Components/skills.js
new file mode 100644
index 00000000..c2ae4df8
--- /dev/null
+++ b/src/Components/skills.js
@@ -0,0 +1,179 @@
+import React, { useEffect } from "react";
+import { Col, Container } from "react-bootstrap";
+import ProgressBar from "react-bootstrap/ProgressBar";
+import aos from "aos";
+import "aos/dist/aos.css";
+
+function Skills() {
+  useEffect(() => {
+    aos.init({ duration: 1500 });
+  }, []);
+  const 
+    expert = 85,
+    basics = 33,
+    intermediate = 50,
+    advanced = 70;
+  return (
+    <Container
+      className="centerDiv"
+      id="skills"
+      style={{
+        color: "#20C20E",
+        fontFamily: "Share Tech Mono",
+      }}
+    >
+      <h1
+        style={{
+          fontFamily: "Rubik Mono One",
+          fontSize: "max(3.0vw, 22pt)",
+        }}
+      >
+        3.Professional Skills
+      </h1>
+      <Container className="centerDiv" id="skillswrap">
+        <Col style={{ width: "100%" }}>
+          <label
+            style={{
+              fontSize: "max(1.5vw, 27px)",
+              fontWeight: "bold",
+            }}
+          >
+            Javascript
+          </label>
+          <ProgressBar style={{ height: "2.3vh" }}>
+            <ProgressBar
+              data-aos="zoom-in-right"
+              now={advanced}
+              label={"ADVANCED"}
+              className="advanced"
+              style={{ fontSize: "1.4vh", color: "black", fontWeight: "bold" }}
+            />
+          </ProgressBar>
+          <label
+            style={{
+              fontSize: "max(1.5vw, 27px)",
+              fontWeight: "bold",
+            }}
+          >
+            HTML && CSS
+          </label>
+          <ProgressBar style={{ height: "2.3vh" }}>
+            <ProgressBar
+              data-aos="zoom-in-right"
+              now={advanced}
+              label={"ADVANCED"}
+              className="advanced"
+              style={{ fontSize: "1.4vh", color: "black", fontWeight: "bold" }}
+            />
+          </ProgressBar>
+          <label
+            style={{
+              fontSize: "max(1.5vw, 27px)",
+              fontWeight: "bold",
+            }}
+          >
+            C/C++
+          </label>
+          <ProgressBar style={{ height: "2.3vh" }}>
+            <ProgressBar
+              data-aos="zoom-in-right"
+              now={intermediate}
+              label={"INTERMEDIATE"}
+              className="intermediate"
+              style={{ fontSize: "1.4vh", color: "black", fontWeight: "bold" }}
+            />
+          </ProgressBar>
+          <label
+            style={{
+              fontSize: "max(1.5vw, 27px)",
+              fontWeight: "bold",
+            }}
+          >
+            {"Python(Data analysis)"}
+          </label>
+          <ProgressBar style={{ height: "2.3vh" }}>
+            <ProgressBar
+              data-aos="zoom-in-right"
+              now={intermediate}
+              label={"INTERMEDIATE"}
+              className="intermediate"
+              style={{ fontSize: "1.4vh", color: "black", fontWeight: "bold" }}
+            />
+          </ProgressBar>
+        </Col>
+        <Col style={{ width: "100%" }}>
+          <label
+            style={{
+              fontSize: "max(1.5vw, 27px)",
+              fontWeight: "bold",
+            }}
+          >
+            Firebase
+          </label>
+          <ProgressBar style={{ height: "2.3vh" }}>
+            <ProgressBar
+              data-aos="zoom-in-right"
+              now={intermediate}
+              label={"INTERMEDIATE"}
+              className="intermediate"
+              style={{ fontSize: "1.4vh", color: "black", fontWeight: "bold" }}
+            />
+          </ProgressBar>
+          <label
+            style={{
+              fontSize: "max(1.5vw, 27px)",
+              fontWeight: "bold",
+            }}
+          >
+            React
+          </label>
+          <ProgressBar style={{ height: "2.3vh" }}>
+            <ProgressBar
+              data-aos="zoom-in-right"
+              now={advanced}
+              label={"ADVANCED"}
+              className="advanced"
+              style={{ fontSize: "1.4vh", color: "black", fontWeight: "bold" }}
+            />
+          </ProgressBar>
+          <label
+            style={{
+              fontSize: "max(1.5vw, 27px)",
+              fontWeight: "bold",
+            }}
+          >
+            Git/github
+          </label>
+          <ProgressBar style={{ height: "2.3vh" }}>
+            <ProgressBar
+              data-aos="zoom-in-right"
+              now={advanced}
+              label={"ADVANCED"}
+              className="advanced"
+              style={{ fontSize: "1.4vh", color: "black", fontWeight: "bold" }}
+            />
+          </ProgressBar>
+          <label
+            style={{
+              fontSize: "max(1.5vw, 27px)",
+              fontWeight: "bold",
+            }}
+          >
+            Visual Code Studio
+          </label>
+          <ProgressBar style={{ height: "2.3vh" }}>
+            <ProgressBar
+              data-aos="zoom-in-right"
+              now={expert}
+              label={"EXPERT"}
+              className="expert"
+              style={{ fontSize: "1.4vh", color: "black", fontWeight: "bold" }}
+            />
+          </ProgressBar>
+        </Col>
+      </Container>
+    </Container>
+  );
+}
+
+export default Skills;
diff --git a/src/Components/test.js b/src/Components/test.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/assets/images/blackjack.png b/src/assets/images/blackjack.png
new file mode 100644
index 00000000..1059c3a2
Binary files /dev/null and b/src/assets/images/blackjack.png differ
diff --git a/src/assets/images/eee.png b/src/assets/images/eee.png
new file mode 100644
index 00000000..fbe8d93d
Binary files /dev/null and b/src/assets/images/eee.png differ
diff --git a/src/assets/images/hero1.jpg b/src/assets/images/hero1.jpg
new file mode 100644
index 00000000..800becf2
Binary files /dev/null and b/src/assets/images/hero1.jpg differ
diff --git a/src/assets/logos/calendar.svg b/src/assets/logos/calendar.svg
new file mode 100644
index 00000000..c8590dd0
--- /dev/null
+++ b/src/assets/logos/calendar.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
+  <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/logos/envelope.svg b/src/assets/logos/envelope.svg
new file mode 100644
index 00000000..122fc357
--- /dev/null
+++ b/src/assets/logos/envelope.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
+  <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/logos/facebook.jpg b/src/assets/logos/facebook.jpg
new file mode 100644
index 00000000..77d9bc09
Binary files /dev/null and b/src/assets/logos/facebook.jpg differ
diff --git a/src/assets/logos/facebook.svg b/src/assets/logos/facebook.svg
new file mode 100644
index 00000000..e8d1443d
--- /dev/null
+++ b/src/assets/logos/facebook.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
+  <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/logos/github.svg b/src/assets/logos/github.svg
new file mode 100644
index 00000000..bb4e45ce
--- /dev/null
+++ b/src/assets/logos/github.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
+  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/logos/google.svg b/src/assets/logos/google.svg
new file mode 100644
index 00000000..47abd492
--- /dev/null
+++ b/src/assets/logos/google.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-google" viewBox="0 0 16 16">
+  <path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/logos/leetcode.png b/src/assets/logos/leetcode.png
new file mode 100644
index 00000000..d47e5188
Binary files /dev/null and b/src/assets/logos/leetcode.png differ
diff --git a/src/assets/logos/leetcode.svg b/src/assets/logos/leetcode.svg
new file mode 100644
index 00000000..fe7245ae
--- /dev/null
+++ b/src/assets/logos/leetcode.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" standalone="no"?>
+        <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LeetCode</title><path d="M13.483 0a1.374 1.374 0 0 0-.961.438L7.116 6.226l-3.854 4.126a5.266 5.266 0 0 0-1.209 2.104 5.35 5.35 0 0 0-.125.513 5.527 5.527 0 0 0 .062 2.362 5.83 5.83 0 0 0 .349 1.017 5.938 5.938 0 0 0 1.271 1.818l4.277 4.193.039.038c2.248 2.165 5.852 2.133 8.063-.074l2.396-2.392c.54-.54.54-1.414.003-1.955a1.378 1.378 0 0 0-1.951-.003l-2.396 2.392a3.021 3.021 0 0 1-4.205.038l-.02-.019-4.276-4.193c-.652-.64-.972-1.469-.948-2.263a2.68 2.68 0 0 1 .066-.523 2.545 2.545 0 0 1 .619-1.164L9.13 8.114c1.058-1.134 3.204-1.27 4.43-.278l3.501 2.831c.593.48 1.461.387 1.94-.207a1.384 1.384 0 0 0-.207-1.943l-3.5-2.831c-.8-.647-1.766-1.045-2.774-1.202l2.015-2.158A1.384 1.384 0 0 0 13.483 0zm-2.866 12.815a1.38 1.38 0 0 0-1.38 1.382 1.38 1.38 0 0 0 1.38 1.382H20.79a1.38 1.38 0 0 0 1.38-1.382 1.38 1.38 0 0 0-1.38-1.382z"/></svg>  
\ No newline at end of file
diff --git a/src/assets/logos/linkedin.svg b/src/assets/logos/linkedin.svg
new file mode 100644
index 00000000..4c4efe59
--- /dev/null
+++ b/src/assets/logos/linkedin.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
+  <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/logos/location.svg b/src/assets/logos/location.svg
new file mode 100644
index 00000000..e88b77b6
--- /dev/null
+++ b/src/assets/logos/location.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
+  <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/logos/logo.png b/src/assets/logos/logo.png
new file mode 100644
index 00000000..90b48bad
Binary files /dev/null and b/src/assets/logos/logo.png differ
diff --git a/src/assets/logos/telegram.svg b/src/assets/logos/telegram.svg
new file mode 100644
index 00000000..139af07e
--- /dev/null
+++ b/src/assets/logos/telegram.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telegram" viewBox="0 0 16 16">
+  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/logos/whatsapp.svg b/src/assets/logos/whatsapp.svg
new file mode 100644
index 00000000..6242d057
--- /dev/null
+++ b/src/assets/logos/whatsapp.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
+  <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/resume-sample.pdf b/src/assets/resume-sample.pdf
new file mode 100644
index 00000000..444a6ed1
Binary files /dev/null and b/src/assets/resume-sample.pdf differ
diff --git a/src/logo.png b/src/logo.png
deleted file mode 100755
index a7e08590..00000000
Binary files a/src/logo.png and /dev/null differ