Significantly modernized design and fixed colors!

replace/b66c32a1bf58c45037a57a4bc643c93543ae72e7
Cobular 4 years ago
parent 983e632b44
commit 6e96aa7832

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

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="JavaScriptLibraryMappings"> <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> </component>
</project> </project>

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

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

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

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

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

@ -19,6 +19,9 @@ import Foresight from "../images/foresightsports.png";
import Distest from "../images/distest.svg"; import Distest from "../images/distest.svg";
import Scoresaver from "../images/scoresaver.svg"; import Scoresaver from "../images/scoresaver.svg";
import Hashicorp from "../images/HashiCorp_Logo_no_text.png"; import Hashicorp from "../images/HashiCorp_Logo_no_text.png";
import Bennu from "../images/bennu.gif";
import KatSite from "../images/kat-site.png";
type GridElementImageProps = { type GridElementImageProps = {
image_url: string; image_url: string;
@ -231,7 +234,7 @@ export function ProjectGrid() {
}); });
return ( return (
<div> <div style={{paddingBottom: 20}}>
<div id={"project-grid-parent"}> <div id={"project-grid-parent"}>
<div id={"project-header"}> <div id={"project-header"}>
<h2>&lt;/&gt; My Projects</h2> <h2>&lt;/&gt; My Projects</h2>
@ -246,31 +249,33 @@ export function ProjectGrid() {
title={"ElaticMatch"} title={"ElaticMatch"}
org={"CodeDay"} org={"CodeDay"}
text={ text={
`A set of tools, including a custom suggestion and weighting system, as well as a custom matching `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 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.` Labs summer internship program in 2020.`
} }
link={"https://github.com/codeday/labs-elastic-match"} link={"https://github.com/codeday/labs-elastic-match"}
/> />
<SmallElement <SmallElement
title={"John Peter"} title={"John Peter"}
org={"CodeDay"} org={"CodeDay"}
text={ text={
`John Peter is a Discord bot used for moderation and server management for Virtual CodeDay. It has a very `John Peter is a Discord bot used for moderation and server management for Virtual CodeDay. It has a very
xtensive featureset, and has been used for multiple CodeDays and has worked with over 1000 students.` xtensive featureset, and has been used for multiple CodeDays and has worked with over 1000 students.`
} }
link={"https://github.com/codeday/johnpeter-discord"} link={"https://github.com/codeday/johnpeter-discord"}
/> />
<SmallElement <SmallElement
title={"CopyMoji"} title={"Distest"}
org={"BetterDiscord"} org={"Random Projects"}
text={ text={
`An extension for the alternate discord client BetterDiscord that changes the functionality of copying `Distest is a testing library I wrote for Discord bots that allows for full integration tests of bots,
emoji to copy the actual emoji characters rather than their names from the discord client.` 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
link={ featured libraries.`
"https://github.com/JakeCover/BetterDiscordExtensions/tree/main/plugins/CopyMoji" }
} link={"https://github.com/JakeCover/distest"}
/> />
<SmallElementPic <SmallElementPic
image_url={CodeDaySD} image_url={CodeDaySD}
@ -278,39 +283,39 @@ export function ProjectGrid() {
org={"CodeDay"} org={"CodeDay"}
title={"CodeDay San Diego"} title={"CodeDay San Diego"}
text={ text={
`A 24 hour hackathon occurring around the world a few times a year. I volunteered for and then later ran `A 24 hour hackathon occurring around the world a few times a year. I volunteered for and then later ran
the San Diego event.` the San Diego event.`
} }
link={"https://event.codeday.org/sandiego"} 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 <LargeElementPic
image_url={Foresight} image_url={Foresight}
image_alt={"Foresight Sports Logo"} image_alt={"Foresight Sports Logo"}
title={"Foresight Sports"} title={"Foresight Sports"}
text={ text={
`Foresight Sports creates advanced augmented reality sports experiences. I created multiple games using `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.` 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 <SmallElementPic
image_url={Scoresaver} image_url={Scoresaver}
image_alt={"Scoresaver Logo"} image_alt={"Scoresaver Logo"}
title={"ScoreSaver"} title={"ScoreSaver"}
org={"Random Projects"} org={"Random Projects"}
text={ 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!` mapper names on BeatSaver, just download the newest ranked songs directly!`
} }
link={"https://github.com/JakeCover/ScoreSaverExtention"} link={"https://github.com/JakeCover/ScoreSaverExtention"}
@ -322,9 +327,9 @@ export function ProjectGrid() {
title={"Hashicorp Stack Sysadmin"} title={"Hashicorp Stack Sysadmin"}
org={"CodeDay, Random Projects"} org={"CodeDay, Random Projects"}
text={ text={
`I've setup and used a stack consisting of Nomad, Consul, and Vault along with Traefik both at CodeDay, `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 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 assorted services on a few old machines. I strongly recommend it, it's very powerful and not all that
complex to get started with at any scale, from one personal server to large corporate backends.` complex to get started with at any scale, from one personal server to large corporate backends.`
} }
/> />
@ -332,7 +337,7 @@ export function ProjectGrid() {
title={"Personal Website"} title={"Personal Website"}
org={"Random Projects"} org={"Random Projects"}
text={ text={
`You're looking at it! There's not a whole lot to this, it's just a React site hosted on GitHub Pages, `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.` but I didn't know React before starting on this so I'm pretty proud of it.`
} }
link={"https://github.com/JakeCover/PersonalWebsite_Static"} link={"https://github.com/JakeCover/PersonalWebsite_Static"}
@ -342,8 +347,8 @@ export function ProjectGrid() {
link={"https://github.com/JakeCover/NomadJobTemplatesTool"} link={"https://github.com/JakeCover/NomadJobTemplatesTool"}
org={"Random Projects"} org={"Random Projects"}
text={ text={
`A little custom tool to allow you to use jinga-esque text substitutions in Nomad jobfiles to help `A little custom tool to allow you to use jinga-esque text substitutions in Nomad jobfiles to help
centralize the definition of service traefik tags. This mainly makes it easier to update and change centralize the definition of service traefik tags. This mainly makes it easier to update and change
networking configuration across many jobs easily.` networking configuration across many jobs easily.`
} }
/> />
@ -351,9 +356,9 @@ export function ProjectGrid() {
title={"Assorted Discord Bots"} title={"Assorted Discord Bots"}
org={"Random Projects"} org={"Random Projects"}
text={ text={
`I've made quite a number of discord bots over time! Some of them, like ReplyBot, which added a reply `I've made quite a number of discord bots over time! Some of them, like ReplyBot, which added a reply
functionality to Discord years before they finally implemented it first-party, have been obsoleted functionality to Discord years before they finally implemented it first-party, have been obsoleted
nowadays, others like DiscordChannelMirror really aren't significantly notable, and many more have been nowadays, others like DiscordChannelMirror really aren't significantly notable, and many more have been
lost to time and past me's lack of understanding of the importance of backup. I digress, however I really lost to time and past me's lack of understanding of the importance of backup. I digress, however I really
do love writing these sorts of applications!` do love writing these sorts of applications!`
} }
@ -363,12 +368,37 @@ export function ProjectGrid() {
org={"Random Projects"} org={"Random Projects"}
link={"https://github.com/OVRTools"} link={"https://github.com/OVRTools"}
text={ text={
`This one's a bit more work in progress than some of the others here. It is a set of tools to help people `This one's a bit more work in progress than some of the others here. It is a set of tools to help people
develop OpenVR plugins more easily and independently from Unity. It will eventually grow to include develop OpenVR plugins more easily and independently from Unity. It will eventually grow to include
multiple additional input methods and other tools to allow users to interact with other OVR plugins more multiple additional input methods and other tools to allow users to interact with other OVR plugins more
easily.` 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> </div>
</div> </div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

@ -1,16 +1,16 @@
:root { :root {
--text: black; --text: black;
--background: #3767a8; --background: #FDFFFC;
--header: #84B7DB; --header: #84B7DB;
--footer: var(--header); --footer: var(--header);
--about-me: #F1F1F1; --about-me: #FDFFFC;
--grid-background: #FECEA8; --grid-background: #E4F5DC;
--grid-header-background: #1C1C1c; --grid-header-background: #A4ABA1;
--grid-header-text: #F1F1F1; --grid-header-text: #black;
--grid-element-background: #F1F1F1; --grid-element-background: #FDFFFC;
--chainlink-icon-background: rgba(224, 255, 255, 0.7); --chainlink-icon-background: rgba(224, 255, 255, 0.7);
--link-color: #1890ff; --link-color: #9D18DB;
--grid-element-subheader: darkgrey; --grid-element-subheader: #CAABD9;
} }
//:root { //:root {
@ -24,60 +24,6 @@
// --grid-header-text: black; // --grid-header-text: black;
// --grid-element-background: #FFFFFF; // --grid-element-background: #FFFFFF;
// --chainlink-icon-background: rgba(224, 255, 255, 0.7); // --chainlink-icon-background: rgba(224, 255, 255, 0.7);
// --link-color: white; // --link-color: grey;
// --grid-element-subheader: #F7A8B8; // --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 */

Loading…
Cancel
Save