Add years, change to good functions

pull/4/head
Julie 5 years ago
parent e105d7a395
commit 6e8c324867
Signed by: cobular
GPG Key ID: 8CAB39FC9A8F13FB

File diff suppressed because one or more lines are too long

1
.gitignore vendored

@ -2,6 +2,7 @@
# Created by https://www.toptal.com/developers/gitignore/api/react,webstorm # Created by https://www.toptal.com/developers/gitignore/api/react,webstorm
# Edit at https://www.toptal.com/developers/gitignore?templates=react,webstorm # Edit at https://www.toptal.com/developers/gitignore?templates=react,webstorm
build build
.eslintcache
### react ### ### react ###
.DS_* .DS_*

@ -4,33 +4,11 @@ import { Tooltip } from "antd";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import axios from "axios"; import axios from "axios";
const TelegramOutlinedSvg = () => { function LastFmLi() {
return (
<svg
width="24px"
height="24px"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 1.41421,
}}
>
<path
id="telegram-1"
d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z"
/>
</svg>
);
};
const LastFmLi = () => {
const [nowPlayingSong, setNowPlayingSong] = useState<string>("nothing"); const [nowPlayingSong, setNowPlayingSong] = useState<string>("nothing");
const [nowPlayingArtist, setNowPlayingArtist] = useState<string>("no-one"); const [nowPlayingArtist, setNowPlayingArtist] = useState<string>("no-one");
const updateNowPlaying = async () => { async function updateNowPlaying() {
try { try {
const songData = await axios.get( const songData = await axios.get(
"https://jsonplaceholder.typicode.com/posts" "https://jsonplaceholder.typicode.com/posts"
@ -40,7 +18,7 @@ const LastFmLi = () => {
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} }
}; }
useEffect(() => { useEffect(() => {
updateNowPlaying(); updateNowPlaying();
@ -54,19 +32,82 @@ const LastFmLi = () => {
return <li>listening to ____ by ____</li>; return <li>listening to ____ by ____</li>;
}; };
const Age = () => { function Age() {
const [age, setAge] = useState( // Accounts for leap years and stuff
Math.round((new Date().getTime() - 1021004428000) / 1000) function milliseconds_year() {
); const dateObj = new Date();
const dateInit = Math.round(
const UpdateAge = () => { new Date(dateObj.getFullYear(), 0, 1).getTime()
setAge(Math.round((new Date().getTime() - 1021004428000) / 1000)); );
}; const dateEnd = Math.round(
new Date(dateObj.getFullYear(), 11, 31, 23, 59, 59, 999).getTime()
);
return dateEnd - dateInit;
}
function searchSternBorcotTree(
target: number,
left_n: number,
left_d: number,
right_n: number,
right_d: number,
count: number = 0
): [number, number] {
count++;
const center_n: number = left_n + right_n;
const center_d: number = left_d + right_d;
// Check to see if we've gone too deep
if (count > 25) return [center_n, center_d];
// Check to see if we're close enough to the target
if (Math.abs(target - (center_n / center_d)) > 0.001) {
// Look right down the tree
if (target > (center_n / center_d))
return searchSternBorcotTree(
target,
center_n,
center_d,
right_n,
right_d,
count
);
// Ok now look left
return searchSternBorcotTree(
target,
left_n,
left_d,
center_n,
center_d,
count
);
}
return [center_n, center_d];
}
function CalcAge() {
let ageMs = new Date().getTime() - 1021004428000;
const yearMs = milliseconds_year();
const ageYearsComponent = Math.floor(ageMs / yearMs);
const ageSecondsComponent = Math.floor((ageMs % yearMs) / 1000);
const [target_n, target_d] = searchSternBorcotTree(
ageSecondsComponent / (yearMs / 1000),
0,
1,
1,
1
);
return `${ageYearsComponent} and ${target_n}/${target_d}`;
}
const [age, setAge] = useState(CalcAge());
function UpdateAge() {
setAge(CalcAge());
}
useEffect(() => { useEffect(() => {
UpdateAge(); UpdateAge();
const interval = setInterval(UpdateAge, 1000); const interval = setInterval(UpdateAge, 5000);
return () => { return () => {
clearInterval(interval); clearInterval(interval);
@ -75,16 +116,16 @@ const Age = () => {
return ( return (
<li> <li>
<span style={{ fontFamily: "Fira Code" }}>{age}</span> seconds old{" "} {age} years old
</li> </li>
); );
}; };
export const AboutMe = () => { export function AboutMe() {
const EmailHandler = () => { function EmailHandler() {
const email = "Y29udGFjdEBqYWtlY292ZXIubWU="; const email = "Y29udGFjdEBqYWtlY292ZXIubWU=";
window.prompt("Thanks for being a human! Here's my email:", atob(email)); window.prompt("Thanks for being a human! Here's my email:", atob(email));
}; }
return ( return (
<div id={"about-me-parent"}> <div id={"about-me-parent"}>
@ -164,9 +205,18 @@ export const AboutMe = () => {
<h2>I'm:</h2> <h2>I'm:</h2>
<ul> <ul>
<Age /> <Age />
<LastFmLi /> <Tooltip
title={
"Hey! This part is still a work in progress, check back in a bit to see if it's working!"
}
>
<LastFmLi />
<li>
doing (general stuff - in class, projects, sleeping, games)
</li>
</Tooltip>
<li> <li>
doing (general stuff - in class, projects, sleeping, games) rather colorblind
</li> </li>
</ul> </ul>
</div> </div>
@ -174,4 +224,4 @@ export const AboutMe = () => {
</div> </div>
</div> </div>
); );
}; }

@ -2,7 +2,7 @@ import "./Footer.scss"
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
export const Footer = () => { export function Footer() {
return ( return (
<footer className="site-footer"> <footer className="site-footer">
<div className="footer-grid"> <div className="footer-grid">

@ -4,7 +4,7 @@ import { Button, Space } from "antd";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { MenuOutlined } from "@ant-design/icons"; import { MenuOutlined } from "@ant-design/icons";
export const Header = () => { export function Header() {
function showHideHamburger() { function showHideHamburger() {
var x = document.getElementById("myHeader"); var x = document.getElementById("myHeader");
// @ts-ignore // @ts-ignore
@ -52,4 +52,4 @@ export const Header = () => {
</Space> </Space>
</header> </header>
); );
}; }

@ -1,12 +1,12 @@
import "./Home.scss"; import "./Home.scss";
import { ProjectGrid } from "./ProjectGrid"; import { ProjectGrid } from "./ProjectGrid";
import {AboutMe} from "./AboutMe"; import { AboutMe } from "./AboutMe";
export const Home = () => { export function Home() {
return ( return (
<div id={"home"}> <div id={"home"}>
<AboutMe /> <AboutMe />
<ProjectGrid /> <ProjectGrid />
</div> </div>
); );
}; }

@ -3,7 +3,7 @@ import { Contact } from "./Contact";
import { Home } from "./Home"; import { Home } from "./Home";
import { Resume } from "./Resume"; import { Resume } from "./Resume";
export const Main = () => { export function Main() {
return ( return (
<main> <main>
<Switch> <Switch>
@ -13,4 +13,4 @@ export const Main = () => {
</Switch> </Switch>
</main> </main>
); );
}; }

@ -13,14 +13,13 @@ import Masonry from "masonry-layout";
import ImagesLoaded from "imagesloaded"; import ImagesLoaded from "imagesloaded";
import { useEffect } from "react"; import { useEffect } from "react";
import {LinkOutlined} from "@ant-design/icons"; import { LinkOutlined } from "@ant-design/icons";
import CodeDaySD from "../images/SanDiego.svg"; import CodeDaySD from "../images/SanDiego.svg";
import Foresight from "../images/foresightsports.png"; 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";
type GridElementImageProps = { type GridElementImageProps = {
image_url: string; image_url: string;
image_alt: string; image_alt: string;
@ -37,7 +36,7 @@ type GridElementProps = {
org?: string; org?: string;
}; };
const OneWide = ({ title, text, link, org }: GridElementProps) => { function OneWide({ title, text, link, org }: GridElementProps) {
if (link === undefined) { if (link === undefined) {
return ( return (
<div className={"OneWide GridElement"}> <div className={"OneWide GridElement"}>
@ -69,14 +68,7 @@ const OneWide = ({ title, text, link, org }: GridElementProps) => {
); );
}; };
const OneWidePic = ({ function OneWidePic({ image_url, image_alt, title, text, link, org }: GridElementImageProps) {
image_url,
image_alt,
title,
text,
link,
org,
}: GridElementImageProps) => {
if (link === undefined) { if (link === undefined) {
return ( return (
<div className={"OneWide Pic GridElement"}> <div className={"OneWide Pic GridElement"}>
@ -95,11 +87,16 @@ const OneWidePic = ({
); );
} }
return ( return (
<a className={"OneWide Pic GridElement Link"} href={link} target={"_blank"} rel={"noreferrer"}> <a
className={"OneWide Pic GridElement Link"}
href={link}
target={"_blank"}
rel={"noreferrer"}
>
<div className={"GridElementInternal"}> <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"} />
</div> </div>
<div className={"description"}> <div className={"description"}>
<h2>{title}</h2> <h2>{title}</h2>
@ -109,16 +106,9 @@ const OneWidePic = ({
</div> </div>
</a> </a>
); );
}; }
const FourByOneGridElement = ({ function FourByOneGridElement({ image_url, image_alt, title, text, link, org }: GridElementImageProps) {
image_url,
image_alt,
title,
text,
link,
org,
}: GridElementImageProps) => {
if (link === undefined) { if (link === undefined) {
return ( return (
<div className={"FourByOne GridElement"}> <div className={"FourByOne GridElement"}>
@ -136,11 +126,16 @@ const FourByOneGridElement = ({
); );
} }
return ( return (
<a className={"FourByOne GridElement Link"} href={link} target={"_blank"} rel={"noreferrer"}> <a
className={"FourByOne GridElement Link"}
href={link}
target={"_blank"}
rel={"noreferrer"}
>
<div className={"GridElementInternal"}> <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"} />
</div> </div>
<div className={"description"}> <div className={"description"}>
<h2>{title}</h2> <h2>{title}</h2>
@ -150,9 +145,9 @@ const FourByOneGridElement = ({
</div> </div>
</a> </a>
); );
}; }
export const ProjectGrid = () => { export function ProjectGrid() {
useEffect(() => { useEffect(() => {
var elem = document.querySelector("#project-grid"); var elem = document.querySelector("#project-grid");
@ -165,8 +160,8 @@ export const ProjectGrid = () => {
}); });
ImagesLoaded(elem).on("progress", () => { ImagesLoaded(elem).on("progress", () => {
msnry.layout?.(); setTimeout(() => msnry.layout?.(), 200);
}) });
} }
}); });
@ -176,97 +171,101 @@ export const ProjectGrid = () => {
<div id={"project-header"}> <div id={"project-header"}>
<h2>&lt;/&gt; My Projects</h2> <h2>&lt;/&gt; My Projects</h2>
<p> <p>
A gallery of some of my most interesting projects. Look for <LinkOutlined />, click those projects for more information! A gallery of some of my most interesting projects. Look for{" "}
<LinkOutlined />, click those projects for more information!
</p> </p>
</div> </div>
<div id={"project-grid"}> <div id={"project-grid"}>
<div className={"GridSizer"} />
<div className={"GridSizer"}/>
<OneWide <OneWide
title={"ElaticMatch"} title={"ElaticMatch"}
org={"CodeDay"} 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."} text={
link={"https://github.com/codeday/labs-elastic-match"} "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 <OneWide
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 extensive featureset, and has been used for multiple CodeDays and has worked with over 1000 students." "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"} link={"https://github.com/codeday/johnpeter-discord"}
/> />
<OneWide <OneWide
title={"CopyMoji"} title={"CopyMoji"}
org={"BetterDiscord"} org={"BetterDiscord"}
text={ 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." "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"} link={
"https://github.com/JakeCover/BetterDiscordExtensions/tree/main/plugins/CopyMoji"
}
/> />
<OneWidePic <OneWidePic
image_url={CodeDaySD} image_url={CodeDaySD}
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 the San Diego event." "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"} link={"https://event.codeday.org/sandiego"}
/> />
<FourByOneGridElement <FourByOneGridElement
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 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={Distest} image_url={Distest}
image_alt={"Distest Logo"} image_alt={"Distest Logo"}
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, improving the discord bot development workflow significantly. As far as I know, it's the only tool available for this sort of testing." "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"} link={"https://github.com/JakeCover/distest"}
/> />
<OneWidePic <OneWidePic
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 mapper names on BeatSaver, just download the newest ranked songs directly!" "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"} link={"https://github.com/JakeCover/ScoreSaverExtention"}
/> />
<OneWide <OneWide
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, but I didn't know React before starting on this so I'm pretty proud of it." "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"} link={"https://github.com/JakeCover/PersonalWebsite_Static"}
/> />
<OneWidePic <OneWidePic
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, 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 complex to get started with!" "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 assorted services on a few old machines. I strongly recommend it, it's very powerful and not all that complex to get started with!"
} }
/> />
<OneWide <OneWide
title={"CodeDay"} title={"CodeDay"}
text={ 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." "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> </div>
</div> </div>
); );
}; }

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

Loading…
Cancel
Save