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";
$breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px);
$breakpoints: (x-small: 320px, small: 660px, medium: 900px, large: 1300px, x-large: 1560px);
#project-grid {
display: grid;
// 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, .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;
flex-direction: column;
width: available;
@ -36,7 +91,7 @@ $breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px);
}
}
.FourByOneGridElement {
.FourByOne {
grid-column: span 2;
display: flex;
flex-direction: row;

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

@ -1,24 +1,47 @@
import "./ProjectGrid.scss";
import Masonry from "masonry-layout";
import {useEffect} from "react";
type GridElementImageProps = {
image_url: string;
image_alt: string;
title: string;
text: string;
};
type GridElementProps = {
image_url: string;
image_alt: string;
title: string;
text: string;
};
const OneByOneGridElement = ({
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 OneWidePic = ({
image_url,
image_alt,
title,
text,
}: GridElementProps) => {
}: GridElementImageProps) => {
return (
<div className={"OneByOneGridElement"}>
<div className={"OneByOne GridElement"}>
<div className={"image"}>
<img src={image_url} alt={image_alt} />
<img src={image_url} alt={image_alt}/>
</div>
<div className={"description"}>
<h2>{title}</h2>
<p>{text}</p>
</div>
</div>
@ -28,14 +51,17 @@ const OneByOneGridElement = ({
const FourByOneGridElement = ({
image_url,
image_alt,
title,
text,
}: GridElementProps) => {
}: GridElementImageProps) => {
return (
<div className={"FourByOneGridElement"}>
<div className={"FourByOne GridElement"}>
<div className={"image"}>
<img src={image_url} alt={image_alt} />
<img src={image_url} alt={image_alt}/>
</div>
<div className={"description"}>
<h2>{title}</h2>
<p>{text}</p>
</div>
</div>
@ -43,34 +69,50 @@ const FourByOneGridElement = ({
};
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"}>
<OneByOneGridElement
<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."
}
/>
<OneByOneGridElement
<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."
}
/>
<OneByOneGridElement
<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."
}
/>
<OneByOneGridElement
<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."
}
@ -78,10 +120,53 @@ export const ProjectGrid = () => {
<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."
}
/>
<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."
}
/>
</div>
</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