diff --git a/.eslintcache b/.eslintcache
index ead0915..4f55081 100644
--- a/.eslintcache
+++ b/.eslintcache
@@ -1 +1 @@
-[{"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx":"1","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts":"2","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx":"3","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx":"4","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx":"5","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx":"6","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx":"7","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx":"8","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx":"9","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\cusotmHooks.ts":"10","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Footer.tsx":"11","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\AboutMe.tsx":"12"},{"size":560,"mtime":1609455390298,"results":"13","hashOfConfig":"14"},{"size":440,"mtime":1609445337674,"results":"15","hashOfConfig":"14"},{"size":384,"mtime":1609720686967,"results":"16","hashOfConfig":"14"},{"size":1395,"mtime":1609720686979,"results":"17","hashOfConfig":"14"},{"size":235,"mtime":1609720686977,"results":"18","hashOfConfig":"14"},{"size":424,"mtime":1609644947153,"results":"19","hashOfConfig":"14"},{"size":142,"mtime":1609448138377,"results":"20","hashOfConfig":"14"},{"size":132,"mtime":1609448124025,"results":"21","hashOfConfig":"14"},{"size":9456,"mtime":1609720687002,"results":"22","hashOfConfig":"14"},{"size":1072,"mtime":1609462531624,"results":"23","hashOfConfig":"14"},{"size":1241,"mtime":1609720686985,"results":"24","hashOfConfig":"14"},{"size":5418,"mtime":1609720686980,"results":"25","hashOfConfig":"14"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},"lcbj9u",{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"43","messages":"44","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"45","usedDeprecatedRules":"28"},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"50","messages":"51","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":"52"},"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx",[],["53","54"],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx",["55"],"/**\n * TODO:\n *  - For things that can't be linked, use <ExpandAltOutlined /> to signal that clicking will open a modal https://ant.design/components/modal/\n *     in order to give a more complex writeup and some pictures\n *  - Tooltip for modal and linkable items, possibly <QuestionCircleOutlined /> which displays a modal with an example card with tooltips or explanations\n *  - Footer\n *  - Responsive top bar\n *\n */\n\nimport \"./ProjectGrid.scss\";\nimport Masonry from \"masonry-layout\";\nimport { useEffect } from \"react\";\nimport {LinkOutlined} from \"@ant-design/icons\";\nimport CodeDaySD from \"../images/SanDiego.svg\";\nimport Foresight from \"../images/foresightsports.png\";\nimport Distest from \"../images/distest.svg\";\nimport Scoresaver from \"../images/scoresaver.svg\";\nimport Hashicorp from \"../images/HashiCorp_Logo_no_text.png\";\n\n\ntype GridElementImageProps = {\n  image_url: string;\n  image_alt: string;\n  title: string;\n  text: string;\n  link?: string;\n  org?: string;\n};\n\ntype GridElementProps = {\n  title: string;\n  text: string;\n  link?: string;\n  org?: string;\n};\n\nconst OneWide = ({ title, text, link, org }: GridElementProps) => {\n  if (link === undefined) {\n    return (\n      <div className={\"OneWide GridElement\"}>\n        <div className={\"GridElementInternal\"}>\n          <div className={\"title\"}>\n            <h2>{title}</h2>\n            {org && <h3>{org}</h3>}\n          </div>\n          <div className={\"description\"}>\n            <p>{text}</p>\n          </div>\n        </div>\n      </div>\n    );\n  }\n  return (\n    <a className={\"OneWide GridElement Link\"} href={link} rel={\"noreferrer\"} target={\"_blank\"}>\n      <div className={\"GridElementInternal\"}>\n        <div className={\"title\"}>\n          <h2>{title}</h2>\n          {org && <h3>{org}</h3>}\n          <LinkOutlined className={\"LinkIcon\"}/>\n        </div>\n        <div className={\"description\"}>\n          <p>{text}</p>\n        </div>\n      </div>\n    </a>\n  );\n};\n\nconst OneWidePic = ({\n  image_url,\n  image_alt,\n  title,\n  text,\n  link,\n  org,\n}: GridElementImageProps) => {\n  if (link === undefined) {\n    return (\n      <div className={\"OneWide Pic GridElement\"}>\n        <div className={\"GridElementInternal\"}>\n          <div className={\"image\"}>\n            <img src={image_url} alt={image_alt} />\n          </div>\n          <div className={\"description\"}>\n            <h2>{title}</h2>\n            {org && <h3>{org}</h3>}\n\n            <p>{text}</p>\n          </div>\n        </div>\n      </div>\n    );\n  }\n  return (\n    <a className={\"OneWide Pic GridElement Link\"} href={link} target={\"_blank\"} rel={\"noreferrer\"}>\n      <div className={\"GridElementInternal\"}>\n        <div className={\"image\"}>\n          <img src={image_url} alt={image_alt} />\n          <LinkOutlined className={\"LinkIcon\"}/>\n        </div>\n        <div className={\"description\"}>\n          <h2>{title}</h2>\n          {org && <h3>{org}</h3>}\n          <p>{text}</p>\n        </div>\n      </div>\n    </a>\n  );\n};\n\nconst FourByOneGridElement = ({\n  image_url,\n  image_alt,\n  title,\n  text,\n  link,\n  org,\n}: GridElementImageProps) => {\n  if (link === undefined) {\n    return (\n      <div className={\"FourByOne GridElement\"}>\n        <div className={\"GridElementInternal\"}>\n          <div className={\"image\"}>\n            <img src={image_url} alt={image_alt} />\n          </div>\n          <div className={\"description\"}>\n            <h2>{title}</h2>\n            {org && <h3>{org}</h3>}\n            <p>{text}</p>\n          </div>\n        </div>\n      </div>\n    );\n  }\n  return (\n    <a className={\"FourByOne GridElement Link\"} href={link} target={\"_blank\"} rel={\"noreferrer\"}>\n      <div className={\"GridElementInternal\"}>\n        <div className={\"image\"}>\n          <img src={image_url} alt={image_alt} />\n          <LinkOutlined className={\"LinkIcon\"}/>\n        </div>\n        <div className={\"description\"}>\n          <h2>{title}</h2>\n          {org && <h3>{org}</h3>}\n          <p>{text}</p>\n        </div>\n      </div>\n    </a>\n  );\n};\n\nexport const ProjectGrid = () => {\n  useEffect(() => {\n    var elem = document.querySelector(\"#project-grid\");\n\n    // @ts-ignore\n    var msnry = new Masonry(elem, {\n      itemSelector: \".GridElement\",\n      gutter: 0,\n      columnWidth: \".GridSizer\",\n      percentPosition: true,\n    });\n  });\n\n  return (\n    <div>\n      <div id={\"project-grid-parent\"}>\n        <div id={\"project-header\"}>\n          <h2>&lt;/&gt; My Projects</h2>\n          <p>\n            A gallery of some of my most interesting projects. Look for <LinkOutlined />, click those projects for more information!\n          </p>\n        </div>\n        <div id={\"project-grid\"}>\n\n          <div className={\"GridSizer\"}/>\n          <OneWide\n              title={\"ElaticMatch\"}\n              org={\"CodeDay\"}\n              text={\"A set of tools, including a custom suggestion and weighting system, as well as a custom matching algorithm that I wrote and used to match around 350 students to the best-fitting mentors in the CodeDay Labs summer internship program in 2020.\"}\n              link={\"https://github.com/codeday/labs-elastic-match\"}\n          />\n          <OneWide\n              title={\"John Peter\"}\n              org={\"CodeDay\"}\n              text={\n                \"John Peter is a Discord bot used for moderation and server management for Virtual CodeDay. It has a very extensive featureset, and has been used for multiple CodeDays and has worked with over 1000 students.\"\n              }\n              link={\"https://github.com/codeday/johnpeter-discord\"}\n          />\n          <OneWide\n              title={\"CopyMoji\"}\n              org={\"BetterDiscord\"}\n              text={\n                \"An extension for the alternate discord client BetterDiscord that changes the functionality of copying emoji to copy the actual emoji characters rather than their names from the discord client.\"\n              }\n              link={\"https://github.com/JakeCover/BetterDiscordExtensions/tree/main/plugins/CopyMoji\"}\n          />\n          <OneWidePic\n              image_url={CodeDaySD}\n              image_alt={\"CodeDay San Diego Logo\"}\n              org={\"CodeDay\"}\n              title={\"CodeDay San Diego\"}\n              text={\n                \"A 24 hour hackathon occurring around the world a few times a year. I volunteered for and then later ran the San Diego event.\"\n              }\n              link={\"https://event.codeday.org/sandiego\"}\n          />\n          <FourByOneGridElement\n              image_url={Foresight}\n              image_alt={\"Foresight Sports Logo\"}\n              title={\"Foresight Sports\"}\n              text={\n                \"Foresight Sports creates advanced augmented reality sports experiences. I created multiple games using Unity that took data from their launch monitor technology and translated it into a seamless experience.\"\n              }\n          />\n          <OneWidePic\n              image_url={Distest}\n              image_alt={\"Distest Logo\"}\n              title={\"Distest\"}\n              org={\"Random Projects\"}\n              text={\n                \"Distest is a testing library I wrote for Discord bots that allows for full integration tests of bots, improving the discord bot development workflow significantly. As far as I know, it's the only tool available for this sort of testing.\"\n              }\n              link={\"https://github.com/JakeCover/distest\"}\n          />\n          <OneWidePic\n              image_url={Scoresaver}\n              image_alt={\"Scoresaver Logo\"}\n              title={\"ScoreSaver\"}\n              org={\"Random Projects\"}\n              text={\n                \"A Chrome extension to help you download beatsaber songs directly from ScoreSaber. No more searching for mapper names on BeatSaver, just download the newest ranked songs directly!\"\n              }\n              link={\"https://github.com/JakeCover/ScoreSaverExtention\"}\n          />\n          <OneWide\n              title={\"Personal Website\"}\n              org={\"Random Projects\"}\n              text={\n                \"You're looking at it! There's not a whole lot to this, it's just a React site hosted on GitHub Pages, but I didn't know React before starting on this so I'm pretty proud of it.\"\n              }\n              link={\"https://github.com/JakeCover/PersonalWebsite_Static\"}\n          />\n          <OneWidePic\n              image_url={Hashicorp}\n              image_alt={\"HashiCorp Logo\"}\n              title={\"Hashicorp Stack Sysadmin\"}\n              org={\"CodeDay, Random Projects\"}\n              text={\n                \"I've setup and used a stack consisting of Nomad, Consul, and Vault along with Traefik both at CodeDay, where it runs almost every service we have, as well as at home, where I use it to run a number of assorted services on a few old machines. I strongly recommend it, it's very powerful and not all that complex to get started with!\"\n              }\n          />\n          <OneWide\n              title={\"CodeDay\"}\n              text={\n                \"CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges\\n attendees to create a game or an app.\"\n              }\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\cusotmHooks.ts",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Footer.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\AboutMe.tsx",["56","57","58","59","60"],"import \"./AboutMe.scss\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { Tooltip } from \"antd\";\r\nimport { useState, useEffect } from \"react\";\r\nimport axios from \"axios\";\r\n\r\nconst TelegramOutlinedSvg = () => {\r\n  return (\r\n    <svg\r\n      width=\"24px\"\r\n      height=\"24px\"\r\n      version=\"1.1\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      style={{\r\n        fillRule: \"evenodd\",\r\n        clipRule: \"evenodd\",\r\n        strokeLinejoin: \"round\",\r\n        strokeMiterlimit: 1.41421,\r\n      }}\r\n    >\r\n      <path\r\n        id=\"telegram-1\"\r\n        d=\"M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z\"\r\n      />\r\n    </svg>\r\n  );\r\n};\r\n\r\nconst LastFmLi = () => {\r\n  const [nowPlayingSong, setNowPlayingSong] = useState<string>(\"nothing\");\r\n  const [nowPlayingArtist, setNowPlayingArtist] = useState<string>(\"no-one\");\r\n\r\n  const updateNowPlaying = async () => {\r\n    try {\r\n      const songData = await axios.get(\r\n        \"https://jsonplaceholder.typicode.com/posts\"\r\n      );\r\n\r\n      console.log(songData.data);\r\n    } catch (err) {\r\n      console.error(err);\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    updateNowPlaying();\r\n\r\n    const interval = setInterval(updateNowPlaying, 10000);\r\n\r\n    return () => {\r\n      clearInterval(interval);\r\n    };\r\n  }, []);\r\n  return <li>listening to ____ by ____</li>;\r\n};\r\n\r\nconst Age = () => {\r\n  const [age, setAge] = useState(\r\n    Math.round((new Date().getTime() - 1021004428000) / 1000)\r\n  );\r\n\r\n  const UpdateAge = () => {\r\n    setAge(Math.round((new Date().getTime() - 1021004428000) / 1000));\r\n  };\r\n\r\n  useEffect(() => {\r\n    UpdateAge();\r\n\r\n    const interval = setInterval(UpdateAge, 1000);\r\n\r\n    return () => {\r\n      clearInterval(interval);\r\n    };\r\n  }, []);\r\n\r\n  return (\r\n    <li>\r\n      <span style={{ fontFamily: \"Fira Code\" }}>{age}</span> seconds old{\" \"}\r\n    </li>\r\n  );\r\n};\r\n\r\nexport const AboutMe = () => {\r\n  const EmailHandler = () => {\r\n    const email = \"Y29udGFjdEBqYWtlY292ZXIubWU=\";\r\n    window.prompt(\"Thanks for being a human! Here's my email:\", atob(email));\r\n  };\r\n\r\n  return (\r\n    <div id={\"about-me-parent\"}>\r\n      <div id={\"about-me\"} className={\"about-me-card\"}>\r\n        <h1> Hi! I'm Jake!</h1>\r\n\r\n        <div id={\"info-parent\"}>\r\n          <div id={\"specific-info\"}>\r\n            <h2> A bit about me:</h2>\r\n\r\n            <ul>\r\n              <li>\r\n                <b>Name</b>: Jake Cover\r\n              </li>\r\n              <li>Occupation: Student</li>\r\n              <li>Location: Southern California</li>\r\n              <li>\r\n                Projects:{\" \"}\r\n                <button\r\n                  onClick={() =>\r\n                    document.getElementById(\"project-header\")?.scrollIntoView({\r\n                      behavior: \"smooth\",\r\n                      block: \"start\",\r\n                    })\r\n                  }\r\n                >\r\n                  Down there\r\n                </button>\r\n              </li>\r\n              <li>\r\n                Resume: <Link to={\"/resume\"}>Over here</Link>\r\n              </li>\r\n              <li>\r\n                Find Me:\r\n                <ul>\r\n                  <li>\r\n                    Email: <button onClick={EmailHandler}>Click This</button>\r\n                  </li>\r\n                  <li>\r\n                    Twitter:{\" \"}\r\n                    <Tooltip title={\":(\"}>\r\n                      <a\r\n                        href={\"https://github.com/JakeCover\"}\r\n                        target=\"_blank\"\r\n                        rel=\"noreferrer\"\r\n                      >\r\n                        @cobular_\r\n                      </a>\r\n                    </Tooltip>\r\n                  </li>\r\n                  <li>\r\n                    GitHub:{\" \"}\r\n                    <a\r\n                      href={\"https://github.com/JakeCover\"}\r\n                      target=\"_blank\"\r\n                      rel=\"noreferrer\"\r\n                    >\r\n                      JakeCover\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    Telegram:{\" \"}\r\n                    <a\r\n                      href={\"https://t.me/cobular\"}\r\n                      target=\"_blank\"\r\n                      rel=\"noreferrer\"\r\n                    >\r\n                      @cobular\r\n                    </a>\r\n                  </li>\r\n                  <li>Elsewhere: Probably @cobular</li>\r\n                </ul>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n          <div id={\"fun-info\"}>\r\n            <h2>I'm:</h2>\r\n            <ul>\r\n              <Age />\r\n              <LastFmLi />\r\n              <li>\r\n                doing (general stuff - in class, projects, sleeping, games)\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n",{"ruleId":"61","replacedBy":"62"},{"ruleId":"63","replacedBy":"64"},{"ruleId":"65","severity":1,"message":"66","line":158,"column":9,"nodeType":"67","messageId":"68","endLine":158,"endColumn":14},{"ruleId":"65","severity":1,"message":"69","line":7,"column":7,"nodeType":"67","messageId":"68","endLine":7,"endColumn":26},{"ruleId":"65","severity":1,"message":"70","line":30,"column":10,"nodeType":"67","messageId":"68","endLine":30,"endColumn":24},{"ruleId":"65","severity":1,"message":"71","line":30,"column":26,"nodeType":"67","messageId":"68","endLine":30,"endColumn":43},{"ruleId":"65","severity":1,"message":"72","line":31,"column":10,"nodeType":"67","messageId":"68","endLine":31,"endColumn":26},{"ruleId":"65","severity":1,"message":"73","line":31,"column":28,"nodeType":"67","messageId":"68","endLine":31,"endColumn":47},"no-native-reassign",["74"],"no-negated-in-lhs",["75"],"@typescript-eslint/no-unused-vars","'msnry' is assigned a value but never used.","Identifier","unusedVar","'TelegramOutlinedSvg' is assigned a value but never used.","'nowPlayingSong' is assigned a value but never used.","'setNowPlayingSong' is assigned a value but never used.","'nowPlayingArtist' is assigned a value but never used.","'setNowPlayingArtist' is assigned a value but never used.","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
+[{"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx":"1","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts":"2","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx":"3","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx":"4","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx":"5","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx":"6","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx":"7","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx":"8","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx":"9","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\cusotmHooks.ts":"10","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Footer.tsx":"11","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\AboutMe.tsx":"12"},{"size":560,"mtime":1609455390298,"results":"13","hashOfConfig":"14"},{"size":440,"mtime":1609445337674,"results":"15","hashOfConfig":"14"},{"size":384,"mtime":1609720686967,"results":"16","hashOfConfig":"14"},{"size":1395,"mtime":1609720686979,"results":"17","hashOfConfig":"14"},{"size":235,"mtime":1609720686977,"results":"18","hashOfConfig":"14"},{"size":424,"mtime":1609644947153,"results":"19","hashOfConfig":"14"},{"size":142,"mtime":1609448138377,"results":"20","hashOfConfig":"14"},{"size":132,"mtime":1609448124025,"results":"21","hashOfConfig":"14"},{"size":9456,"mtime":1609720687002,"results":"22","hashOfConfig":"14"},{"size":1072,"mtime":1609462531624,"results":"23","hashOfConfig":"14"},{"size":1241,"mtime":1609720686985,"results":"24","hashOfConfig":"14"},{"size":5418,"mtime":1609720686980,"results":"25","hashOfConfig":"14"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},"lcbj9u",{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"43","messages":"44","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"45","usedDeprecatedRules":"28"},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"50","messages":"51","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":"52","usedDeprecatedRules":"53"},"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx",[],["54","55"],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx",["56"],"/**\n * TODO:\n *  - For things that can't be linked, use <ExpandAltOutlined /> to signal that clicking will open a modal https://ant.design/components/modal/\n *     in order to give a more complex writeup and some pictures\n *  - Tooltip for modal and linkable items, possibly <QuestionCircleOutlined /> which displays a modal with an example card with tooltips or explanations\n *  - Footer\n *  - Responsive top bar\n *\n */\n\nimport \"./ProjectGrid.scss\";\nimport Masonry from \"masonry-layout\";\nimport { useEffect } from \"react\";\nimport {LinkOutlined} from \"@ant-design/icons\";\nimport CodeDaySD from \"../images/SanDiego.svg\";\nimport Foresight from \"../images/foresightsports.png\";\nimport Distest from \"../images/distest.svg\";\nimport Scoresaver from \"../images/scoresaver.svg\";\nimport Hashicorp from \"../images/HashiCorp_Logo_no_text.png\";\n\n\ntype GridElementImageProps = {\n  image_url: string;\n  image_alt: string;\n  title: string;\n  text: string;\n  link?: string;\n  org?: string;\n};\n\ntype GridElementProps = {\n  title: string;\n  text: string;\n  link?: string;\n  org?: string;\n};\n\nconst OneWide = ({ title, text, link, org }: GridElementProps) => {\n  if (link === undefined) {\n    return (\n      <div className={\"OneWide GridElement\"}>\n        <div className={\"GridElementInternal\"}>\n          <div className={\"title\"}>\n            <h2>{title}</h2>\n            {org && <h3>{org}</h3>}\n          </div>\n          <div className={\"description\"}>\n            <p>{text}</p>\n          </div>\n        </div>\n      </div>\n    );\n  }\n  return (\n    <a className={\"OneWide GridElement Link\"} href={link} rel={\"noreferrer\"} target={\"_blank\"}>\n      <div className={\"GridElementInternal\"}>\n        <div className={\"title\"}>\n          <h2>{title}</h2>\n          {org && <h3>{org}</h3>}\n          <LinkOutlined className={\"LinkIcon\"}/>\n        </div>\n        <div className={\"description\"}>\n          <p>{text}</p>\n        </div>\n      </div>\n    </a>\n  );\n};\n\nconst OneWidePic = ({\n  image_url,\n  image_alt,\n  title,\n  text,\n  link,\n  org,\n}: GridElementImageProps) => {\n  if (link === undefined) {\n    return (\n      <div className={\"OneWide Pic GridElement\"}>\n        <div className={\"GridElementInternal\"}>\n          <div className={\"image\"}>\n            <img src={image_url} alt={image_alt} />\n          </div>\n          <div className={\"description\"}>\n            <h2>{title}</h2>\n            {org && <h3>{org}</h3>}\n\n            <p>{text}</p>\n          </div>\n        </div>\n      </div>\n    );\n  }\n  return (\n    <a className={\"OneWide Pic GridElement Link\"} href={link} target={\"_blank\"} rel={\"noreferrer\"}>\n      <div className={\"GridElementInternal\"}>\n        <div className={\"image\"}>\n          <img src={image_url} alt={image_alt} />\n          <LinkOutlined className={\"LinkIcon\"}/>\n        </div>\n        <div className={\"description\"}>\n          <h2>{title}</h2>\n          {org && <h3>{org}</h3>}\n          <p>{text}</p>\n        </div>\n      </div>\n    </a>\n  );\n};\n\nconst FourByOneGridElement = ({\n  image_url,\n  image_alt,\n  title,\n  text,\n  link,\n  org,\n}: GridElementImageProps) => {\n  if (link === undefined) {\n    return (\n      <div className={\"FourByOne GridElement\"}>\n        <div className={\"GridElementInternal\"}>\n          <div className={\"image\"}>\n            <img src={image_url} alt={image_alt} />\n          </div>\n          <div className={\"description\"}>\n            <h2>{title}</h2>\n            {org && <h3>{org}</h3>}\n            <p>{text}</p>\n          </div>\n        </div>\n      </div>\n    );\n  }\n  return (\n    <a className={\"FourByOne GridElement Link\"} href={link} target={\"_blank\"} rel={\"noreferrer\"}>\n      <div className={\"GridElementInternal\"}>\n        <div className={\"image\"}>\n          <img src={image_url} alt={image_alt} />\n          <LinkOutlined className={\"LinkIcon\"}/>\n        </div>\n        <div className={\"description\"}>\n          <h2>{title}</h2>\n          {org && <h3>{org}</h3>}\n          <p>{text}</p>\n        </div>\n      </div>\n    </a>\n  );\n};\n\nexport const ProjectGrid = () => {\n  useEffect(() => {\n    var elem = document.querySelector(\"#project-grid\");\n\n    // @ts-ignore\n    var msnry = new Masonry(elem, {\n      itemSelector: \".GridElement\",\n      gutter: 0,\n      columnWidth: \".GridSizer\",\n      percentPosition: true,\n    });\n  });\n\n  return (\n    <div>\n      <div id={\"project-grid-parent\"}>\n        <div id={\"project-header\"}>\n          <h2>&lt;/&gt; My Projects</h2>\n          <p>\n            A gallery of some of my most interesting projects. Look for <LinkOutlined />, click those projects for more information!\n          </p>\n        </div>\n        <div id={\"project-grid\"}>\n\n          <div className={\"GridSizer\"}/>\n          <OneWide\n              title={\"ElaticMatch\"}\n              org={\"CodeDay\"}\n              text={\"A set of tools, including a custom suggestion and weighting system, as well as a custom matching algorithm that I wrote and used to match around 350 students to the best-fitting mentors in the CodeDay Labs summer internship program in 2020.\"}\n              link={\"https://github.com/codeday/labs-elastic-match\"}\n          />\n          <OneWide\n              title={\"John Peter\"}\n              org={\"CodeDay\"}\n              text={\n                \"John Peter is a Discord bot used for moderation and server management for Virtual CodeDay. It has a very extensive featureset, and has been used for multiple CodeDays and has worked with over 1000 students.\"\n              }\n              link={\"https://github.com/codeday/johnpeter-discord\"}\n          />\n          <OneWide\n              title={\"CopyMoji\"}\n              org={\"BetterDiscord\"}\n              text={\n                \"An extension for the alternate discord client BetterDiscord that changes the functionality of copying emoji to copy the actual emoji characters rather than their names from the discord client.\"\n              }\n              link={\"https://github.com/JakeCover/BetterDiscordExtensions/tree/main/plugins/CopyMoji\"}\n          />\n          <OneWidePic\n              image_url={CodeDaySD}\n              image_alt={\"CodeDay San Diego Logo\"}\n              org={\"CodeDay\"}\n              title={\"CodeDay San Diego\"}\n              text={\n                \"A 24 hour hackathon occurring around the world a few times a year. I volunteered for and then later ran the San Diego event.\"\n              }\n              link={\"https://event.codeday.org/sandiego\"}\n          />\n          <FourByOneGridElement\n              image_url={Foresight}\n              image_alt={\"Foresight Sports Logo\"}\n              title={\"Foresight Sports\"}\n              text={\n                \"Foresight Sports creates advanced augmented reality sports experiences. I created multiple games using Unity that took data from their launch monitor technology and translated it into a seamless experience.\"\n              }\n          />\n          <OneWidePic\n              image_url={Distest}\n              image_alt={\"Distest Logo\"}\n              title={\"Distest\"}\n              org={\"Random Projects\"}\n              text={\n                \"Distest is a testing library I wrote for Discord bots that allows for full integration tests of bots, improving the discord bot development workflow significantly. As far as I know, it's the only tool available for this sort of testing.\"\n              }\n              link={\"https://github.com/JakeCover/distest\"}\n          />\n          <OneWidePic\n              image_url={Scoresaver}\n              image_alt={\"Scoresaver Logo\"}\n              title={\"ScoreSaver\"}\n              org={\"Random Projects\"}\n              text={\n                \"A Chrome extension to help you download beatsaber songs directly from ScoreSaber. No more searching for mapper names on BeatSaver, just download the newest ranked songs directly!\"\n              }\n              link={\"https://github.com/JakeCover/ScoreSaverExtention\"}\n          />\n          <OneWide\n              title={\"Personal Website\"}\n              org={\"Random Projects\"}\n              text={\n                \"You're looking at it! There's not a whole lot to this, it's just a React site hosted on GitHub Pages, but I didn't know React before starting on this so I'm pretty proud of it.\"\n              }\n              link={\"https://github.com/JakeCover/PersonalWebsite_Static\"}\n          />\n          <OneWidePic\n              image_url={Hashicorp}\n              image_alt={\"HashiCorp Logo\"}\n              title={\"Hashicorp Stack Sysadmin\"}\n              org={\"CodeDay, Random Projects\"}\n              text={\n                \"I've setup and used a stack consisting of Nomad, Consul, and Vault along with Traefik both at CodeDay, where it runs almost every service we have, as well as at home, where I use it to run a number of assorted services on a few old machines. I strongly recommend it, it's very powerful and not all that complex to get started with!\"\n              }\n          />\n          <OneWide\n              title={\"CodeDay\"}\n              text={\n                \"CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges\\n attendees to create a game or an app.\"\n              }\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\cusotmHooks.ts",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Footer.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\AboutMe.tsx",["57","58","59","60","61"],"import \"./AboutMe.scss\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { Tooltip } from \"antd\";\r\nimport { useState, useEffect } from \"react\";\r\nimport axios from \"axios\";\r\n\r\nconst TelegramOutlinedSvg = () => {\r\n  return (\r\n    <svg\r\n      width=\"24px\"\r\n      height=\"24px\"\r\n      version=\"1.1\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      style={{\r\n        fillRule: \"evenodd\",\r\n        clipRule: \"evenodd\",\r\n        strokeLinejoin: \"round\",\r\n        strokeMiterlimit: 1.41421,\r\n      }}\r\n    >\r\n      <path\r\n        id=\"telegram-1\"\r\n        d=\"M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z\"\r\n      />\r\n    </svg>\r\n  );\r\n};\r\n\r\nconst LastFmLi = () => {\r\n  const [nowPlayingSong, setNowPlayingSong] = useState<string>(\"nothing\");\r\n  const [nowPlayingArtist, setNowPlayingArtist] = useState<string>(\"no-one\");\r\n\r\n  const updateNowPlaying = async () => {\r\n    try {\r\n      const songData = await axios.get(\r\n        \"https://jsonplaceholder.typicode.com/posts\"\r\n      );\r\n\r\n      console.log(songData.data);\r\n    } catch (err) {\r\n      console.error(err);\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    updateNowPlaying();\r\n\r\n    const interval = setInterval(updateNowPlaying, 10000);\r\n\r\n    return () => {\r\n      clearInterval(interval);\r\n    };\r\n  }, []);\r\n  return <li>listening to ____ by ____</li>;\r\n};\r\n\r\nconst Age = () => {\r\n  const [age, setAge] = useState(\r\n    Math.round((new Date().getTime() - 1021004428000) / 1000)\r\n  );\r\n\r\n  const UpdateAge = () => {\r\n    setAge(Math.round((new Date().getTime() - 1021004428000) / 1000));\r\n  };\r\n\r\n  useEffect(() => {\r\n    UpdateAge();\r\n\r\n    const interval = setInterval(UpdateAge, 1000);\r\n\r\n    return () => {\r\n      clearInterval(interval);\r\n    };\r\n  }, []);\r\n\r\n  return (\r\n    <li>\r\n      <span style={{ fontFamily: \"Fira Code\" }}>{age}</span> seconds old{\" \"}\r\n    </li>\r\n  );\r\n};\r\n\r\nexport const AboutMe = () => {\r\n  const EmailHandler = () => {\r\n    const email = \"Y29udGFjdEBqYWtlY292ZXIubWU=\";\r\n    window.prompt(\"Thanks for being a human! Here's my email:\", atob(email));\r\n  };\r\n\r\n  return (\r\n    <div id={\"about-me-parent\"}>\r\n      <div id={\"about-me\"} className={\"about-me-card\"}>\r\n        <h1> Hi! I'm Jake!</h1>\r\n\r\n        <div id={\"info-parent\"}>\r\n          <div id={\"specific-info\"}>\r\n            <h2> A bit about me:</h2>\r\n\r\n            <ul>\r\n              <li>\r\n                <b>Name</b>: Jake Cover\r\n              </li>\r\n              <li>Occupation: Student</li>\r\n              <li>Location: Southern California</li>\r\n              <li>\r\n                Projects:{\" \"}\r\n                <button\r\n                  onClick={() =>\r\n                    document.getElementById(\"project-header\")?.scrollIntoView({\r\n                      behavior: \"smooth\",\r\n                      block: \"start\",\r\n                    })\r\n                  }\r\n                >\r\n                  Down there\r\n                </button>\r\n              </li>\r\n              <li>\r\n                Resume: <Link to={\"/resume\"}>Over here</Link>\r\n              </li>\r\n              <li>\r\n                Find Me:\r\n                <ul>\r\n                  <li>\r\n                    Email: <button onClick={EmailHandler}>Click This</button>\r\n                  </li>\r\n                  <li>\r\n                    Twitter:{\" \"}\r\n                    <Tooltip title={\":(\"}>\r\n                      <a\r\n                        href={\"https://github.com/JakeCover\"}\r\n                        target=\"_blank\"\r\n                        rel=\"noreferrer\"\r\n                      >\r\n                        @cobular_\r\n                      </a>\r\n                    </Tooltip>\r\n                  </li>\r\n                  <li>\r\n                    GitHub:{\" \"}\r\n                    <a\r\n                      href={\"https://github.com/JakeCover\"}\r\n                      target=\"_blank\"\r\n                      rel=\"noreferrer\"\r\n                    >\r\n                      JakeCover\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    Telegram:{\" \"}\r\n                    <a\r\n                      href={\"https://t.me/cobular\"}\r\n                      target=\"_blank\"\r\n                      rel=\"noreferrer\"\r\n                    >\r\n                      @cobular\r\n                    </a>\r\n                  </li>\r\n                  <li>Elsewhere: Probably @cobular</li>\r\n                </ul>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n          <div id={\"fun-info\"}>\r\n            <h2>I'm:</h2>\r\n            <ul>\r\n              <Age />\r\n              <LastFmLi />\r\n              <li>\r\n                doing (general stuff - in class, projects, sleeping, games)\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n",["62","63"],{"ruleId":"64","replacedBy":"65"},{"ruleId":"66","replacedBy":"67"},{"ruleId":"68","severity":1,"message":"69","line":158,"column":9,"nodeType":"70","messageId":"71","endLine":158,"endColumn":14},{"ruleId":"68","severity":1,"message":"72","line":7,"column":7,"nodeType":"70","messageId":"71","endLine":7,"endColumn":26},{"ruleId":"68","severity":1,"message":"73","line":30,"column":10,"nodeType":"70","messageId":"71","endLine":30,"endColumn":24},{"ruleId":"68","severity":1,"message":"74","line":30,"column":26,"nodeType":"70","messageId":"71","endLine":30,"endColumn":43},{"ruleId":"68","severity":1,"message":"75","line":31,"column":10,"nodeType":"70","messageId":"71","endLine":31,"endColumn":26},{"ruleId":"68","severity":1,"message":"76","line":31,"column":28,"nodeType":"70","messageId":"71","endLine":31,"endColumn":47},{"ruleId":"64","replacedBy":"77"},{"ruleId":"66","replacedBy":"78"},"no-native-reassign",["79"],"no-negated-in-lhs",["80"],"@typescript-eslint/no-unused-vars","'msnry' is assigned a value but never used.","Identifier","unusedVar","'TelegramOutlinedSvg' is assigned a value but never used.","'nowPlayingSong' is assigned a value but never used.","'setNowPlayingSong' is assigned a value but never used.","'nowPlayingArtist' is assigned a value but never used.","'setNowPlayingArtist' is assigned a value but never used.",["79"],["80"],"no-global-assign","no-unsafe-negation"]
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 155f85e..544310f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 
 # Created by https://www.toptal.com/developers/gitignore/api/react,webstorm
 # Edit at https://www.toptal.com/developers/gitignore?templates=react,webstorm
+build
 
 ### react ###
 .DS_*
@@ -121,4 +122,4 @@ fabric.properties
 # https://plugins.jetbrains.com/plugin/12206-codestream
 .idea/codestream.xml
 
-# End of https://www.toptal.com/developers/gitignore/api/react,webstorm
\ No newline at end of file
+# End of https://www.toptal.com/developers/gitignore/api/react,webstorm
diff --git a/package-lock.json b/package-lock.json
index e30e83e..c70f1b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5512,6 +5512,11 @@
         }
       }
     },
+    "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.7.2",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.7.2.tgz",
@@ -6680,6 +6685,30 @@
         }
       }
     },
+    "filename-reserved-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz",
+      "integrity": "sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q="
+    },
+    "filenamify": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-1.2.1.tgz",
+      "integrity": "sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=",
+      "requires": {
+        "filename-reserved-regex": "^1.0.0",
+        "strip-outer": "^1.0.0",
+        "trim-repeated": "^1.0.0"
+      }
+    },
+    "filenamify-url": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/filenamify-url/-/filenamify-url-1.0.0.tgz",
+      "integrity": "sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A=",
+      "requires": {
+        "filenamify": "^1.0.0",
+        "humanize-url": "^1.0.0"
+      }
+    },
     "filesize": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
@@ -7206,6 +7235,106 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "gh-pages": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.1.0.tgz",
+      "integrity": "sha512-3b1rly9kuf3/dXsT8+ZxP0UhNLOo1CItj+3e31yUVcaph/yDsJ9RzD7JOw5o5zpBTJVQLlJAASNkUfepi9fe2w==",
+      "requires": {
+        "async": "^2.6.1",
+        "commander": "^2.18.0",
+        "email-addresses": "^3.0.1",
+        "filenamify-url": "^1.0.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": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+          "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=="
+        },
+        "find-cache-dir": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
+          "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==",
+          "requires": {
+            "commondir": "^1.0.1",
+            "make-dir": "^3.0.2",
+            "pkg-dir": "^4.1.0"
+          }
+        },
+        "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": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+          "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": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        },
+        "make-dir": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+          "requires": {
+            "semver": "^6.0.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        },
+        "pkg-dir": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+          "requires": {
+            "find-up": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        },
+        "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.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -7788,6 +7917,15 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw=="
     },
+    "humanize-url": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/humanize-url/-/humanize-url-1.0.1.tgz",
+      "integrity": "sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8=",
+      "requires": {
+        "normalize-url": "^1.0.0",
+        "strip-url-auth": "^1.0.0"
+      }
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -15610,6 +15748,19 @@
       "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"
+      }
+    },
+    "strip-url-auth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-url-auth/-/strip-url-auth-1.0.1.tgz",
+      "integrity": "sha1-IrD6OkE4WzO+PzMVUbu4N/oM164="
+    },
     "style-loader": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.3.0.tgz",
@@ -16052,6 +16203,14 @@
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
       "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM="
     },
+    "trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
     "true-case-path": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
diff --git a/package.json b/package.json
index cbf10d4..3bf6b0b 100644
--- a/package.json
+++ b/package.json
@@ -24,13 +24,16 @@
     "react-scripts": "4.0.1",
     "typescript": "^4.1.3",
     "web-vitals": "^0.2.4",
-    "axios": "^0.21.1"
+    "axios": "^0.21.1",
+    "gh-pages": "^3.1.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d src"
   },
   "eslintConfig": {
     "extends": [
@@ -49,5 +52,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "homepage": "https://jakecover.me"
 }
diff --git a/src/components/ProjectGrid.scss b/src/components/ProjectGrid.scss
index fd822a2..f54645c 100644
--- a/src/components/ProjectGrid.scss
+++ b/src/components/ProjectGrid.scss
@@ -83,7 +83,7 @@ $breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-lar
       width: 19.9%;
     }
     .FourByOne {
-      width: 58.5%;
+      width: 59.5%;
       max-width: 900px;
     }
   }
diff --git a/src/imports.scss b/src/imports.scss
index 7ac696d..66e2954 100644
--- a/src/imports.scss
+++ b/src/imports.scss
@@ -1,2 +1,2 @@
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Montserrat:wght@400;600;700&display=swap');
+@import url(https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Montserrat:wght@400;600;700&display=swap);