Even better now!

Old/index.html

@@ -48,7 +48,7 @@
         <div class="row">
             <div class="col-xl-3 col-lg-4 col-sm-6 tall top_buffer">
                 <div class="image">
-                    <img class="img-fluid" src="images/codedaysd.png" alt="CodeDay SD Logo">
+                    <img class="img-fluid" src="../src/images/codedaysd.png" alt="CodeDay SD Logo">
                 </div>
                 <div class="description">
                     <p>CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges
@@ -58,7 +58,7 @@
             </div>
             <div class="col-xl-3 col-md-4 col-sm-6 tall top_buffer">
                 <div class="image">
-                    <img class="img-fluid" src="images/codeday-notext-color.svg" alt="Redish Heart, SRND Logo">
+                    <img class="img-fluid" src="../src/images/codeday-notext-color.svg" alt="Redish Heart, SRND Logo">
                 </div>
                 <div class="description">
                     <p>SRND is an educational nonprofit that works to provide CS education to high school and
@@ -68,7 +68,7 @@
             </div>
             <div class="col-xl-3 col-md-4 col-sm-6 tall top_buffer">
                 <div class="image">
-                    <img class="img-fluid" src="images/distest.svg" alt="Distest Logo">
+                    <img class="img-fluid" src="../src/images/distest.svg" alt="Distest Logo">
                 </div>
                 <div class="description">
                     <p>Distest is a testing library for Discord bots that allows for full integration tests of your bot,
@@ -77,7 +77,7 @@
             </div>
             <div class="col-xl-3 col-md-4 col-sm-6 tall top_buffer">
                 <div class="image">
-                    <img class="img-fluid" src="images/scoresaver.svg" alt="Red to Blue Gradient w/ White Download Icon">
+                    <img class="img-fluid" src="../src/images/scoresaver.svg" alt="Red to Blue Gradient w/ White Download Icon">
                 </div>
                 <div class="description">
                     <p>A Chrome extension to help you download beatsaber songs directly from ScoreSaber. No more searching
@@ -86,7 +86,7 @@
             </div>
             <div class="col-xs-12 wide top_buffer">
                 <div class="image">
-                    <img class="img-fluid" src="images/foresightsports.png" alt="ForeSight Sports Logo0">
+                    <img class="img-fluid" src="../src/images/foresightsports.png" alt="ForeSight Sports Logo0">
                 </div>
                 <div class="description">
                     <p>Foresight Sports creates advanced augmented reality sports experiences. I created multiple games

package-lock.json

@@ -1211,6 +1211,35 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.32",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
+      "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.32",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz",
+      "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
+      "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+      "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",

package.json

@@ -3,26 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.3.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.6.0",
     "@types/jest": "^26.0.19",
+    "@types/masonry-layout": "^4.2.2",
     "@types/node": "^12.19.11",
     "@types/react": "^16.14.2",
     "@types/react-dom": "^16.9.10",
     "@types/react-router-dom": "^5.1.7",
-    "@types/masonry-layout": "^4.2.2",
     "antd": "^4.9.4",
-    "react-router-dom": "^5.2.0",
+    "include-media": "^1.4.9",
+    "masonry-layout": "^4.2.2",
     "node-sass": "^4.14.1",
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
-    "include-media": "^1.4.9",
     "typescript": "^4.1.3",
-    "web-vitals": "^0.2.4",
-    "masonry-layout": "^4.2.2"
+    "web-vitals": "^0.2.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import "./App.scss";
+import { Footer } from "./components/Footer";
 import { Header } from "./components/Header";
 import { Main } from "./components/Main";
 
@@ -8,6 +9,7 @@ function App() {
     <div className="App">
       <Header />
       <Main />
+      <Footer />
     </div>
   );
 }

src/components/Footer.scss

@@ -0,0 +1,37 @@
+.site-footer {
+  background: darkgrey;
+  margin: 10px;
+  border-radius: 5px;
+
+  h2 {
+    font-family: "Fira Code", monospace;
+    margin: 0;
+  }
+
+  p {
+    font-family: "Montserrat", sans-serif;
+  }
+}
+
+.footer-grid {
+  display: flex;
+  justify-content: space-evenly;
+
+  .footer-links {
+    padding-left: 0;
+    margin: 0;
+
+    columns: 100px 2;
+
+    li {
+      list-style: none;
+    }
+
+    a {
+      //color: black;
+      font-family: "Montserrat", sans-serif;
+      text-decoration: underline;
+    }
+  }
+
+}

src/components/Footer.tsx

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

src/components/Header.scss

@@ -1,15 +1,6 @@
 header {
   display: flex;
   flex-direction: row;
-  align-content: center;
-
-  :nth-child(2) {
-    margin-left: auto;
-  }
-
-  h2:last-of-type {
-    margin-right: 5px;
-  }
 
   margin: 10px;
   padding: 10px;
@@ -22,7 +13,54 @@ header {
     margin: 0 0 0 5px;
   }
 
+  .headerLinks {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    margin-left: auto;
+
+    h2 {
+      margin: 0;
+      border-radius: 5px;
+
+      &:hover {
+        background: #ddd;
+      }
+
+      &.active {
+        background-color: #4CAF50;
+        color: white;
+      }
+    }
+
+    h2:last-of-type {
+      margin-right: 5px;
+    }
+
+
+    /* Hide the link that should open and close the topnav on small screens */
+    .icon {
+      display: none;
+    }
+
+    @media screen and (max-width: 660px) {
       h2 {
-    margin: 0
+        display: none;
+      }
+
+      .icon {
+        margin-left: auto;
+        display: block;
+      }
+    }
+  }
+
+  @media screen and (max-width: 660px) {
+    &.responsive {
+      background: #282c34;
+      h2 {
+        display: block;
+      }
+    }
   }
 }

src/components/Header.tsx

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

src/components/Home.tsx

@@ -6,7 +6,8 @@ export const Home = () => {
         <div id={"home"}>
             <div id={"about-me"}>
                 <p>
-                    Hi! I'm Julie, a CS student from the west coast! Take a look at some of my projects below!
+                    Hi! I'm Jake, a CS student from the west coast! Take a look at some of my projects below! <br/>
+                    This site is still under construction, so pardon the duplicate information and the horrendous colors. The final version should be up soon!
                 </p>
             </div>
             <ProjectGrid/>

src/components/ProjectGrid.scss

@@ -20,13 +20,13 @@ $breakpoints: (x-small: 320px, small: 660px, medium: 900px, large: 1300px, x-lar
   //padding: 10px;
 
   @include media("<=x-small") {
-    .GridSizer, .OneByOne, .FourByOne {
+    .GridSizer, .OneWide, .FourByOne {
       width: 100%;
     }
   }
 
   @include media(">x-small", "<small") {
-    .GridSizer, .OneByOne {
+    .GridSizer, .OneWide {
       width: 49%;
     }
     .FourByOne {
@@ -35,7 +35,7 @@ $breakpoints: (x-small: 320px, small: 660px, medium: 900px, large: 1300px, x-lar
   }
 
   @include media(">=small", "<medium") {
-    .GridSizer, .OneByOne {
+    .GridSizer, .OneWide {
       width: 32%;
     }
     .FourByOne {
@@ -44,7 +44,7 @@ $breakpoints: (x-small: 320px, small: 660px, medium: 900px, large: 1300px, x-lar
   }
 
   @include media(">=medium", "<large") {
-    .GridSizer, .OneByOne {
+    .GridSizer, .OneWide {
       width: 24.5%;
     }
     .FourByOne {
@@ -53,48 +53,77 @@ $breakpoints: (x-small: 320px, small: 660px, medium: 900px, large: 1300px, x-lar
   }
 
   @include media(">=large", "<x-large") {
-    .GridSizer, .OneByOne {
+    .GridSizer, .OneWide {
       max-width: 300px;
       width: 19.5%;
     }
     .FourByOne {
-      width: 79.5%;
-      max-width: 1200px;
+      width: 58.5%;
+      max-width: 900px;
     }
   }
 
   @include media(">=x-large") {
-    .GridSizer, .OneByOne {
+    .GridSizer, .OneWide {
       width: 300px;
     }
     .FourByOne {
-      width: 1200px;
+      width: 900px;
     }
   }
+}
+
+.GridElement {
+  padding: 5px;
 
+  .GridElementInternal {
+    padding: 9px;
+    border-radius: 5px;
+    background: lightcyan;
 
+    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+    transition: box-shadow 0.3s ease-in-out;
   }
 
-.OneByOne {
-  display: flex;
-  flex-direction: column;
-  width: available;
+  .GridElementInternal:hover {
+    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+  }
 
-  padding: 10px;
+  h2 {
+    font-family: "Fira Code", monospace;
+    font-weight: 400;
+    margin-bottom: 0px;
+    line-height: normal;
+  }
 
-  img {
-    width: 100%;
+  h3 {
+    line-height: normal;
+    color: darkgrey;
+    margin-bottom: 3px;
   }
 
   p {
+    font-family: "Montserrat", sans-serif;
+    color: black;
+    margin-bottom: 0;
+  }
+}
+
+.OneWide {
+  display: flex;
+  flex-direction: column;
+  width: available;
 
+  img {
+    width: 100%;
+    margin-bottom: 5px;
   }
 }
 
 .FourByOne {
-  grid-column: span 2;
+  .GridElementInternal {
     display: flex;
-  flex-direction: row;
+    align-items: center;
 
     .image {
       flex: 1;
@@ -105,8 +134,31 @@ $breakpoints: (x-small: 320px, small: 660px, medium: 900px, large: 1300px, x-lar
       }
     }
 
-  p {
+    .description {
       min-width: 20ch;
       width: 30ch;
     }
+
+    @include media(">small") {
+      flex-direction: row;
+
+    }
+    @include media("<=small") {
+      flex-direction: column;
+      .description {
+        width: 95%;
+      }
+    }
+  }
+}
+
+.LinkIcon {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  font-size: 24px;
+  color: black;
+
+  background: rgba(224,255,255, 0.7);
+  border-radius: 5px;
 }

src/components/ProjectGrid.tsx

@@ -1,31 +1,68 @@
+/**
+ * TODO:
+ *  - For things that can't be linked, use <ExpandAltOutlined /> to signal that clicking will open a modal https://ant.design/components/modal/
+ *     in order to give a more complex writeup and some pictures
+ *  - Tooltip for modal and linkable items, possibly <QuestionCircleOutlined /> which displays a modal with an example card with tooltips or explanations
+ *  - Footer
+ *  - Responsive top bar
+ *
+ */
+
 import "./ProjectGrid.scss";
 import Masonry from "masonry-layout";
 import { useEffect } from "react";
+import {LinkOutlined} from "@ant-design/icons";
+import CodeDaySD from "../images/SanDiego.svg";
+import Foresight from "../images/foresightsports.png";
+import Distest from "../images/distest.svg";
+import Scoresaver from "../images/scoresaver.svg";
+
 
 type GridElementImageProps = {
   image_url: string;
   image_alt: string;
   title: string;
   text: string;
+  link?: string;
+  org?: string;
 };
 
 type GridElementProps = {
-    image_url: string;
-    image_alt: string;
   title: string;
   text: string;
+  link?: string;
+  org?: string;
 };
 
-const OneWide = ({title, text}: GridElementProps) => {
+const OneWide = ({ title, text, link, org }: GridElementProps) => {
+  if (link === undefined) {
     return (
-        <div className={"OneByOne GridElement"}>
+      <div className={"OneWide GridElement"}>
+        <div className={"GridElementInternal"}>
           <div className={"title"}>
             <h2>{title}</h2>
+            {org && <h3>{org}</h3>}
           </div>
           <div className={"description"}>
             <p>{text}</p>
           </div>
         </div>
+      </div>
+    );
+  }
+  return (
+    <a className={"OneWide GridElement Link"} href={link} rel={"noreferrer"} target={"_blank"}>
+      <div className={"GridElementInternal"}>
+        <div className={"title"}>
+          <h2>{title}</h2>
+          {org && <h3>{org}</h3>}
+          <LinkOutlined className={"LinkIcon"}/>
+        </div>
+        <div className={"description"}>
+          <p>{text}</p>
+        </div>
+      </div>
+    </a>
   );
 };
 
@@ -34,17 +71,40 @@ const OneWidePic = ({
   image_alt,
   title,
   text,
+  link,
+  org,
 }: GridElementImageProps) => {
+  if (link === undefined) {
+    return (
+      <div className={"OneWide Pic GridElement"}>
+        <div className={"GridElementInternal"}>
+          <div className={"image"}>
+            <img src={image_url} alt={image_alt} />
+          </div>
+          <div className={"description"}>
+            <h2>{title}</h2>
+            {org && <h3>{org}</h3>}
+
+            <p>{text}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
   return (
-        <div className={"OneByOne GridElement"}>
+    <a className={"OneWide Pic GridElement Link"} href={link} target={"_blank"} rel={"noreferrer"}>
+      <div className={"GridElementInternal"}>
         <div className={"image"}>
           <img src={image_url} alt={image_alt} />
+          <LinkOutlined className={"LinkIcon"}/>
         </div>
         <div className={"description"}>
           <h2>{title}</h2>
+          {org && <h3>{org}</h3>}
           <p>{text}</p>
         </div>
       </div>
+    </a>
   );
 };
 
@@ -53,18 +113,39 @@ const FourByOneGridElement = ({
   image_alt,
   title,
   text,
+  link,
+  org,
 }: GridElementImageProps) => {
+  if (link === undefined) {
     return (
       <div className={"FourByOne GridElement"}>
+        <div className={"GridElementInternal"}>
           <div className={"image"}>
             <img src={image_url} alt={image_alt} />
           </div>
           <div className={"description"}>
             <h2>{title}</h2>
-
+            {org && <h3>{org}</h3>}
             <p>{text}</p>
           </div>
         </div>
+      </div>
+    );
+  }
+  return (
+    <a className={"FourByOne GridElement Link"} href={link} target={"_blank"} rel={"noreferrer"}>
+      <div className={"GridElementInternal"}>
+        <div className={"image"}>
+          <img src={image_url} alt={image_alt} />
+          <LinkOutlined className={"LinkIcon"}/>
+        </div>
+        <div className={"description"}>
+          <h2>{title}</h2>
+          {org && <h3>{org}</h3>}
+          <p>{text}</p>
+        </div>
+      </div>
+    </a>
   );
 };
 
@@ -75,7 +156,7 @@ export const ProjectGrid = () => {
     // @ts-ignore
     var msnry = new Masonry(elem, {
       itemSelector: ".GridElement",
-            gutter: 5,
+      gutter: 0,
       columnWidth: ".GridSizer",
       percentPosition: true,
     });
@@ -85,40 +166,40 @@ export const ProjectGrid = () => {
     <div id={"project-grid-parent"}>
       <div id={"project-grid"}>
         <div className={"GridSizer"} />
-                <OneWidePic
-                    image_url={"http://jakecover.me/images/codedaysd.png"}
-                    image_alt={"CodeDay San Diego Logo"}
-                    title={"CodeDay"}
-                    text={
-                        "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."
-                    }
+        <OneWide
+          title={"ElaticMatch"}
+          org={"CodeDay"}
+          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."}
+          link={"https://github.com/codeday/labs-elastic-match"}
         />
-                <OneWidePic
-                    image_url={"http://jakecover.me/images/codedaysd.png"}
-                    image_alt={"CodeDay San Diego Logo"}
-                    title={"CodeDay"}
+        <OneWide
+          title={"John Peter"}
+          org={"CodeDay"}
           text={
-                        "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."
+            "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."
           }
+          link={"https://github.com/codeday/johnpeter-discord"}
         />
-                <OneWidePic
-                    image_url={"http://jakecover.me/images/codedaysd.png"}
-                    image_alt={"CodeDay San Diego Logo"}
-                    title={"CodeDay"}
+        <OneWide
+          title={"CopyMoji"}
+          org={"BetterDiscord"}
           text={
-                        "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."
+            "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."
           }
+          link={"https://github.com/JakeCover/BetterDiscordExtensions/tree/main/plugins/CopyMoji"}
         />
         <OneWidePic
-                    image_url={"http://jakecover.me/images/codedaysd.png"}
+          image_url={CodeDaySD}
           image_alt={"CodeDay San Diego Logo"}
-                    title={"CodeDay"}
+          org={"CodeDay"}
+          title={"CodeDay San Diego"}
           text={
-                        "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."
+            "A 24 hour hackathon occurring around the world a few times a year. I volunteered for and then later ran the San Diego event."
           }
+          link={"https://event.codeday.org/sandiego"}
         />
         <FourByOneGridElement
-                    image_url={"http://jakecover.me/images/foresightsports.png"}
+          image_url={Foresight}
           image_alt={"Foresight Sports Logo"}
           title={"Foresight Sports"}
           text={
@@ -126,29 +207,32 @@ export const ProjectGrid = () => {
           }
         />
         <OneWidePic
-                    image_url={"http://jakecover.me/images/codedaysd.png"}
-                    image_alt={"CodeDay San Diego Logo"}
-                    title={"CodeDay"}
+          image_url={Distest}
+          image_alt={"Distest Logo"}
+          title={"Distest"}
+          org={"Random Projects"}
           text={
-                        "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."
+            "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."
           }
+          link={"https://github.com/JakeCover/distest"}
         />
-
         <OneWidePic
-                    image_url={"http://jakecover.me/images/codedaysd.png"}
-                    image_alt={"CodeDay San Diego Logo"}
-                    title={"CodeDay"}
+          image_url={Scoresaver}
+          image_alt={"Scoresaver Logo"}
+          title={"ScoreSaver"}
+          org={"Random Projects"}
           text={
-                        "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."
+            "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!"
           }
+          link={"https://github.com/JakeCover/ScoreSaverExtention"}
         />
-                <OneWidePic
-                    image_url={"http://jakecover.me/images/codedaysd.png"}
-                    image_alt={"CodeDay San Diego Logo"}
-                    title={"CodeDay"}
+        <OneWide
+          title={"Personal Website"}
+          org={"Random Projects"}
           text={
-                        "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."
+            "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."
           }
+          link={"https://github.com/JakeCover/PersonalWebsite_Static"}
         />
         <OneWidePic
           image_url={"http://jakecover.me/images/codedaysd.png"}