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 "./Header.scss";
|
||||
import {Button, Space, Typography} from "antd";
|
||||
import {Link} from "react-router-dom";
|
||||
import { Space } from "antd";
|
||||
import { Link } from "react-router-dom";
|
||||
import {MenuOutlined} from "@ant-design/icons";
|
||||
|
||||
const {Title} = Typography;
|
||||
|
||||
export const Header = () => {
|
||||
return (
|
||||
<header>
|
||||
<Link to="/" className="navbar-brand">
|
||||
<h1>Jake Cover</h1>
|
||||
</Link>
|
||||
function showHideHamburger() {
|
||||
var x = document.getElementById("myHeader");
|
||||
// @ts-ignore
|
||||
if (x.className === "header") {
|
||||
// @ts-ignore
|
||||
x.className += " responsive";
|
||||
} else {
|
||||
// @ts-ignore
|
||||
x.className = "header";
|
||||
}
|
||||
}
|
||||
|
||||
<Space>
|
||||
<Link className="nav-link" to="/">
|
||||
<h2>Home</h2>
|
||||
</Link>
|
||||
return (
|
||||
<header className={"header"} id={"myHeader"}>
|
||||
<Link to="/" className="navbar-brand">
|
||||
<h1>Jake Cover</h1>
|
||||
</Link>
|
||||
|
||||
<Link className="nav-link" to="/contact">
|
||||
<h2>Contact</h2>
|
||||
</Link>
|
||||
<Link className="nav-link" to="/resume">
|
||||
<h2>Resume</h2>
|
||||
</Link>
|
||||
<a className="nav-link" href="https://github.com/JakeCover">
|
||||
<h2>GitHub</h2>
|
||||
</a>
|
||||
</Space>
|
||||
</header>
|
||||
);
|
||||
<Space className={"headerLinks"}>
|
||||
<Link className="nav-link" to="/">
|
||||
<h2>Home</h2>
|
||||
</Link>
|
||||
|
||||
<Link className="nav-link" to="/contact">
|
||||
<h2>Contact</h2>
|
||||
</Link>
|
||||
<Link className="nav-link" to="/resume">
|
||||
<h2>Resume</h2>
|
||||
</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 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 = {
|
||||
image_url: string;
|
||||
image_alt: string;
|
||||
title: string;
|
||||
text: string;
|
||||
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;
|
||||
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={"title"}>
|
||||
<h2>{title}</h2>
|
||||
</div>
|
||||
<div className={"description"}>
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
const OneWidePic = ({
|
||||
image_url,
|
||||
image_alt,
|
||||
title,
|
||||
text,
|
||||
}: GridElementImageProps) => {
|
||||
image_url,
|
||||
image_alt,
|
||||
title,
|
||||
text,
|
||||
link,
|
||||
org,
|
||||
}: GridElementImageProps) => {
|
||||
if (link === undefined) {
|
||||
return (
|
||||
<div className={"OneByOne GridElement"}>
|
||||
<div className={"image"}>
|
||||
<img src={image_url} alt={image_alt}/>
|
||||
</div>
|
||||
<div className={"description"}>
|
||||
<h2>{title}</h2>
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
<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 (
|
||||
<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 = ({
|
||||
image_url,
|
||||
image_alt,
|
||||
title,
|
||||
text,
|
||||
}: GridElementImageProps) => {
|
||||
image_url,
|
||||
image_alt,
|
||||
title,
|
||||
text,
|
||||
link,
|
||||
org,
|
||||
}: GridElementImageProps) => {
|
||||
if (link === undefined) {
|
||||
return (
|
||||
<div className={"FourByOne GridElement"}>
|
||||
<div className={"image"}>
|
||||
<img src={image_url} alt={image_alt}/>
|
||||
</div>
|
||||
<div className={"description"}>
|
||||
<h2>{title}</h2>
|
||||
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export const ProjectGrid = () => {
|
||||
useEffect(() => {
|
||||
var elem = document.querySelector("#project-grid");
|
||||
useEffect(() => {
|
||||
var elem = document.querySelector("#project-grid");
|
||||
|
||||
// @ts-ignore
|
||||
var msnry = new Masonry(elem, {
|
||||
itemSelector: ".GridElement",
|
||||
gutter: 5,
|
||||
columnWidth: ".GridSizer",
|
||||
percentPosition: true,
|
||||
});
|
||||
// @ts-ignore
|
||||
var msnry = new Masonry(elem, {
|
||||
itemSelector: ".GridElement",
|
||||
gutter: 0,
|
||||
columnWidth: ".GridSizer",
|
||||
percentPosition: true,
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<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."
|
||||
}
|
||||
/>
|
||||
<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."
|
||||
}
|
||||
/>
|
||||
<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."
|
||||
}
|
||||
/>
|
||||
<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."
|
||||
}
|
||||
/>
|
||||
<FourByOneGridElement
|
||||
image_url={"http://jakecover.me/images/foresightsports.png"}
|
||||
image_alt={"Foresight Sports Logo"}
|
||||
title={"Foresight Sports"}
|
||||
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."
|
||||
}
|
||||
/>
|
||||
<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."
|
||||
}
|
||||
/>
|
||||
|
||||
<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."
|
||||
}
|
||||
/>
|
||||
<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."
|
||||
}
|
||||
/>
|
||||
<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."
|
||||
}
|
||||
/>
|
||||
<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."
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div id={"project-grid-parent"}>
|
||||
<div id={"project-grid"}>
|
||||
<div className={"GridSizer"} />
|
||||
<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"}
|
||||
/>
|
||||
<OneWide
|
||||
title={"John Peter"}
|
||||
org={"CodeDay"}
|
||||
text={
|
||||
"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"}
|
||||
/>
|
||||
<OneWide
|
||||
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"}
|
||||
/>
|
||||
<OneWidePic
|
||||
image_url={CodeDaySD}
|
||||
image_alt={"CodeDay San Diego Logo"}
|
||||
org={"CodeDay"}
|
||||
title={"CodeDay San Diego"}
|
||||
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."
|
||||
}
|
||||
link={"https://event.codeday.org/sandiego"}
|
||||
/>
|
||||
<FourByOneGridElement
|
||||
image_url={Foresight}
|
||||
image_alt={"Foresight Sports Logo"}
|
||||
title={"Foresight Sports"}
|
||||
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."
|
||||
}
|
||||
/>
|
||||
<OneWidePic
|
||||
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"}
|
||||
/>
|
||||
<OneWidePic
|
||||
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 mapper names on BeatSaver, just download the newest ranked songs directly!"
|
||||
}
|
||||
link={"https://github.com/JakeCover/ScoreSaverExtention"}
|
||||
/>
|
||||
<OneWide
|
||||
title={"Personal Website"}
|
||||
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."
|
||||
}
|
||||
link={"https://github.com/JakeCover/PersonalWebsite_Static"}
|
||||
/>
|
||||
<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."
|
||||
}
|
||||
/>
|
||||
<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."
|
||||
}
|
||||
/>
|
||||
</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