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

Masonry works pretty good

Browse Source
replace/e640f197fdf46c8be032bf0be4c7dc608df5e947
Cobular 5 years ago
parent 85f7c04f76
commit 5ce52976f3
4 changed files with 256 additions and 83 deletions
Show Stats Download Patch File Download Diff File

2
.eslintcache
View File

File diff suppressed because one or more lines are too long

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

@ -1,26 +1,81 @@
@import "~include-media/dist/_include-media.scss"; @import "~include-media/dist/_include-media.scss";
$breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px); $breakpoints: (x-small: 320px, small: 660px, medium: 900px, large: 1300px, x-large: 1560px);
#project-grid { // Override Sass min()
display: grid; @function min($numbers...) {
@return m#{i}n(#{$numbers});
}
// Override Sass max()
@function max($numbers...) {
@return m#{a}x(#{$numbers});
}
#project-grid {
margin: 10px; margin: 10px;
background: #FFD43B; background: #FFD43B;
border-radius: 5px; border-radius: 5px;
//padding: 10px;
@include media("<=x-small") {
.GridSizer, .OneByOne, .FourByOne {
width: 100%;
}
}
@include media(">x-small", "<small") {
.GridSizer, .OneByOne {
width: 49%;
}
.FourByOne {
width: 100%;
}
}
@include media(">=small", "<medium") {
.GridSizer, .OneByOne {
width: 32%;
}
.FourByOne {
width: 95%;
}
}
@include media(">=medium", "<large") {
.GridSizer, .OneByOne {
width: 24.5%;
}
.FourByOne {
width: 73%;
}
}
@include media(">=large", "<x-large") {
.GridSizer, .OneByOne {
max-width: 300px;
width: 19.5%;
}
.FourByOne {
width: 79.5%;
max-width: 1200px;
}
}
@include media(">=x-large") {
.GridSizer, .OneByOne {
width: 300px;
}
.FourByOne {
width: 1200px;
}
}
//@include media(">phone") {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 5px;
justify-items: stretch;
align-items: stretch;
//}
} }
.OneByOneGridElement { .OneByOne {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: available; width: available;
@ -36,7 +91,7 @@ $breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px);
} }
} }
.FourByOneGridElement { .FourByOne {
grid-column: span 2; grid-column: span 2;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

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

@ -1,87 +1,172 @@
import "./ProjectGrid.scss"; import "./ProjectGrid.scss";
import Masonry from "masonry-layout"; import Masonry from "masonry-layout";
import {useEffect} from "react";
type GridElementImageProps = {
image_url: string;
image_alt: string;
title: string;
text: string;
};
type GridElementProps = { type GridElementProps = {
image_url: string; image_url: string;
image_alt: string; image_alt: string;
text: string; title: string;
text: string;
};
const OneWide = ({title, text}: GridElementProps) => {
return (
<div className={"OneByOne GridElement"}>
<div className={"title"}>
<h2>{title}</h2>
</div>
<div className={"description"}>
<p>{text}</p>
</div>
</div>
);
}; };
const OneByOneGridElement = ({ const OneWidePic = ({
image_url, image_url,
image_alt, image_alt,
text, title,
}: GridElementProps) => { text,
return ( }: GridElementImageProps) => {
<div className={"OneByOneGridElement"}> return (
<div className={"image"}> <div className={"OneByOne GridElement"}>
<img src={image_url} alt={image_alt} /> <div className={"image"}>
</div> <img src={image_url} alt={image_alt}/>
<div className={"description"}> </div>
<p>{text}</p> <div className={"description"}>
</div> <h2>{title}</h2>
</div> <p>{text}</p>
); </div>
</div>
);
}; };
const FourByOneGridElement = ({ const FourByOneGridElement = ({
image_url, image_url,
image_alt, image_alt,
text, title,
}: GridElementProps) => { text,
return ( }: GridElementImageProps) => {
<div className={"FourByOneGridElement"}> return (
<div className={"image"}> <div className={"FourByOne GridElement"}>
<img src={image_url} alt={image_alt} /> <div className={"image"}>
</div> <img src={image_url} alt={image_alt}/>
<div className={"description"}> </div>
<p>{text}</p> <div className={"description"}>
</div> <h2>{title}</h2>
</div>
); <p>{text}</p>
</div>
</div>
);
}; };
export const ProjectGrid = () => { export const ProjectGrid = () => {
useEffect(() => {
var elem = document.querySelector("#project-grid");
// @ts-ignore
var msnry = new Masonry(elem, {
itemSelector: ".GridElement",
gutter: 5,
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."
}
/>
return ( <OneWidePic
<div id={"project-grid"}> image_url={"http://jakecover.me/images/codedaysd.png"}
<OneByOneGridElement image_alt={"CodeDay San Diego Logo"}
image_url={"http://jakecover.me/images/codedaysd.png"} title={"CodeDay"}
image_alt={"CodeDay San Diego Logo"} 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." }
} />
/> <OneWidePic
<OneByOneGridElement image_url={"http://jakecover.me/images/codedaysd.png"}
image_url={"http://jakecover.me/images/codedaysd.png"} image_alt={"CodeDay San Diego Logo"}
image_alt={"CodeDay San Diego Logo"} 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."
} }
/> />
<OneByOneGridElement <OneWidePic
image_url={"http://jakecover.me/images/codedaysd.png"} image_url={"http://jakecover.me/images/codedaysd.png"}
image_alt={"CodeDay San Diego Logo"} image_alt={"CodeDay San Diego Logo"}
text={ title={"CodeDay"}
"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." 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."
/> }
<OneByOneGridElement />
image_url={"http://jakecover.me/images/codedaysd.png"} <OneWidePic
image_alt={"CodeDay San Diego Logo"} image_url={"http://jakecover.me/images/codedaysd.png"}
text={ image_alt={"CodeDay San Diego Logo"}
"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." 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"} </div>
text={ </div>
"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." );
}
/>
</div>
);
}; };

33
src/cusotmHooks.ts
Unescape Escape View File

@ -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;
}
Write Preview
Loading…
Cancel
Save