@ -1,31 +1,68 @@
/ * *
* 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 ;
image_alt : string ;
title : string ;
title : string ;
text : string ;
text : string ;
link? : 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 = { "GridElementInternal" } >
< div className = { "title" } >
< div className = { "title" } >
< h2 > { title } < / h2 >
< h2 > { title } < / h2 >
{ org && < h3 > { org } < / h3 > }
< / div >
< / div >
< div className = { "description" } >
< div className = { "description" } >
< p > { text } < / p >
< p > { text } < / p >
< / div >
< / 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 >
) ;
) ;
} ; } ;
@ -34,17 +71,40 @@ const OneWidePic = ({
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 = { "GridElementInternal" } >
< div className = { "image" } >
< div className = { "image" } >
< img src = { image_url } alt = { image_alt } / >
< img src = { image_url } alt = { image_alt } / >
< / div >
< / div >
< div className = { "description" } >
< div className = { "description" } >
< h2 > { title } < / h2 >
< h2 > { title } < / h2 >
{ org && < h3 > { org } < / h3 > }
< p > { text } < / p >
< p > { text } < / p >
< / div >
< / 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 >
) ;
) ;
} ; } ;
@ -53,18 +113,39 @@ const FourByOneGridElement = ({
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 = { "GridElementInternal" } >
< div className = { "image" } >
< div className = { "image" } >
< img src = { image_url } alt = { image_alt } / >
< img src = { image_url } alt = { image_alt } / >
< / div >
< / div >
< div className = { "description" } >
< div className = { "description" } >
< h2 > { title } < / h2 >
< h2 > { title } < / h2 >
{ org && < h3 > { org } < / h3 > }
< p > { text } < / p >
< p > { text } < / p >
< / div >
< / 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 >
) ;
) ;
} ; } ;
@ -75,7 +156,7 @@ export const ProjectGrid = () => {
// @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 ,
} ) ;
} ) ;
@ -84,41 +165,41 @@ export const ProjectGrid = () => {
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."
}
/ >
/ >
< OneWidePic
< OneWide
image_url = { "http://jakecover.me/images/codedaysd.png" }
title = { "John Peter" }
image_alt = { "CodeDay San Diego Logo" }
org = { "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 ."
"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" }
/ >
/ >
< OneWidePic
< OneWide
image_url = { "http://jakecover.me/images/codedaysd.png" }
title = { "CopyMoji" }
image_alt = { "CodeDay San Diego Logo" }
org = { "BetterDiscord" }
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 ."
"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
< OneWidePic
image_url = { "http://jakecover.me/images/codedaysd.png" }
image_url = { CodeDaySD }
image_alt = { "CodeDay San Diego Logo" }
image_alt = { "CodeDay San Diego Logo" }
title = { "CodeDay" }
org = { "CodeDay" }
title = { "CodeDay San Diego" }
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 ."
"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
< 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 = {
@ -126,29 +207,32 @@ export const ProjectGrid = () => {
}
}
/ >
/ >
< 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" }
org = { "Random Projects" }
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 ."
"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
< OneWidePic
image_url = { "http://jakecover.me/images/codedaysd.png" }
image_url = { Scoresaver }
image_alt = { "CodeDay San Diego Logo" }
image_alt = { "Scoresaver Logo" }
title = { "CodeDay" }
title = { "ScoreSaver" }
org = { "Random Projects" }
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. "
"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" }
/ >
/ >
< OneWidePic
< OneWide
image_url = { "http://jakecover.me/images/codedaysd.png" }
title = { "Personal Website" }
image_alt = { "CodeDay San Diego Logo" }
org = { "Random Projects" }
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 ."
"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
< OneWidePic
image_url = { "http://jakecover.me/images/codedaysd.png" }
image_url = { "http://jakecover.me/images/codedaysd.png" }
Cobular
5 years ago
