cobular
/
PersonalWebsite_Static
mirror of https://github.com/JakeCover/PersonalWebsite_Static
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added hover and changed background

Browse Source
replace/cd46b41cb73c17e54f3600a28062779baa0ceddc
Cobular 4 years ago
parent 53b1d5a3e5
commit 7bb233dc3e
3 changed files with 114 additions and 145 deletions
Show Stats Download Patch File Download Diff File

7
src/components/ProjectGrid.scss
Unescape Escape View File

@ -162,18 +162,19 @@ $breakpoints: (x-small: 520px, small: 760px, medium: 1100px, large: 1400px, x-la
border-style: solid; border-style: solid;
background: var(--grid-element-background); background: var(--grid-element-background);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 2px var(--grid-element-shadow);
transition: box-shadow 0.3s ease-in-out; transition: box-shadow 0.2s ease-in-out;
} }
.GridElementInternal:hover { .GridElementInternal:hover {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 5px var(--grid-element-shadow);
} }
h2 { h2 {
font-family: "Fira Code", monospace; font-family: "Fira Code", monospace;
font-weight: 400; font-weight: 400;
margin-bottom: 0px; margin-bottom: 0px;
text-shadow: 0px 0px 1px var(--grid-element-header);
color: var(--grid-element-header); color: var(--grid-element-header);
line-height: normal; line-height: normal;
} }

115
src/components/ProjectGrid.tsx
Unescape Escape View File

@ -21,7 +21,6 @@ import Hashicorp from "../images/HashiCorp_Logo_no_text.png";
import Bennu from "../images/bennu.gif"; import Bennu from "../images/bennu.gif";
import KatSite from "../images/kat-site.png"; import KatSite from "../images/kat-site.png";
type GridElementImageProps = { type GridElementImageProps = {
image_url: string; image_url: string;
image_alt: string; image_alt: string;
@ -55,13 +54,13 @@ function SmallElement({ title, text, link, org }: GridElementProps) {
); );
} }
return ( return (
<div className={"OneWide GridElement"}>
<a <a
className={"OneWide GridElement Link"} className={"Link GridElementInternal"}
href={link} href={link}
rel={"noreferrer"} rel={"noreferrer"}
target={"_blank"} target={"_blank"}
> >
<div className={"GridElementInternal"}>
<div className={"title"}> <div className={"title"}>
<h2>{title}</h2> <h2>{title}</h2>
{org && <h3>{org}</h3>} {org && <h3>{org}</h3>}
@ -70,8 +69,8 @@ function SmallElement({ title, text, link, org }: GridElementProps) {
<div className={"description"}> <div className={"description"}>
<p>{text}</p> <p>{text}</p>
</div> </div>
</div>
</a> </a>
</div>
); );
} }
@ -101,13 +100,13 @@ function SmallElementPic({
); );
} }
return ( return (
<div className={"OneWide Pic GridElement "}>
<a <a
className={"OneWide Pic GridElement Link"} className={"GridElementInternal Link"}
href={link} href={link}
target={"_blank"} target={"_blank"}
rel={"noreferrer"} rel={"noreferrer"}
> >
<div className={"GridElementInternal"}>
<div className={"image"}> <div className={"image"}>
<img src={image_url} alt={image_alt} /> <img src={image_url} alt={image_alt} />
<LinkOutlined className={"LinkIcon"} /> <LinkOutlined className={"LinkIcon"} />
@ -117,8 +116,8 @@ function SmallElementPic({
{org && <h3>{org}</h3>} {org && <h3>{org}</h3>}
<p>{text}</p> <p>{text}</p>
</div> </div>
</div>
</a> </a>
</div>
); );
} }
@ -193,13 +192,13 @@ function LargeElementPic({
); );
} }
return ( return (
<div className={"FourByOne GridElement"}>
<a <a
className={"FourByOne GridElement Link"} className={"GridElementInternal Link"}
href={link} href={link}
target={"_blank"} target={"_blank"}
rel={"noreferrer"} rel={"noreferrer"}
> >
<div className={"GridElementInternal"}>
<div className={"image"}> <div className={"image"}>
<img src={image_url} alt={image_alt} /> <img src={image_url} alt={image_alt} />
<LinkOutlined className={"LinkIcon"} /> <LinkOutlined className={"LinkIcon"} />
@ -209,8 +208,8 @@ function LargeElementPic({
{org && <h3>{org}</h3>} {org && <h3>{org}</h3>}
<p>{text}</p> <p>{text}</p>
</div> </div>
</div>
</a> </a>
</div>
); );
} }
@ -233,7 +232,7 @@ export function ProjectGrid() {
}); });
return ( return (
<div id={"project-grid-background"} style={{paddingBottom: 20}}> <div id={"project-grid-background"} 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>
@ -247,32 +246,26 @@ export function ProjectGrid() {
<SmallElement <SmallElement
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
extensive featureset with a number of custom moderation and authentication tools and has been used for extensive featureset with a number of custom moderation and authentication tools and has been used for
multiple CodeDay events, impacting well over 1,000 students.` multiple CodeDay events, impacting well over 1,000 students.`}
}
link={"https://github.com/codeday/johnpeter-discord"} link={"https://github.com/codeday/johnpeter-discord"}
/> />
<SmallElement <SmallElement
title={"Distest"} title={"Distest"}
org={"Random Projects"} org={"Random Projects"}
text={ text={`Distest is a testing library I wrote for Discord bots that allows for full integration tests of bots,
`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 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 available for this sort of testing. Unfortunately, this has been deprecated in favor of other, more full
featured libraries.` featured libraries.`}
}
link={"https://github.com/JakeCover/distest"} link={"https://github.com/JakeCover/distest"}
/> />
<SmallElementPic <SmallElementPic
@ -280,119 +273,97 @@ export function ProjectGrid() {
image_alt={"CodeDay San Diego Logo"} image_alt={"CodeDay San Diego Logo"}
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 where I grew to love hackathons and leaned a lot about leadership and event logistics the San Diego event where I grew to love hackathons and leaned a lot about leadership and event logistics
in the process!` in the process!`}
}
link={"https://event.codeday.org/sandiego"} link={"https://event.codeday.org/sandiego"}
/> />
<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 <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"}
/> />
<SmallElement <SmallElement
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 just do simple things for my own use, and many more have been nowadays, others like DiscordChannelMirror just do simple things for my own use, 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!`}
}
/> />
<MediumElement <MediumElement
image_url={Hashicorp} image_url={Hashicorp}
image_alt={"HashiCorp Logo"} image_alt={"HashiCorp Logo"}
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 over 25 services on where it runs almost every service we have, as well as at home, where I use it to run over 25 services on
a cluster of old machines. I strongly recommend it as it's a very easy way utilize old hardware, even when a cluster of old machines. I strongly recommend it as it's a very easy way utilize old hardware, even when
each machine may not be that powerful powerful and not all that complex to get started with at any scale, each machine may not be that powerful powerful and not all that complex to get started with at any scale,
from one personal server to large corporate backends.` from one personal server to large corporate backends.`}
}
/> />
<SmallElement <SmallElement
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"}
/> />
<SmallElement <SmallElement
title={"Nomad Job Templates Tool"} title={"Nomad Job Templates Tool"}
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.`}
}
/> />
<SmallElementPic <SmallElementPic
image_url={KatSite} image_url={KatSite}
image_alt={"Kat's Logo"} image_alt={"Kat's Logo"}
title={"Shushicate"} title={"Shushicate"}
org={"Random Projects"} org={"Random Projects"}
text={ text={`An art gallery website for my friend, made in svelte. The images are optimized and compressed at
`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. 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.` The full resolution image is only sent when selecting an image, keeping the site performant.`}
}
link={"https://www.shushicate.com/"} link={"https://www.shushicate.com/"}
/> />
<SmallElement <SmallElement
title={"OVRTools"} title={"OVRTools"}
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.`}
}
/> />
<MediumElement <MediumElement
image_url={Bennu} image_url={Bennu}
image_alt={"A B logo"} image_alt={"A B logo"}
title={"Bennu"} title={"Bennu"}
org={"Work Experience"} org={"Work Experience"}
text={ text={`Bennu made various engineering management and performance analysis tools for other software companies.
`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 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 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.` closed from beneath me in the middle of the summer of 2021.`}
}
link={"https://www.bennu.io/"} link={"https://www.bennu.io/"}
/> />
<SmallElement <SmallElement
title={"CopyMoji"} title={"CopyMoji"}
org={"BetterDiscord"} org={"BetterDiscord"}
text={ text={`An extension for the alternate discord client BetterDiscord that changes the functionality of copying
`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.`}
emoji to copy the actual emoji characters rather than their names from the discord client.`
}
link={ link={
"https://github.com/JakeCover/BetterDiscordExtensions/tree/main/plugins/CopyMoji" "https://github.com/JakeCover/BetterDiscordExtensions/tree/main/plugins/CopyMoji"
} }
@ -400,16 +371,12 @@ export function ProjectGrid() {
<SmallElement <SmallElement
title={"What's That Number"} title={"What's That Number"}
org={"Random Projects"} org={"Random Projects"}
text={ text={`A service that allows for the reversing of arbitrary decimals back to fractions of irrational numbers.
`A service that allows for the reversing of arbitrary decimals back to fractions of irrational numbers.
Basically, it's able to reverse 3.1415 to π, but more interestingly reverse 0.385694 to √2 * 3 / 11! Basically, it's able to reverse 3.1415 to π, but more interestingly reverse 0.385694 to √2 * 3 / 11!
It can't solve all problems and it isn't mathematically provable or anything, but it's optimized to It can't solve all problems and it isn't mathematically provable or anything, but it's optimized to
give you the right answer for most things you'll actually run into and tell you when you've gotten give you the right answer for most things you'll actually run into and tell you when you've gotten
nothing.` nothing.`}
} link={"https://jakecover.github.io/WhatsThatNumberExtension/"}
link={
"https://jakecover.github.io/WhatsThatNumberExtension/"
}
/> />
</div> </div>
</div> </div>

5
src/vars.scss
Unescape Escape View File

@ -7,11 +7,12 @@
--grid-background: var(--background); --grid-background: var(--background);
--grid-header-background: var(--background); --grid-header-background: var(--background);
--grid-header-text: #F1F1F1; --grid-header-text: #F1F1F1;
--grid-element-background: #354560; --grid-element-background: hsl(218, 24%, 25%);
--grid-element-border: #6f6f6f; --grid-element-border: #6f6f6f;
--grid-element-shadow: rgba(255, 255, 255, 0.3);
--grid-element-header: rgb(169 162 228 / 100%); --grid-element-header: rgb(169 162 228 / 100%);
--chainlink-icon-background: rgba(43, 43, 43, 0.3); --chainlink-icon-background: rgba(43, 43, 43, 0.3);
--link-color: #1890ff; --link-color: var(--grid-element-header);
--grid-element-subheader: darkgrey; --grid-element-subheader: darkgrey;
} }

Write Preview
Loading…
Cancel
Save