Even better now!
Cobular
5 years ago
parent
5ce52976f3
commit
75427aec2a
File diff suppressed because one or more lines are too long
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,32 +1,51 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import "./Header.scss";
|
import "./Header.scss";
|
||||||
import {Button, Space, Typography} from "antd";
|
import { Space } from "antd";
|
||||||
import {Link} from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
|
import {MenuOutlined} from "@ant-design/icons";
|
||||||
|
|
||||||
const {Title} = Typography;
|
|
||||||
|
|
||||||
export const Header = () => {
|
export const Header = () => {
|
||||||
return (
|
function showHideHamburger() {
|
||||||
<header>
|
var x = document.getElementById("myHeader");
|
||||||
<Link to="/" className="navbar-brand">
|
// @ts-ignore
|
||||||
<h1>Jake Cover</h1>
|
if (x.className === "header") {
|
||||||
</Link>
|
// @ts-ignore
|
||||||
|
x.className += " responsive";
|
||||||
|
} else {
|
||||||
|
// @ts-ignore
|
||||||
|
x.className = "header";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
<Space>
|
return (
|
||||||
<Link className="nav-link" to="/">
|
<header className={"header"} id={"myHeader"}>
|
||||||
<h2>Home</h2>
|
<Link to="/" className="navbar-brand">
|
||||||
</Link>
|
<h1>Jake Cover</h1>
|
||||||
|
</Link>
|
||||||
|
|
||||||
<Link className="nav-link" to="/contact">
|
<Space className={"headerLinks"}>
|
||||||
<h2>Contact</h2>
|
<Link className="nav-link" to="/">
|
||||||
</Link>
|
<h2>Home</h2>
|
||||||
<Link className="nav-link" to="/resume">
|
</Link>
|
||||||
<h2>Resume</h2>
|
|
||||||
</Link>
|
<Link className="nav-link" to="/contact">
|
||||||
<a className="nav-link" href="https://github.com/JakeCover">
|
<h2>Contact</h2>
|
||||||
<h2>GitHub</h2>
|
</Link>
|
||||||
</a>
|
<Link className="nav-link" to="/resume">
|
||||||
</Space>
|
<h2>Resume</h2>
|
||||||
</header>
|
</Link>
|
||||||
);
|
<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>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,172 +1,256 @@
|
|||||||
|
/**
|
||||||
|
* 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 "./ProjectGrid.scss";
|
||||||
import Masonry from "masonry-layout";
|
import Masonry from "masonry-layout";
|
||||||
import {useEffect} from "react";
|
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 = {
|
type GridElementImageProps = {
|
||||||
image_url: string;
|
image_url: string;
|
||||||
image_alt: string;
|
image_alt: string;
|
||||||
title: string;
|
title: string;
|
||||||
text: string;
|
text: string;
|
||||||
|
link?: string;
|
||||||
|
org?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
type GridElementProps = {
|
type GridElementProps = {
|
||||||
image_url: string;
|
title: string;
|
||||||
image_alt: string;
|
text: string;
|
||||||
title: string;
|
link?: string;
|
||||||
text: string;
|
org?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
const OneWide = ({title, text}: GridElementProps) => {
|
const OneWide = ({ title, text, link, org }: GridElementProps) => {
|
||||||
|
if (link === undefined) {
|
||||||
return (
|
return (
|
||||||
<div className={"OneByOne GridElement"}>
|
<div className={"OneWide GridElement"}>
|
||||||
<div className={"title"}>
|
<div className={"GridElementInternal"}>
|
||||||
<h2>{title}</h2>
|
<div className={"title"}>
|
||||||
</div>
|
<h2>{title}</h2>
|
||||||
<div className={"description"}>
|
{org && <h3>{org}</h3>}
|
||||||
<p>{text}</p>
|
</div>
|
||||||
</div>
|
<div className={"description"}>
|
||||||
|
<p>{text}</p>
|
||||||
|
</div>
|
||||||
</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>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const OneWidePic = ({
|
const OneWidePic = ({
|
||||||
image_url,
|
image_url,
|
||||||
image_alt,
|
image_alt,
|
||||||
title,
|
title,
|
||||||
text,
|
text,
|
||||||
}: GridElementImageProps) => {
|
link,
|
||||||
|
org,
|
||||||
|
}: GridElementImageProps) => {
|
||||||
|
if (link === undefined) {
|
||||||
return (
|
return (
|
||||||
<div className={"OneByOne GridElement"}>
|
<div className={"OneWide Pic GridElement"}>
|
||||||
<div className={"image"}>
|
<div className={"GridElementInternal"}>
|
||||||
<img src={image_url} alt={image_alt}/>
|
<div className={"image"}>
|
||||||
</div>
|
<img src={image_url} alt={image_alt} />
|
||||||
<div className={"description"}>
|
</div>
|
||||||
<h2>{title}</h2>
|
<div className={"description"}>
|
||||||
<p>{text}</p>
|
<h2>{title}</h2>
|
||||||
</div>
|
{org && <h3>{org}</h3>}
|
||||||
|
|
||||||
|
<p>{text}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const FourByOneGridElement = ({
|
const FourByOneGridElement = ({
|
||||||
image_url,
|
image_url,
|
||||||
image_alt,
|
image_alt,
|
||||||
title,
|
title,
|
||||||
text,
|
text,
|
||||||
}: GridElementImageProps) => {
|
link,
|
||||||
|
org,
|
||||||
|
}: GridElementImageProps) => {
|
||||||
|
if (link === undefined) {
|
||||||
return (
|
return (
|
||||||
<div className={"FourByOne GridElement"}>
|
<div className={"FourByOne GridElement"}>
|
||||||
<div className={"image"}>
|
<div className={"GridElementInternal"}>
|
||||||
<img src={image_url} alt={image_alt}/>
|
<div className={"image"}>
|
||||||
</div>
|
<img src={image_url} alt={image_alt} />
|
||||||
<div className={"description"}>
|
</div>
|
||||||
<h2>{title}</h2>
|
<div className={"description"}>
|
||||||
|
<h2>{title}</h2>
|
||||||
<p>{text}</p>
|
{org && <h3>{org}</h3>}
|
||||||
</div>
|
<p>{text}</p>
|
||||||
|
</div>
|
||||||
</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>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ProjectGrid = () => {
|
export const ProjectGrid = () => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
var elem = document.querySelector("#project-grid");
|
var elem = document.querySelector("#project-grid");
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
var msnry = new Masonry(elem, {
|
var msnry = new Masonry(elem, {
|
||||||
itemSelector: ".GridElement",
|
itemSelector: ".GridElement",
|
||||||
gutter: 5,
|
gutter: 0,
|
||||||
columnWidth: ".GridSizer",
|
columnWidth: ".GridSizer",
|
||||||
percentPosition: true,
|
percentPosition: true,
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id={"project-grid-parent"}>
|
<div id={"project-grid-parent"}>
|
||||||
<div id={"project-grid"}>
|
<div id={"project-grid"}>
|
||||||
<div className={"GridSizer"}/>
|
<div className={"GridSizer"} />
|
||||||
<OneWidePic
|
<OneWide
|
||||||
image_url={"http://jakecover.me/images/codedaysd.png"}
|
title={"ElaticMatch"}
|
||||||
image_alt={"CodeDay San Diego Logo"}
|
org={"CodeDay"}
|
||||||
title={"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."}
|
||||||
text={
|
link={"https://github.com/codeday/labs-elastic-match"}
|
||||||
"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={"John Peter"}
|
||||||
<OneWidePic
|
org={"CodeDay"}
|
||||||
image_url={"http://jakecover.me/images/codedaysd.png"}
|
text={
|
||||||
image_alt={"CodeDay San Diego Logo"}
|
"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."
|
||||||
title={"CodeDay"}
|
}
|
||||||
text={
|
link={"https://github.com/codeday/johnpeter-discord"}
|
||||||
"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={"CopyMoji"}
|
||||||
<OneWidePic
|
org={"BetterDiscord"}
|
||||||
image_url={"http://jakecover.me/images/codedaysd.png"}
|
text={
|
||||||
image_alt={"CodeDay San Diego Logo"}
|
"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."
|
||||||
title={"CodeDay"}
|
}
|
||||||
text={
|
link={"https://github.com/JakeCover/BetterDiscordExtensions/tree/main/plugins/CopyMoji"}
|
||||||
"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."
|
/>
|
||||||
}
|
<OneWidePic
|
||||||
/>
|
image_url={CodeDaySD}
|
||||||
<OneWidePic
|
image_alt={"CodeDay San Diego Logo"}
|
||||||
image_url={"http://jakecover.me/images/codedaysd.png"}
|
org={"CodeDay"}
|
||||||
image_alt={"CodeDay San Diego Logo"}
|
title={"CodeDay San Diego"}
|
||||||
title={"CodeDay"}
|
text={
|
||||||
text={
|
"A 24 hour hackathon occurring around the world a few times a year. I volunteered for and then later ran the San Diego event."
|
||||||
"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."
|
}
|
||||||
}
|
link={"https://event.codeday.org/sandiego"}
|
||||||
/>
|
/>
|
||||||
<FourByOneGridElement
|
<FourByOneGridElement
|
||||||
image_url={"http://jakecover.me/images/foresightsports.png"}
|
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 Unity that took data from their launch monitor technology and translated it into a seamless experience."
|
"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."
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<OneWidePic
|
<OneWidePic
|
||||||
image_url={"http://jakecover.me/images/codedaysd.png"}
|
image_url={Distest}
|
||||||
image_alt={"CodeDay San Diego Logo"}
|
image_alt={"Distest Logo"}
|
||||||
title={"CodeDay"}
|
title={"Distest"}
|
||||||
text={
|
org={"Random Projects"}
|
||||||
"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."
|
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"}
|
||||||
<OneWidePic
|
/>
|
||||||
image_url={"http://jakecover.me/images/codedaysd.png"}
|
<OneWidePic
|
||||||
image_alt={"CodeDay San Diego Logo"}
|
image_url={Scoresaver}
|
||||||
title={"CodeDay"}
|
image_alt={"Scoresaver Logo"}
|
||||||
text={
|
title={"ScoreSaver"}
|
||||||
"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."
|
org={"Random Projects"}
|
||||||
}
|
text={
|
||||||
/>
|
"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!"
|
||||||
<OneWidePic
|
}
|
||||||
image_url={"http://jakecover.me/images/codedaysd.png"}
|
link={"https://github.com/JakeCover/ScoreSaverExtention"}
|
||||||
image_alt={"CodeDay San Diego Logo"}
|
/>
|
||||||
title={"CodeDay"}
|
<OneWide
|
||||||
text={
|
title={"Personal Website"}
|
||||||
"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."
|
org={"Random Projects"}
|
||||||
}
|
text={
|
||||||
/>
|
"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."
|
||||||
<OneWidePic
|
}
|
||||||
image_url={"http://jakecover.me/images/codedaysd.png"}
|
link={"https://github.com/JakeCover/PersonalWebsite_Static"}
|
||||||
image_alt={"CodeDay San Diego Logo"}
|
/>
|
||||||
title={"CodeDay"}
|
<OneWidePic
|
||||||
text={
|
image_url={"http://jakecover.me/images/codedaysd.png"}
|
||||||
"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."
|
image_alt={"CodeDay San Diego Logo"}
|
||||||
}
|
title={"CodeDay"}
|
||||||
/>
|
text={
|
||||||
<OneWidePic
|
"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."
|
||||||
image_url={"http://jakecover.me/images/codedaysd.png"}
|
}
|
||||||
image_alt={"CodeDay San Diego Logo"}
|
/>
|
||||||
title={"CodeDay"}
|
<OneWidePic
|
||||||
text={
|
image_url={"http://jakecover.me/images/codedaysd.png"}
|
||||||
"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."
|
image_alt={"CodeDay San Diego Logo"}
|
||||||
}
|
title={"CodeDay"}
|
||||||
/>
|
text={
|
||||||
</div>
|
"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."
|
||||||
</div>
|
}
|
||||||
);
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 429 KiB After Width: | Height: | Size: 429 KiB |
|
Before Width: | Height: | Size: 3.3 MiB After Width: | Height: | Size: 3.3 MiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Loading…
Reference in New Issue