Merge branch 'React' into origin/master

replace/16dd248772118a1046e8a435f514b03d0cee9f19
Cobular 5 years ago
commit 3ebd7fed7d

File diff suppressed because one or more lines are too long

105
.gitignore vendored

@ -1,9 +1,25 @@
# Created by https://www.gitignore.io/api/sass,webstorm,jetbrains+all # Created by https://www.toptal.com/developers/gitignore/api/react,webstorm
# Edit at https://www.gitignore.io/?templates=sass,webstorm,jetbrains+all # Edit at https://www.toptal.com/developers/gitignore?templates=react,webstorm
### JetBrains+all ### ### react ###
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm .DS_*
*.log
logs
**/*.backup.*
**/*.back.*
node_modules
bower_components
*.sublime*
psd
thumb
sketch
### WebStorm ###
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
# User-specific stuff # User-specific stuff
@ -33,6 +49,9 @@
# When using Gradle or Maven with auto-import, you should exclude module files, # When using Gradle or Maven with auto-import, you should exclude module files,
# since they will be recreated, and may cause churn. Uncomment if using # since they will be recreated, and may cause churn. Uncomment if using
# auto-import. # auto-import.
# .idea/artifacts
# .idea/compiler.xml
# .idea/jarRepositories.xml
# .idea/modules.xml # .idea/modules.xml
# .idea/*.iml # .idea/*.iml
# .idea/modules # .idea/modules
@ -72,70 +91,6 @@ fabric.properties
# Android studio 3.1+ serialized cache file # Android studio 3.1+ serialized cache file
.idea/caches/build_file_checksums.ser .idea/caches/build_file_checksums.ser
### JetBrains+all Patch ###
# Ignores the whole .idea folder and all .iml files
# See https://github.com/joeblau/gitignore.io/issues/186 and https://github.com/joeblau/gitignore.io/issues/360
.idea/
# Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-249601023
*.iml
modules.xml
.idea/misc.xml
*.ipr
# Sonarlint plugin
.idea/sonarlint
### Sass ###
.sass-cache/
*.css.map
*.sass.map
*.scss.map
### WebStorm ###
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
# User-specific stuff
# Generated files
# Sensitive or high-churn files
# Gradle
# Gradle and Maven with auto-import
# When using Gradle or Maven with auto-import, you should exclude module files,
# since they will be recreated, and may cause churn. Uncomment if using
# auto-import.
# .idea/modules.xml
# .idea/*.iml
# .idea/modules
# *.iml
# *.ipr
# CMake
# Mongo Explorer plugin
# File-based project format
# IntelliJ
# mpeltonen/sbt-idea plugin
# JIRA plugin
# Cursive Clojure plugin
# Crashlytics plugin (for Android Studio and IntelliJ)
# Editor-based Rest Client
# Android studio 3.1+ serialized cache file
### WebStorm Patch ### ### WebStorm Patch ###
# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721 # Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
@ -145,13 +100,25 @@ modules.xml
# *.ipr # *.ipr
# Sonarlint plugin # Sonarlint plugin
# https://plugins.jetbrains.com/plugin/7973-sonarlint
.idea/**/sonarlint/ .idea/**/sonarlint/
# SonarQube Plugin # SonarQube Plugin
# https://plugins.jetbrains.com/plugin/7238-sonarqube-community-plugin
.idea/**/sonarIssues.xml .idea/**/sonarIssues.xml
# Markdown Navigator plugin # Markdown Navigator plugin
# https://plugins.jetbrains.com/plugin/7896-markdown-navigator-enhanced
.idea/**/markdown-navigator.xml .idea/**/markdown-navigator.xml
.idea/**/markdown-navigator-enh.xml
.idea/**/markdown-navigator/ .idea/**/markdown-navigator/
# End of https://www.gitignore.io/api/sass,webstorm,jetbrains+all # Cache file creation bug
# See https://youtrack.jetbrains.com/issue/JBR-2257
.idea/$CACHE_FILE$
# CodeStream plugin
# https://plugins.jetbrains.com/plugin/12206-codestream
.idea/codestream.xml
# End of https://www.toptal.com/developers/gitignore/api/react,webstorm

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="bootstrap" level="application" />
<orderEntry type="library" name="gsap" level="application" />
<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" />
</component>
</module>

@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
</state>
</component>

@ -0,0 +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}" />
</component>
</project>

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/PersonalWebsite_Static.iml" filepath="$PROJECT_DIR$/.idea/PersonalWebsite_Static.iml" />
</modules>
</component>
</project>

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="PrettierConfiguration">
<option name="myRunOnReformat" value="true" />
</component>
</project>

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
</project>

@ -48,7 +48,7 @@
<div class="row"> <div class="row">
<div class="col-xl-3 col-lg-4 col-sm-6 tall top_buffer"> <div class="col-xl-3 col-lg-4 col-sm-6 tall top_buffer">
<div class="image"> <div class="image">
<img class="img-fluid" src="images/codedaysd.png" alt="CodeDay SD Logo"> <img class="img-fluid" src="../src/images/codedaysd.png" alt="CodeDay SD Logo">
</div> </div>
<div class="description"> <div class="description">
<p>CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges <p>CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges
@ -58,7 +58,7 @@
</div> </div>
<div class="col-xl-3 col-md-4 col-sm-6 tall top_buffer"> <div class="col-xl-3 col-md-4 col-sm-6 tall top_buffer">
<div class="image"> <div class="image">
<img class="img-fluid" src="images/codeday-notext-color.svg" alt="Redish Heart, SRND Logo"> <img class="img-fluid" src="../src/images/codeday-notext-color.svg" alt="Redish Heart, SRND Logo">
</div> </div>
<div class="description"> <div class="description">
<p>SRND is an educational nonprofit that works to provide CS education to high school and <p>SRND is an educational nonprofit that works to provide CS education to high school and
@ -68,7 +68,7 @@
</div> </div>
<div class="col-xl-3 col-md-4 col-sm-6 tall top_buffer"> <div class="col-xl-3 col-md-4 col-sm-6 tall top_buffer">
<div class="image"> <div class="image">
<img class="img-fluid" src="images/distest.svg" alt="Distest Logo"> <img class="img-fluid" src="../src/images/distest.svg" alt="Distest Logo">
</div> </div>
<div class="description"> <div class="description">
<p>Distest is a testing library for Discord bots that allows for full integration tests of your bot, <p>Distest is a testing library for Discord bots that allows for full integration tests of your bot,
@ -77,7 +77,7 @@
</div> </div>
<div class="col-xl-3 col-md-4 col-sm-6 tall top_buffer"> <div class="col-xl-3 col-md-4 col-sm-6 tall top_buffer">
<div class="image"> <div class="image">
<img class="img-fluid" src="images/scoresaver.svg" alt="Red to Blue Gradient w/ White Download Icon"> <img class="img-fluid" src="../src/images/scoresaver.svg" alt="Red to Blue Gradient w/ White Download Icon">
</div> </div>
<div class="description"> <div class="description">
<p>A Chrome extension to help you download beatsaber songs directly from ScoreSaber. No more searching <p>A Chrome extension to help you download beatsaber songs directly from ScoreSaber. No more searching
@ -86,7 +86,7 @@
</div> </div>
<div class="col-xs-12 wide top_buffer"> <div class="col-xs-12 wide top_buffer">
<div class="image"> <div class="image">
<img class="img-fluid" src="images/foresightsports.png" alt="ForeSight Sports Logo0"> <img class="img-fluid" src="../src/images/foresightsports.png" alt="ForeSight Sports Logo0">
</div> </div>
<div class="description"> <div class="description">
<p>Foresight Sports creates advanced augmented reality sports experiences. I created multiple games <p>Foresight Sports creates advanced augmented reality sports experiences. I created multiple games

@ -0,0 +1,3 @@
{
"lockfileVersion": 1
}

@ -0,0 +1,46 @@
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.\
You will also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you cant go back!**
If you arent satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point youre on your own.
You dont have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnt feel obligated to use this feature. However we understand that this tool wouldnt be useful if you couldnt customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).

18058
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -0,0 +1,52 @@
{
"name": "personal-website-static",
"version": "0.1.0",
"private": true,
"dependencies": {
"@ant-design/icons": "^4.3.0",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"@types/jest": "^26.0.19",
"@types/masonry-layout": "^4.2.2",
"@types/node": "^12.19.11",
"@types/react": "^16.14.2",
"@types/react-dom": "^16.9.10",
"@types/react-router-dom": "^5.1.7",
"antd": "^4.9.4",
"include-media": "^1.4.9",
"masonry-layout": "^4.2.2",
"node-sass": "^4.14.1",
"prettier": "^2.2.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"typescript": "^4.1.3",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

@ -0,0 +1,40 @@
@import '~antd/dist/antd.css';
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@ -0,0 +1,9 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

@ -0,0 +1,17 @@
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">
<Header />
<Main />
<Footer />
</div>
);
}
export default App;

@ -0,0 +1,7 @@
export const Contact = () => {
return (
<div>
<h1 style={{margin: "auto"}}>Contact</h1>
</div>
)
}

@ -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;
}
}
}

@ -0,0 +1,42 @@
import "./Footer.scss"
export const Footer = () => {
return (
<footer className="site-footer">
<div className="footer-grid">
<div className="blurb">
<p className="text-justify">
Made with and by Jake Cover, a CS student who really needs to find something
witty and interesting to put here soon. Feel free to reach out!
<br />
Checklist Icon by Arthur Shlain from the Noun Project
</p>
</div>
<div className="links-container">
<h2>Links and Stuff</h2>
<ul className="footer-links">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="resume.html">Resume</a>
</li>
<li>
<a href="https://github.com/JakeCover">GitHub</a>
</li>
</ul>
</div>
</div>
<hr />
<div className="copyright-text">
Copyright &copy; 2020 All Rights Reserved by Jake Cover
</div>
</footer>
);
};

@ -0,0 +1,66 @@
header {
display: flex;
flex-direction: row;
margin: 10px;
padding: 10px;
border-radius: 5px;
background: #66bb6a;
font-family: "Fira Code", monospace;
h1 {
font-weight: 600;
margin: 0 0 0 5px;
}
.headerLinks {
display: flex;
flex-direction: row;
align-content: center;
margin-left: auto;
h2 {
margin: 0;
border-radius: 5px;
&:hover {
background: #ddd;
}
&.active {
background-color: #4CAF50;
color: white;
}
}
h2:last-of-type {
margin-right: 5px;
}
/* Hide the link that should open and close the topnav on small screens */
.icon {
display: none;
}
@media screen and (max-width: 660px) {
h2 {
display: none;
}
.icon {
margin-left: auto;
display: block;
}
}
}
@media screen and (max-width: 660px) {
&.responsive {
background: #282c34;
h2 {
display: block;
}
}
}
}

@ -0,0 +1,51 @@
import React from "react";
import "./Header.scss";
import { Space } from "antd";
import { Link } from "react-router-dom";
import {MenuOutlined} from "@ant-design/icons";
export const Header = () => {
function showHideHamburger() {
var x = document.getElementById("myHeader");
// @ts-ignore
if (x.className === "header") {
// @ts-ignore
x.className += " responsive";
} else {
// @ts-ignore
x.className = "header";
}
}
return (
<header className={"header"} id={"myHeader"}>
<Link to="/" className="navbar-brand">
<h1>Jake Cover</h1>
</Link>
<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>
);
};

@ -0,0 +1,13 @@
#about-me {
background: #61dafb;
border-radius: 5px;
margin: 10px auto;
padding: 10px;
width: fit-content;
p {
font-family: "Montserrat", sans-serif;
font-size: 16px;
}
}

@ -0,0 +1,16 @@
import "./Home.scss"
import {ProjectGrid} from "./ProjectGrid";
export const Home = () => {
return (
<div id={"home"}>
<div id={"about-me"}>
<p>
Hi! I'm Jake, a CS student from the west coast! Take a look at some of my projects below! <br/>
This site is still under construction, so pardon the duplicate information and the horrendous colors. The final version should be up soon!
</p>
</div>
<ProjectGrid/>
</div>
)
}

@ -0,0 +1,16 @@
import { Route, Switch } from "react-router-dom";
import { Contact } from "./Contact";
import { Home } from "./Home";
import { Resume } from "./Resume";
export const Main = () => {
return (
<main>
<Switch>
<Route exact={true} path={"/"} component={Home} />
<Route path={"/contact"} component={Contact} />
<Route path={"/resume"} component={Resume} />
</Switch>
</main>
);
};

@ -0,0 +1,164 @@
@import "~include-media/dist/_include-media.scss";
$breakpoints: (x-small: 320px, small: 660px, medium: 900px, large: 1300px, x-large: 1560px);
// Override Sass min()
@function min($numbers...) {
@return m#{i}n(#{$numbers});
}
// Override Sass max()
@function max($numbers...) {
@return m#{a}x(#{$numbers});
}
#project-grid {
margin: 10px;
background: #FFD43B;
border-radius: 5px;
//padding: 10px;
@include media("<=x-small") {
.GridSizer, .OneWide, .FourByOne {
width: 100%;
}
}
@include media(">x-small", "<small") {
.GridSizer, .OneWide {
width: 49%;
}
.FourByOne {
width: 100%;
}
}
@include media(">=small", "<medium") {
.GridSizer, .OneWide {
width: 32%;
}
.FourByOne {
width: 95%;
}
}
@include media(">=medium", "<large") {
.GridSizer, .OneWide {
width: 24.5%;
}
.FourByOne {
width: 73%;
}
}
@include media(">=large", "<x-large") {
.GridSizer, .OneWide {
max-width: 300px;
width: 19.5%;
}
.FourByOne {
width: 58.5%;
max-width: 900px;
}
}
@include media(">=x-large") {
.GridSizer, .OneWide {
width: 300px;
}
.FourByOne {
width: 900px;
}
}
}
.GridElement {
padding: 5px;
.GridElementInternal {
padding: 9px;
border-radius: 5px;
background: lightcyan;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
transition: box-shadow 0.3s ease-in-out;
}
.GridElementInternal:hover {
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
h2 {
font-family: "Fira Code", monospace;
font-weight: 400;
margin-bottom: 0px;
line-height: normal;
}
h3 {
line-height: normal;
color: darkgrey;
margin-bottom: 3px;
}
p {
font-family: "Montserrat", sans-serif;
color: black;
margin-bottom: 0;
}
}
.OneWide {
display: flex;
flex-direction: column;
width: available;
img {
width: 100%;
margin-bottom: 5px;
}
}
.FourByOne {
.GridElementInternal {
display: flex;
align-items: center;
.image {
flex: 1;
img {
width: 100%;
max-width: 100%;
}
}
.description {
min-width: 20ch;
width: 30ch;
}
@include media(">small") {
flex-direction: row;
}
@include media("<=small") {
flex-direction: column;
.description {
width: 95%;
}
}
}
}
.LinkIcon {
position: absolute;
right: 12px;
top: 12px;
font-size: 24px;
color: black;
background: rgba(224,255,255, 0.7);
border-radius: 5px;
}

@ -0,0 +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 {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;
link?: string;
org?: string;
};
type GridElementProps = {
title: string;
text: string;
link?: string;
org?: string;
};
const OneWide = ({ title, text, link, org }: GridElementProps) => {
if (link === undefined) {
return (
<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,
link,
org,
}: GridElementImageProps) => {
if (link === undefined) {
return (
<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,
link,
org,
}: GridElementImageProps) => {
if (link === undefined) {
return (
<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");
// @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"} />
<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>
);
};

@ -0,0 +1,7 @@
export const Resume = () => {
return (
<div>
<h1 style={{margin: "auto"}}>Resume</h1>
</div>
)
}

@ -0,0 +1,33 @@
import {useEffect, useState} from "react";
export function useWindowSize() {
// Initialize state with undefined width/height so server and client renders match
// Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
const [windowSize, setWindowSize] = useState({
width: 0,
height: 0,
});
useEffect(() => {
// Handler to call on window resize
function handleResize() {
// Set window width/height to state
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
}
// Add event listener
window.addEventListener("resize", handleResize);
// Call handler right away so state gets updated with initial window size
handleResize();
// Remove event listener on cleanup
return () => window.removeEventListener("resize", handleResize);
}, []); // Empty array ensures that effect is only run on mount
return windowSize;
}

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

@ -0,0 +1,2 @@
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400,600&family=Montserrat:wght@400;600;700&display=swap');

@ -0,0 +1,13 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

@ -0,0 +1,19 @@
import React from "react";
import ReactDOM from "react-dom";
import "./index.scss";
import "./imports.scss"
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { HashRouter } from "react-router-dom";
ReactDOM.render(
<HashRouter>
<App />
</HashRouter>,
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

@ -0,0 +1 @@
/// <reference types="react-scripts" />

@ -0,0 +1,15 @@
import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;

@ -0,0 +1,5 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

@ -0,0 +1,26 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
Loading…
Cancel
Save