cobular
/
PersonalWebsite_Static
mirror of https://github.com/JakeCover/PersonalWebsite_Static
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added a medium sized option for project elements

Browse Source
replace/6aed3a05288ac0d55e718d303c27621208846618
Cobular 5 years ago
parent 24bac4dca8
commit bab20618fa
3 changed files with 165 additions and 31 deletions
Show Stats Download Patch File Download Diff File

1
.eslintcache
View File

File diff suppressed because one or more lines are too long

68
src/components/ProjectGrid.scss
Unescape Escape View File

@ -1,6 +1,6 @@
@import "~include-media/dist/_include-media.scss";
$breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-large: 1560px);
$breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-large: 1560px);
// Override Sass min()
@function min($numbers...) {
@ -45,13 +45,13 @@ $breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-lar
//padding: 10px;
@include media("<=x-small") {
.GridSizer, .OneWide, .FourByOne {
.GridSizer, .OneWide, .FourByOne .Medium {
width: 100%;
}
}
@include media(">x-small", "<small") {
.GridSizer, .OneWide {
.GridSizer, .OneWide .Medium {
width: 49%;
}
.FourByOne {
@ -60,7 +60,7 @@ $breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-lar
}
@include media(">=small", "<medium") {
.GridSizer, .OneWide {
.GridSizer, .OneWide .Medium {
width: 33%;
}
.FourByOne {
@ -72,6 +72,9 @@ $breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-lar
.GridSizer, .OneWide {
width: 24.9%;
}
.Medium {
width: 49.8%;
}
.FourByOne {
width: 74.6%;
}
@ -82,6 +85,10 @@ $breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-lar
max-width: 300px;
width: 19.9%;
}
.Medium {
max-width: 600px;
width: 39.8%;
}
.FourByOne {
width: 59.5%;
max-width: 900px;
@ -92,6 +99,9 @@ $breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-lar
.GridSizer, .OneWide {
width: 300px;
}
.Medium {
width: 600px;
}
.FourByOne {
width: 900px;
}
@ -129,6 +139,7 @@ $breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-lar
p {
font-family: "Montserrat", sans-serif;
font-size: 16px;
color: black;
margin-bottom: 0;
}
@ -145,6 +156,55 @@ $breakpoints: (x-small: 400px, small: 660px, medium: 900px, large: 1300px, x-lar
}
}
.Medium {
img {
width: 100%;
margin-bottom: 5px;
}
@include media("<medium") {
display: flex;
flex-direction: column;
width: available;
img {
width: 100%;
margin-bottom: 5px;
}
}
@include media(">=medium") {
// Two column sort of layout
.image {
float: left;
width: 50%;
shape-outside: inset(0);
img {
margin-bottom: 0;
}
}
.description {
display: inline;
p {
text-align: justify;
}
h2 h3 {
display: inline;
}
}
}
@include media(">x-large") {
.image {
width: 40%;
}
}
}
.FourByOne {
.GridElementInternal {
display: flex;

127
src/components/ProjectGrid.tsx
Unescape Escape View File

@ -36,7 +36,7 @@ type GridElementProps = {
org?: string;
};
function OneWide({ title, text, link, org }: GridElementProps) {
function SmallElement({ title, text, link, org }: GridElementProps) {
if (link === undefined) {
return (
<div className={"OneWide GridElement"}>
@ -53,12 +53,17 @@ function OneWide({ title, text, link, org }: GridElementProps) {
);
}
return (
<a className={"OneWide GridElement Link"} href={link} rel={"noreferrer"} target={"_blank"}>
<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"}/>
<LinkOutlined className={"LinkIcon"} />
</div>
<div className={"description"}>
<p>{text}</p>
@ -66,9 +71,16 @@ function OneWide({ title, text, link, org }: GridElementProps) {
</div>
</a>
);
};
}
function OneWidePic({ image_url, image_alt, title, text, link, org }: GridElementImageProps) {
function SmallElementPic({
image_url,
image_alt,
title,
text,
link,
org,
}: GridElementImageProps) {
if (link === undefined) {
return (
<div className={"OneWide Pic GridElement"}>
@ -108,7 +120,60 @@ function OneWidePic({ image_url, image_alt, title, text, link, org }: GridElemen
);
}
function FourByOneGridElement({ image_url, image_alt, title, text, link, org }: GridElementImageProps) {
function MediumElement({
image_url,
image_alt,
title,
text,
link,
org,
}: GridElementImageProps) {
if (link === undefined) {
return (
<div className={"Medium 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={"Medium 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>
);
}
function LargeElementPic({
image_url,
image_alt,
title,
text,
link,
org,
}: GridElementImageProps) {
if (link === undefined) {
return (
<div className={"FourByOne GridElement"}>
@ -177,7 +242,7 @@ export function ProjectGrid() {
</div>
<div id={"project-grid"}>
<div className={"GridSizer"} />
<OneWide
<SmallElement
title={"ElaticMatch"}
org={"CodeDay"}
text={
@ -185,7 +250,7 @@ export function ProjectGrid() {
}
link={"https://github.com/codeday/labs-elastic-match"}
/>
<OneWide
<SmallElement
title={"John Peter"}
org={"CodeDay"}
text={
@ -193,7 +258,7 @@ export function ProjectGrid() {
}
link={"https://github.com/codeday/johnpeter-discord"}
/>
<OneWide
<SmallElement
title={"CopyMoji"}
org={"BetterDiscord"}
text={
@ -203,7 +268,7 @@ export function ProjectGrid() {
"https://github.com/JakeCover/BetterDiscordExtensions/tree/main/plugins/CopyMoji"
}
/>
<OneWidePic
<SmallElementPic
image_url={CodeDaySD}
image_alt={"CodeDay San Diego Logo"}
org={"CodeDay"}
@ -213,7 +278,7 @@ export function ProjectGrid() {
}
link={"https://event.codeday.org/sandiego"}
/>
<FourByOneGridElement
<LargeElementPic
image_url={Foresight}
image_alt={"Foresight Sports Logo"}
title={"Foresight Sports"}
@ -221,7 +286,7 @@ export function ProjectGrid() {
"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
<SmallElementPic
image_url={Distest}
image_alt={"Distest Logo"}
title={"Distest"}
@ -231,7 +296,7 @@ export function ProjectGrid() {
}
link={"https://github.com/JakeCover/distest"}
/>
<OneWidePic
<SmallElementPic
image_url={Scoresaver}
image_alt={"Scoresaver Logo"}
title={"ScoreSaver"}
@ -241,27 +306,37 @@ export function ProjectGrid() {
}
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
<MediumElement
image_url={Hashicorp}
image_alt={"HashiCorp Logo"}
title={"Hashicorp Stack Sysadmin"}
org={"CodeDay, Random Projects"}
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 at any scale, from one personal server to large corporate backends."
}
/>
<OneWide
title={"CodeDay"}
<SmallElement
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"}
/>
<SmallElement
title={"Nomad Job Templates Tool"}
link={"https://github.com/JakeCover/NomadJobTemplatesTool"}
org={"Random Projects"}
text={
"A little custom tool to allow you to use jinga-esque text substitutions in Nomad jobfiles to help centralize the definition of service traefik tags. This mainly makes it easier to update and change networking configuration across many jobs easily."
}
/>
<SmallElement
title={"Assorted Discord Bots"}
org={"Random Projects"}
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."
"I've made quite a number of discord bots over time! Some of them, like ReplyBot, which added a reply functionality to Discord years before they finally implemented it first-party, have been obsoleted nowadays, others like DiscordChannelMirror really aren't significantly notable, and many more have been lost to time and past me's lack of understanding of the importance of backup. I digress, however I really do love writing these sorts of applications!"
}
/>
</div>

Write Preview
Loading…
Cancel
Save