Significantly modernized design and fixed colors!

.idea/PersonalWebsite_Static.iml

@@ -13,5 +13,6 @@
     <orderEntry type="library" name="jquery-3.5.0" level="application" />
     <orderEntry type="library" name="masonry-layout" level="application" />
     <orderEntry type="library" name="popper.js" level="application" />
+    <orderEntry type="library" name="umami" level="application" />
   </component>
 </module>

.idea/jsLibraryMappings.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="JavaScriptLibraryMappings">
-    <file url="PROJECT" libraries="{bootstrap, gsap, jquery-3.5.0, masonry-layout, popper.js}" />
+    <file url="PROJECT" libraries="{bootstrap, gsap, jquery-3.5.0, masonry-layout, popper.js, umami}" />
   </component>
 </project>

src/App.tsx

@@ -1,15 +1,11 @@
 import React from "react";
 import "./App.scss";
-import { Footer } from "./components/Footer";
-import { Header } from "./components/Header";
 import { Main } from "./components/Main";
 
 function App() {
   return (
-    <div className="App"  style={{maxWidth: 1823, margin: "auto"}}>
-      <Header />
+    <div className="App">
       <Main />
-      <Footer />
     </div>
   );
 }

src/components/AboutMe/AboutMe.scss

@@ -10,7 +10,7 @@
   }
 
   .about-me-card {
-    background: var(--about-me);
+    //background: var(--about-me);
     border-radius: 5px;
     margin: 0 5px 0;
     padding: 10px;
@@ -18,31 +18,24 @@
   }
 
   #about-me {
-    background: var(--about-me);
+    //background: var(--about-me);
     border-radius: 5px;
     padding: 15px;
     width: fit-content;
 
     #info-parent {
-      display: flex;
-      flex-direction: row;
-
-      #specific-info {
-        flex: 1 1 0;
-      }
-
-      #fun-info {
-        flex: 1 1 0;
-      }
+      display: grid;
+      grid-template-columns: 1fr 1fr;
 
       @media screen and (max-width: 660px) {
-        flex-direction: column;
+        grid-template-columns: 1fr;
       }
     }
 
     h1 {
       font-family: "Fira Code", monospace;
       font-weight: 500;
+      font-size: 46px;
     }
 
     h2 {

src/components/AboutMe/AboutMe.tsx

@@ -30,80 +30,49 @@ export function AboutMe() {
               <li>
                 <b>Location:</b> Southern California
               </li>
+              <Age />
+              <LastFmLi />
+            </ul>
+          </div>
+          <div id={"fun-info"}>
+            <h2>Find Me:</h2>
+            <ul>
               <li>
-                <b>Projects:</b>{" "}
-                <button
-                  onClick={() =>
-                    document.getElementById("project-header")?.scrollIntoView({
-                      behavior: "smooth",
-                      block: "start",
-                    })
-                  }
-                >
-                  Down there
-                </button>
-              </li>
-              <li>
-                <b>Resume:</b> <Link to={"/resume"}>Over here</Link>
+                Email: <button onClick={EmailHandler}>Click This</button>
               </li>
               <li>
-                <b>Find Me:</b>
-                <ul>
-                  <li>
-                    Email: <button onClick={EmailHandler}>Click This</button>
-                  </li>
-                  <li>
-                    Twitter:{" "}
-                    <Tooltip title={":("}>
-                      <a
-                        href={"https://github.com/JakeCover"}
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        @cobular_
-                      </a>
-                    </Tooltip>
-                  </li>
-                  <li>
-                    GitHub:{" "}
-                    <a
+                Twitter:{" "}
+                <Tooltip title={":("}>
+                  <a
                       href={"https://github.com/JakeCover"}
                       target="_blank"
                       rel="noreferrer"
-                    >
-                      JakeCover
-                    </a>
-                  </li>
-                  <li>
-                    Telegram:{" "}
-                    <a
-                      href={"https://t.me/cobular"}
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      @cobular
-                    </a>
-                  </li>
-                  <li>Elsewhere: Probably @cobular</li>
-                </ul>
+                  >
+                    @cobular_
+                  </a>
+                </Tooltip>
               </li>
-            </ul>
-          </div>
-          <div id={"fun-info"}>
-            <h2>I'm:</h2>
-            <ul>
-              <Age />
-              <LastFmLi />
-              <Tooltip
-                title={
-                  "Hey! This part is still a work in progress, check back in a bit to see if it's working!"
-                }
-              >
-                <li>
-                  doing (general stuff - in class, projects, sleeping, games)
-                </li>
-              </Tooltip>
-              <li>rather colorblind</li>
+              <li>
+                GitHub:{" "}
+                <a
+                    href={"https://github.com/JakeCover"}
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                  JakeCover
+                </a>
+              </li>
+              <li>
+                Telegram:{" "}
+                <a
+                    href={"https://t.me/cobular"}
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                  @cobular
+                </a>
+              </li>
+              <li>Elsewhere: Probably @cobular</li>
             </ul>
           </div>
         </div>

src/components/Main.tsx

@@ -6,11 +6,7 @@ import { Resume } from "./Resume";
 export function Main() {
   return (
     <main>
-      <Switch>
-        <Route exact={true} path={"/"} component={Home} />
-        <Route path={"/contact"} component={Contact} />
-        <Route path={"/resume"} component={Resume} />
-      </Switch>
+      <Home />
     </main>
   );
 }

src/components/ProjectGrid.scss

@@ -1,6 +1,6 @@
 @import "~include-media/dist/_include-media.scss";
 
-$breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-large: 1560px);
+$breakpoints: (x-small: 430px, small: 660px, medium: 1000px, large: 1300px, x-large: 1560px, xx-large: 1900px);
 
 // Override Sass min()
 @function min($numbers...) {
@@ -13,9 +13,22 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar
 }
 
 #project-grid-parent {
-  margin: 10px;
   background: var(--grid-background);
   border-radius: 5px;
+  margin: 10px;
+
+  @include media(">=medium")  {
+    width: 90%;
+    margin: auto;
+  }
+
+
+  @include media(">=x-large")  {
+    width: 80%;
+    max-width: 1900px;
+    margin: auto;
+  }
+
 
   & > #project-header {
     background: var(--grid-header-background);
@@ -50,13 +63,13 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar
   //padding: 10px;
 
   @include media("<=x-small") {
-    .GridSizer, .OneWide, .FourByOne .Medium {
+    .GridSizer, .OneWide, .FourByOne, .Medium {
       width: 100%;
     }
   }
 
   @include media(">x-small", "<small") {
-    .GridSizer, .OneWide .Medium {
+    .GridSizer, .OneWide, .Medium {
       width: 49%;
     }
     .FourByOne {
@@ -65,11 +78,11 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar
   }
 
   @include media(">=small", "<medium") {
-    .GridSizer, .OneWide .Medium {
+    .GridSizer, .OneWide, .Medium {
       width: 33%;
     }
     .FourByOne {
-      width: 99%;
+      width: 66%;
     }
   }
 
@@ -100,15 +113,27 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar
     }
   }
 
-  @include media(">=x-large") {
+  @include media(">=x-large", "<xx-large") {
     .GridSizer, .OneWide {
-      width: 300px;
+      width: 20%;
     }
     .Medium {
-      width: 600px;
+      width: 40%;
     }
     .FourByOne {
-      width: 900px;
+      width: 60%;
+    }
+  }
+
+  @include media(">=xx-large") {
+    .GridSizer, .OneWide {
+      width: 16.6%;
+    }
+    .Medium {
+      width: 33%;
+    }
+    .FourByOne {
+      width: 49.8%;
     }
   }
 }
@@ -206,6 +231,7 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar
   @include media(">x-large") {
     .image {
       width: 40%;
+      padding-right: 10px;
     }
   }
 }
@@ -229,11 +255,11 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar
       width: 30ch;
     }
 
-    @include media(">small") {
+    @include media(">medium") {
       flex-direction: row;
 
     }
-    @include media("<=small") {
+    @include media("<=medium") {
       flex-direction: column;
       .description {
         width: 95%;

src/components/ProjectGrid.tsx

@@ -19,6 +19,9 @@ import Foresight from "../images/foresightsports.png";
 import Distest from "../images/distest.svg";
 import Scoresaver from "../images/scoresaver.svg";
 import Hashicorp from "../images/HashiCorp_Logo_no_text.png";
+import Bennu from "../images/bennu.gif";
+import KatSite from "../images/kat-site.png";
+
 
 type GridElementImageProps = {
   image_url: string;
@@ -231,7 +234,7 @@ export function ProjectGrid() {
   });
 
   return (
-    <div>
+    <div style={{paddingBottom: 20}}>
       <div id={"project-grid-parent"}>
         <div id={"project-header"}>
           <h2>&lt;/&gt; My Projects</h2>
@@ -252,6 +255,8 @@ export function ProjectGrid() {
             }
             link={"https://github.com/codeday/labs-elastic-match"}
           />
+
+
           <SmallElement
             title={"John Peter"}
             org={"CodeDay"}
@@ -262,15 +267,15 @@ export function ProjectGrid() {
             link={"https://github.com/codeday/johnpeter-discord"}
           />
           <SmallElement
-            title={"CopyMoji"}
-            org={"BetterDiscord"}
-            text={
-              `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"
-            }
+              title={"Distest"}
+              org={"Random Projects"}
+              text={
+                `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. Unfortunately, this has been deprecated in favor of other, more full
+              featured libraries.`
+              }
+              link={"https://github.com/JakeCover/distest"}
           />
           <SmallElementPic
             image_url={CodeDaySD}
@@ -283,6 +288,18 @@ export function ProjectGrid() {
             }
             link={"https://event.codeday.org/sandiego"}
           />
+          <SmallElementPic
+              image_url={KatSite}
+              image_alt={"Kat's Logo"}
+              title={"Shushicate"}
+              org={"Random Projects"}
+              text={
+                `An art gallery website for my friend, made in svelte. The images are optimized and compressed at 
+                compiletime, creating a few versions and allowing the browser to choose which to display using imageset.
+                 The full resolution image is only sent when selecting an image, keeping the site performant.`
+              }
+              link={"https://www.shushicate.com/"}
+          />
           <LargeElementPic
             image_url={Foresight}
             image_alt={"Foresight Sports Logo"}
@@ -292,25 +309,13 @@ export function ProjectGrid() {
               Unity that took data from their launch monitor technology and translated it into a seamless experience.`
             }
           />
-          <SmallElementPic
-            image_url={Distest}
-            image_alt={"Distest Logo"}
-            title={"Distest"}
-            org={"Random Projects"}
-            text={
-              `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"}
-          />
           <SmallElementPic
             image_url={Scoresaver}
             image_alt={"Scoresaver Logo"}
             title={"ScoreSaver"}
             org={"Random Projects"}
             text={
-              `A Chrome extension to help you download beatsaber songs directly from ScoreSaber. No more searching for 
+              `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"}
@@ -369,6 +374,31 @@ export function ProjectGrid() {
               easily.`
             }
           />
+
+          <SmallElement
+              title={"CopyMoji"}
+              org={"BetterDiscord"}
+              text={
+                `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"
+              }
+          />
+          <MediumElement
+              image_url={Bennu}
+              image_alt={"A B logo"}
+              title={"Bennu"}
+              org={"Work Experience"}
+              text={
+                `Bennu made various engineering management and performance analysis tools for other software companies. 
+                Here, I mainly implemented the crawler for Jira Server, adding a whole new application we could offer to
+                customers. I also worked on internal tooling and optimized our test runtime by 50% before the startup 
+                closed from beneath me in the middle of the summer of 2021.`
+              }
+              link={"https://www.bennu.io/"}
+          />
         </div>
       </div>
     </div>

src/vars.scss

@@ -1,16 +1,16 @@
 :root {
   --text: black;
-  --background: #3767a8;
+  --background: #FDFFFC;
   --header: #84B7DB;
   --footer: var(--header);
-  --about-me: #F1F1F1;
-  --grid-background: #FECEA8;
-  --grid-header-background: #1C1C1c;
-  --grid-header-text: #F1F1F1;
-  --grid-element-background: #F1F1F1;
+  --about-me: #FDFFFC;
+  --grid-background: #E4F5DC;
+  --grid-header-background: #A4ABA1;
+  --grid-header-text: #black;
+  --grid-element-background: #FDFFFC;
   --chainlink-icon-background: rgba(224, 255, 255, 0.7);
- --link-color: #1890ff;
- --grid-element-subheader: darkgrey;
+ --link-color: #9D18DB;
+ --grid-element-subheader: #CAABD9;
 }
 
 //:root {
@@ -24,60 +24,6 @@
 //  --grid-header-text: black;
 //  --grid-element-background: #FFFFFF;
 //  --chainlink-icon-background: rgba(224, 255, 255, 0.7);
-//  --link-color: white;
+//  --link-color: grey;
 //  --grid-element-subheader: #F7A8B8;
 //}
-
-// SASS style sheet */
-// Palette color codes */
-// Palette URL: http://paletton.com/#uid=5320u0k7JRF0n+X3HY4c4I2gzvX */
-
-// Feel free to copy&paste color codes to your application */
-
-
-// As hex codes */
-
-$color-primary-0: #B0E8CF;	// Main Primary color */
-$color-primary-1: #FCFFFE;
-$color-primary-2: #DBF8EB;
-$color-primary-3: #82D0AD;
-$color-primary-4: #55B086;
-
-$color-secondary-1-0: #B1CFE4;	// Main Secondary color (1) */
-$color-secondary-1-1: #FCFEFF;
-$color-secondary-1-2: #DCECF7;
-$color-secondary-1-3: #82ABC9;
-$color-secondary-1-4: #5482A3;
-
-$color-secondary-2-0: #D8F7BB;	// Main Secondary color (2) */
-$color-secondary-2-1: #FDFFFC;
-$color-secondary-2-2: #EDFDDF;
-$color-secondary-2-3: #BFEF95;
-$color-secondary-2-4: #A5E46E;
-
-
-
-// As RGBa codes */
-
-$rgba-primary-0: rgba(176,232,207,1);	// Main Primary color */
-$rgba-primary-1: rgba(252,255,254,1);
-$rgba-primary-2: rgba(219,248,235,1);
-$rgba-primary-3: rgba(130,208,173,1);
-$rgba-primary-4: rgba( 85,176,134,1);
-
-$rgba-secondary-1-0: rgba(177,207,228,1);	// Main Secondary color (1) */
-$rgba-secondary-1-1: rgba(252,254,255,1);
-$rgba-secondary-1-2: rgba(220,236,247,1);
-$rgba-secondary-1-3: rgba(130,171,201,1);
-$rgba-secondary-1-4: rgba( 84,130,163,1);
-
-$rgba-secondary-2-0: rgba(216,247,187,1);	// Main Secondary color (2) */
-$rgba-secondary-2-1: rgba(253,255,252,1);
-$rgba-secondary-2-2: rgba(237,253,223,1);
-$rgba-secondary-2-3: rgba(191,239,149,1);
-$rgba-secondary-2-4: rgba(165,228,110,1);
-
-
-
-// Generated by Paletton.com © 2002-2014 */
-// http://paletton.com */