run prettier
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
import * as React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import * as React from "react";
|
||||
import { Link } from "gatsby";
|
||||
|
||||
// styles
|
||||
const pageStyles = {
|
||||
color: '#232129',
|
||||
padding: '96px',
|
||||
fontFamily: '-apple-system, Roboto, sans-serif, serif',
|
||||
color: "#232129",
|
||||
padding: "96px",
|
||||
fontFamily: "-apple-system, Roboto, sans-serif, serif",
|
||||
};
|
||||
const headingStyles = {
|
||||
marginTop: 0,
|
||||
@@ -17,10 +17,10 @@ const paragraphStyles = {
|
||||
marginBottom: 48,
|
||||
};
|
||||
const codeStyles = {
|
||||
color: '#8A6534',
|
||||
color: "#8A6534",
|
||||
padding: 4,
|
||||
backgroundColor: '#FFF4DB',
|
||||
fontSize: '1.25rem',
|
||||
backgroundColor: "#FFF4DB",
|
||||
fontSize: "1.25rem",
|
||||
borderRadius: 4,
|
||||
};
|
||||
|
||||
@@ -31,13 +31,13 @@ const NotFoundPage = () => {
|
||||
<title>Not found</title>
|
||||
<h1 style={headingStyles}>Page not found</h1>
|
||||
<p style={paragraphStyles}>
|
||||
Sorry{' '}
|
||||
Sorry{" "}
|
||||
<span aria-label="Pensive emoji" role="img">
|
||||
😔
|
||||
</span>{' '}
|
||||
</span>{" "}
|
||||
we couldn’t find what you were looking for.
|
||||
<br />
|
||||
{process.env.NODE_ENV === 'development' ? (
|
||||
{process.env.NODE_ENV === "development" ? (
|
||||
<>
|
||||
<br />
|
||||
Try creating a page in <code style={codeStyles}>src/pages/</code>.
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
title: Charles Dries Resume
|
||||
---
|
||||
|
||||
import ResumeLayout from '../components/resume/ResumeLayout'
|
||||
export default ResumeLayout
|
||||
import ResumeLayout from "../components/resume/ResumeLayout";
|
||||
export default ResumeLayout;
|
||||
|
||||
# Hello, World!
|
||||
|
||||
|
||||
@@ -1,47 +1,69 @@
|
||||
import * as React from 'react';
|
||||
import { Link, graphql } from 'gatsby';
|
||||
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { take } from 'ramda';
|
||||
import classnames from 'classnames';
|
||||
import posthog from 'posthog-js';
|
||||
import * as React from "react";
|
||||
import { Link, graphql } from "gatsby";
|
||||
import { GatsbyImage, getImage } from "gatsby-plugin-image";
|
||||
import { Helmet } from "react-helmet";
|
||||
import { take } from "ramda";
|
||||
import classnames from "classnames";
|
||||
import posthog from "posthog-js";
|
||||
|
||||
import { getVibrantToHelmetSafeBodyStyle, getVibrant, getAspectRatio } from '../utils';
|
||||
import { HeroA } from '../components/Index/HeroLink';
|
||||
import {
|
||||
getVibrantToHelmetSafeBodyStyle,
|
||||
getVibrant,
|
||||
getAspectRatio,
|
||||
} from "../utils";
|
||||
import { HeroA } from "../components/Index/HeroLink";
|
||||
|
||||
const env = process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || 'development';
|
||||
const env =
|
||||
process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development";
|
||||
|
||||
const getDifferentRand = (range, lastNs, iterations = 0) => {
|
||||
const n = Math.floor(Math.random() * range);
|
||||
if (lastNs.findIndex(x => x === n) > -1 && iterations < 5) {
|
||||
console.log('got dupe, trying again', n);
|
||||
if (lastNs.findIndex((x) => x === n) > -1 && iterations < 5) {
|
||||
console.log("got dupe, trying again", n);
|
||||
return getDifferentRand(range, lastNs, iterations + 1);
|
||||
}
|
||||
return n;
|
||||
};
|
||||
|
||||
const IndexPage = ({ data: { allFile: { edges } } }) => {
|
||||
const IndexPage = ({
|
||||
data: {
|
||||
allFile: { edges },
|
||||
},
|
||||
}) => {
|
||||
const [isClient, setIsClient] = React.useState(false);
|
||||
const [imageIndex, setImageIndex] = React.useState(0);
|
||||
const images = React.useMemo(() => edges.map((edge) => edge.node), [edges]);
|
||||
const image = React.useMemo(() => {
|
||||
console.log('ii', imageIndex);
|
||||
console.log("ii", imageIndex);
|
||||
return images[imageIndex];
|
||||
}, [images, imageIndex]);
|
||||
|
||||
const shuffleImage = React.useCallback((currentImage) => {
|
||||
const lastThreeImages = JSON.parse(localStorage.getItem('lastHeros')) || [];
|
||||
if (env === 'production') {
|
||||
try {
|
||||
// eslint-disable-next-line
|
||||
posthog.capture('[shuffle image]', { currentImage: currentImage?.base });
|
||||
window.plausible('Shuffle', {props: { currentImage: currentImage?.base }});
|
||||
} catch (e) {/* do nothing */}
|
||||
}
|
||||
const index = getDifferentRand(images.length, lastThreeImages);
|
||||
localStorage.setItem('lastHeros', JSON.stringify(take(3, [index, ...lastThreeImages])));
|
||||
setImageIndex(index);
|
||||
}, [images.length]);
|
||||
const shuffleImage = React.useCallback(
|
||||
(currentImage) => {
|
||||
const lastThreeImages =
|
||||
JSON.parse(localStorage.getItem("lastHeros")) || [];
|
||||
if (env === "production") {
|
||||
try {
|
||||
// eslint-disable-next-line
|
||||
posthog.capture("[shuffle image]", {
|
||||
currentImage: currentImage?.base,
|
||||
});
|
||||
window.plausible("Shuffle", {
|
||||
props: { currentImage: currentImage?.base },
|
||||
});
|
||||
} catch (e) {
|
||||
/* do nothing */
|
||||
}
|
||||
}
|
||||
const index = getDifferentRand(images.length, lastThreeImages);
|
||||
localStorage.setItem(
|
||||
"lastHeros",
|
||||
JSON.stringify(take(3, [index, ...lastThreeImages]))
|
||||
);
|
||||
setImageIndex(index);
|
||||
},
|
||||
[images.length]
|
||||
);
|
||||
|
||||
// pick random image on page hydration
|
||||
React.useEffect(() => {
|
||||
@@ -54,165 +76,257 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
|
||||
React.useEffect(() => {
|
||||
const keyListener = (e) => {
|
||||
switch (e.code) {
|
||||
case 'ArrowRight': {
|
||||
if (imageIndex === images.length - 1) {
|
||||
setImageIndex(0);
|
||||
case "ArrowRight": {
|
||||
if (imageIndex === images.length - 1) {
|
||||
setImageIndex(0);
|
||||
return;
|
||||
}
|
||||
setImageIndex(imageIndex + 1);
|
||||
return;
|
||||
}
|
||||
setImageIndex(imageIndex + 1);
|
||||
return;
|
||||
}
|
||||
|
||||
case 'ArrowLeft': {
|
||||
if (imageIndex === 0) {
|
||||
setImageIndex(images.length - 1);
|
||||
case "ArrowLeft": {
|
||||
if (imageIndex === 0) {
|
||||
setImageIndex(images.length - 1);
|
||||
return;
|
||||
}
|
||||
setImageIndex(imageIndex - 1);
|
||||
return;
|
||||
}
|
||||
setImageIndex(imageIndex - 1);
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', keyListener);
|
||||
document.addEventListener("keydown", keyListener);
|
||||
return () => {
|
||||
document.removeEventListener('keydown', keyListener);
|
||||
document.removeEventListener("keydown", keyListener);
|
||||
};
|
||||
}, [imageIndex, images.length]);
|
||||
|
||||
const vibrant = getVibrant(image);
|
||||
const ar = getAspectRatio(image);
|
||||
return (<>
|
||||
<Helmet>
|
||||
<title>Chuck Dries</title>
|
||||
<body
|
||||
className={classnames(isClient ? 'bg-vibrant-dark' : '')}
|
||||
style={getVibrantToHelmetSafeBodyStyle(vibrant)}
|
||||
/>
|
||||
</Helmet>
|
||||
{/* WIP: ipad portrait hits md breakpoint, looks bad */}
|
||||
<main
|
||||
className={classnames('font-serif hero', ar > 1 || !isClient
|
||||
? 'landscape:grid portrait:flex portrait:flex-col' : 'portrait:grid landscape:flex landscape:flex-row-reverse')}
|
||||
>
|
||||
{isClient ?
|
||||
<GatsbyImage
|
||||
alt=""
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Chuck Dries</title>
|
||||
<body
|
||||
className={classnames(isClient ? "bg-vibrant-dark" : "")}
|
||||
style={getVibrantToHelmetSafeBodyStyle(vibrant)}
|
||||
/>
|
||||
</Helmet>
|
||||
{/* WIP: ipad portrait hits md breakpoint, looks bad */}
|
||||
<main
|
||||
className={classnames(
|
||||
"font-serif hero",
|
||||
ar > 1 || !isClient
|
||||
? "landscape:grid portrait:flex portrait:flex-col"
|
||||
: "portrait:grid landscape:flex landscape:flex-row-reverse"
|
||||
)}
|
||||
>
|
||||
{isClient ? (
|
||||
<GatsbyImage
|
||||
alt=""
|
||||
className={classnames(
|
||||
ar > 1 || !isClient
|
||||
? "landscape:h-screen portrait:h-two-thirds-vw"
|
||||
: "h-screen portrait:w-full landscape:w-1/2"
|
||||
)}
|
||||
image={getImage(image)}
|
||||
loading="eager"
|
||||
style={{
|
||||
gridArea: "1/1",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
// 67vw = 1/1.49253731 = 1/aspect ratio of my camera lol
|
||||
<div
|
||||
className="landscape:h-screen portrait:h-two-thirds-vw w-full"
|
||||
style={{ gridArea: "1/1" }}
|
||||
></div>
|
||||
)}
|
||||
<div
|
||||
className={classnames(
|
||||
ar > 1 || !isClient ? 'landscape:h-screen portrait:h-two-thirds-vw' : 'h-screen portrait:w-full landscape:w-1/2',
|
||||
"relative grid",
|
||||
ar <= 1
|
||||
? "place-items-end landscape:place-items-center"
|
||||
: "place-items-end"
|
||||
)}
|
||||
image={getImage(image)}
|
||||
loading="eager"
|
||||
style={{
|
||||
gridArea: '1/1',
|
||||
}} />
|
||||
// 67vw = 1/1.49253731 = 1/aspect ratio of my camera lol
|
||||
: <div className="landscape:h-screen portrait:h-two-thirds-vw w-full" style={{gridArea: '1/1' }}></div> }
|
||||
<div className={classnames('relative grid', ar <= 1 ? 'place-items-end landscape:place-items-center' : 'place-items-end')} style={{gridArea: '1/1'}}>
|
||||
<div className="">
|
||||
<div className="flex mx-6 justify-end">
|
||||
<div className="flex my-2 items-center flex-col">
|
||||
style={{ gridArea: "1/1" }}
|
||||
>
|
||||
<div className="">
|
||||
<div className="flex mx-6 justify-end">
|
||||
<div className="flex my-2 items-center flex-col">
|
||||
<Link
|
||||
className={classnames(
|
||||
"hover:underline inline-block px-1 my-1 mr-2 text-md rounded-md border-2",
|
||||
isClient &&
|
||||
"text-muted-dark bg-muted-light hover:border-muted border-muted-dark"
|
||||
)}
|
||||
// style={{top: '5px'}}
|
||||
id="image-link"
|
||||
title="view image details"
|
||||
to={`/photogallery/${image.base}/`}
|
||||
>
|
||||
<span className="icon-offset">
|
||||
<ion-icon name="image"></ion-icon>
|
||||
</span>
|
||||
</Link>
|
||||
<button
|
||||
className={classnames(
|
||||
"hover:underline inline-block px-1 my-1 mr-2 text-md rounded-md border-2",
|
||||
isClient &&
|
||||
"text-muted-dark bg-muted-light hover:border-muted border-muted-dark"
|
||||
)}
|
||||
id="shuffle-button"
|
||||
onClick={() => {
|
||||
shuffleImage(image);
|
||||
}}
|
||||
title="shuffle image"
|
||||
type="button"
|
||||
>
|
||||
<span className="icon-offset">
|
||||
<ion-icon name="shuffle"></ion-icon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<Link
|
||||
className={classnames(
|
||||
'hover:underline inline-block px-1 my-1 mr-2 text-md rounded-md border-2',
|
||||
isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')}
|
||||
// style={{top: '5px'}}
|
||||
id="image-link"
|
||||
title="view image details"
|
||||
to={`/photogallery/${image.base}/`}
|
||||
"hover:underline p-3 px-5 py-4 my-3 text-md sm:text-lg rounded-md border-2 arrow-right-after font-bold font-serif",
|
||||
isClient &&
|
||||
"text-muted-dark bg-muted-light hover:border-muted border-muted-dark"
|
||||
)}
|
||||
id="photogallery-link"
|
||||
to="/photogallery/"
|
||||
>
|
||||
<span className="icon-offset"><ion-icon name="image"></ion-icon></span>
|
||||
Photography Gallery
|
||||
</Link>
|
||||
<button
|
||||
className={classnames(
|
||||
'hover:underline inline-block px-1 my-1 mr-2 text-md rounded-md border-2',
|
||||
isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')}
|
||||
id="shuffle-button"
|
||||
onClick={() => {
|
||||
shuffleImage(image);
|
||||
}}
|
||||
title="shuffle image"
|
||||
type="button"
|
||||
>
|
||||
<span className="icon-offset"><ion-icon name="shuffle"></ion-icon></span>
|
||||
</button>
|
||||
</div>
|
||||
<Link
|
||||
<section
|
||||
className={classnames(
|
||||
'hover:underline p-3 px-5 py-4 my-3 text-md sm:text-lg rounded-md border-2 arrow-right-after font-bold font-serif',
|
||||
isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')}
|
||||
id="photogallery-link"
|
||||
to="/photogallery/"
|
||||
ar > 1 && "landscape:shadow-lg",
|
||||
"md:px-6 px-4 md:py-5 py-3 rounded-l-md mb-4",
|
||||
isClient &&
|
||||
"bg-vibrant-dark bg-opacity-60 backdrop-filter backdrop-blur-xl"
|
||||
)}
|
||||
>
|
||||
Photography Gallery
|
||||
</Link>
|
||||
</div>
|
||||
<section
|
||||
className={classnames(
|
||||
ar > 1 && 'landscape:shadow-lg',
|
||||
'md:px-6 px-4 md:py-5 py-3 rounded-l-md mb-4', isClient &&
|
||||
'bg-vibrant-dark bg-opacity-60 backdrop-filter backdrop-blur-xl'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={classnames('mx-auto filter drop-shadow items-end', ar > 1 || !isClient ? 'landscape:flex' : 'portrait:flex')}
|
||||
>
|
||||
<div className="mr-5 flex-auto">
|
||||
<h1 className={classnames('font-black text-4xl sm:text-5xl md:text-6xl', isClient && 'text-vibrant-light')}>Chuck Dries</h1>
|
||||
<h2 className={classnames('text-xl md:text-2xl', isClient && 'text-vibrant')}>Full Stack Software Engineer & Hobbyist Photographer</h2>
|
||||
<div
|
||||
className={classnames(
|
||||
"mx-auto filter drop-shadow items-end",
|
||||
ar > 1 || !isClient ? "landscape:flex" : "portrait:flex"
|
||||
)}
|
||||
>
|
||||
<div className="mr-5 flex-auto">
|
||||
<h1
|
||||
className={classnames(
|
||||
"font-black text-4xl sm:text-5xl md:text-6xl",
|
||||
isClient && "text-vibrant-light"
|
||||
)}
|
||||
>
|
||||
Chuck Dries
|
||||
</h1>
|
||||
<h2
|
||||
className={classnames(
|
||||
"text-xl md:text-2xl",
|
||||
isClient && "text-vibrant"
|
||||
)}
|
||||
>
|
||||
Full Stack Software Engineer & Hobbyist Photographer
|
||||
</h2>
|
||||
</div>
|
||||
{/* {<div className="border-t-2 border-muted-light mt-2 mr-2 mb-1" style={{width: 30}}></div>} */}
|
||||
|
||||
<ul
|
||||
className={
|
||||
("md:mr-4", classnames(isClient && "text-muted-light"))
|
||||
}
|
||||
>
|
||||
<li>Software Engineer, Axosoft</li>
|
||||
<li>
|
||||
<HeroA
|
||||
className="ml-0"
|
||||
href="mailto:chuck@chuckdries.com"
|
||||
isClient={isClient}
|
||||
>
|
||||
chuck@chuckdries.com
|
||||
</HeroA>
|
||||
/<span className="ml-2">602.618.0414</span>
|
||||
</li>
|
||||
<li>
|
||||
<HeroA
|
||||
className="ml-0"
|
||||
href="http://github.com/chuckdries"
|
||||
isClient={isClient}
|
||||
>
|
||||
Github
|
||||
</HeroA>
|
||||
/
|
||||
<HeroA
|
||||
href="https://www.linkedin.com/in/chuckdries/"
|
||||
isClient={isClient}
|
||||
>
|
||||
LinkedIn
|
||||
</HeroA>
|
||||
/
|
||||
<HeroA
|
||||
href="https://devpost.com/chuckdries"
|
||||
isClient={isClient}
|
||||
>
|
||||
Devpost
|
||||
</HeroA>
|
||||
/
|
||||
<HeroA
|
||||
href="/CharlesDriesResumeCurrent.pdf"
|
||||
isClient={isClient}
|
||||
>
|
||||
Resume [pdf]
|
||||
</HeroA>
|
||||
/
|
||||
<HeroA
|
||||
href="https://medium.com/@chuckdries"
|
||||
isClient={isClient}
|
||||
>
|
||||
Medium (blog)
|
||||
</HeroA>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* {<div className="border-t-2 border-muted-light mt-2 mr-2 mb-1" style={{width: 30}}></div>} */}
|
||||
|
||||
<ul className={'md:mr-4', classnames(isClient && 'text-muted-light')}>
|
||||
<li>Software Engineer, Axosoft</li>
|
||||
<li><HeroA className="ml-0" href="mailto:chuck@chuckdries.com" isClient={isClient}>chuck@chuckdries.com</HeroA>/<span className="ml-2">602.618.0414</span></li>
|
||||
<li>
|
||||
<HeroA className="ml-0" href="http://github.com/chuckdries" isClient={isClient}>Github</HeroA>/
|
||||
<HeroA href="https://www.linkedin.com/in/chuckdries/" isClient={isClient}>LinkedIn</HeroA>/
|
||||
<HeroA href="https://devpost.com/chuckdries" isClient={isClient}>Devpost</HeroA>/
|
||||
<HeroA href="/CharlesDriesResumeCurrent.pdf" isClient={isClient}>Resume [pdf]</HeroA>/
|
||||
<HeroA href="https://medium.com/@chuckdries" isClient={isClient}>Medium (blog)</HeroA>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</>);
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
{
|
||||
allFile(
|
||||
filter: { sourceInstanceName: {eq: "gallery"} }
|
||||
sort: {order: DESC, fields: fields___imageMeta___dateTaken}
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
relativePath
|
||||
base
|
||||
childImageSharp {
|
||||
fluid {
|
||||
aspectRatio
|
||||
{
|
||||
allFile(
|
||||
filter: { sourceInstanceName: { eq: "gallery" } }
|
||||
sort: { order: DESC, fields: fields___imageMeta___dateTaken }
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
relativePath
|
||||
base
|
||||
childImageSharp {
|
||||
fluid {
|
||||
aspectRatio
|
||||
}
|
||||
gatsbyImageData(
|
||||
layout: FULL_WIDTH
|
||||
placeholder: NONE
|
||||
breakpoints: [750, 1080, 1366, 1920, 2560]
|
||||
)
|
||||
}
|
||||
gatsbyImageData(
|
||||
layout: FULL_WIDTH
|
||||
placeholder: NONE
|
||||
breakpoints: [750, 1080, 1366, 1920, 2560]
|
||||
)
|
||||
}
|
||||
fields {
|
||||
imageMeta {
|
||||
vibrant {
|
||||
...VibrantColors
|
||||
fields {
|
||||
imageMeta {
|
||||
vibrant {
|
||||
...VibrantColors
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default IndexPage;
|
||||
|
||||
@@ -1,87 +1,95 @@
|
||||
import * as React from 'react';
|
||||
import { graphql, Link } from 'gatsby';
|
||||
import { navigate } from 'gatsby';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import * as React from "react";
|
||||
import { graphql, Link } from "gatsby";
|
||||
import { navigate } from "gatsby";
|
||||
import { Helmet } from "react-helmet";
|
||||
|
||||
import MasonryGallery from '../components/MasonryGallery';
|
||||
import MasonryGallery from "../components/MasonryGallery";
|
||||
|
||||
// TODO: caption and title more images
|
||||
// TODO: more images
|
||||
|
||||
const GalleryPage = ({ data }) => {
|
||||
const images = React.useMemo(() =>
|
||||
data.allFile.edges
|
||||
.map(edge => edge.node, [data])
|
||||
, [data]);
|
||||
const images = React.useMemo(
|
||||
() => data.allFile.edges.map((edge) => edge.node, [data]),
|
||||
[data]
|
||||
);
|
||||
|
||||
return (<>
|
||||
<Helmet>
|
||||
<title>Photo Gallery | Chuck Dries</title>
|
||||
<body className="bg-black text-white" />
|
||||
</Helmet>
|
||||
<nav className="mt-1 ml-1 text-lg mb-4">
|
||||
<button
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1"
|
||||
onClick={() => navigate(-1)}
|
||||
type="button"
|
||||
>back</button>
|
||||
<Link
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
||||
to="/"
|
||||
>home</Link>
|
||||
<Link
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
||||
to="/photogallery/"
|
||||
>gallery</Link>
|
||||
</nav>
|
||||
<div className="bg-black min-h-screen mx-auto 2xl:container">
|
||||
<h1 className="text-5xl mt-0 ml-5 font-serif font-black z-10 relative">Photo Gallery</h1>
|
||||
<div className="mx-auto">
|
||||
<MasonryGallery
|
||||
images={images}
|
||||
itemsPerRow={{
|
||||
sm: 2,
|
||||
md: 2,
|
||||
lg: 3,
|
||||
xl: 3,
|
||||
'2xl': 4,
|
||||
}}
|
||||
/>
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Photo Gallery | Chuck Dries</title>
|
||||
<body className="bg-black text-white" />
|
||||
</Helmet>
|
||||
<nav className="mt-1 ml-1 text-lg mb-4">
|
||||
<button
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1"
|
||||
onClick={() => navigate(-1)}
|
||||
type="button"
|
||||
>
|
||||
back
|
||||
</button>
|
||||
<Link
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
||||
to="/"
|
||||
>
|
||||
home
|
||||
</Link>
|
||||
<Link
|
||||
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
|
||||
to="/photogallery/"
|
||||
>
|
||||
gallery
|
||||
</Link>
|
||||
</nav>
|
||||
<div className="bg-black min-h-screen mx-auto 2xl:container">
|
||||
<h1 className="text-5xl mt-0 ml-5 font-serif font-black z-10 relative">
|
||||
Photo Gallery
|
||||
</h1>
|
||||
<div className="mx-auto">
|
||||
<MasonryGallery
|
||||
images={images}
|
||||
itemsPerRow={{
|
||||
sm: 2,
|
||||
md: 2,
|
||||
lg: 3,
|
||||
xl: 3,
|
||||
"2xl": 4,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>);
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query GalleryPageQuery {
|
||||
allFile(
|
||||
filter: { sourceInstanceName: { eq: "gallery" } }
|
||||
sort: {order: DESC, fields: fields___imageMeta___dateTaken}
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
relativePath
|
||||
base
|
||||
childImageSharp{
|
||||
fluid {
|
||||
aspectRatio
|
||||
query GalleryPageQuery {
|
||||
allFile(
|
||||
filter: { sourceInstanceName: { eq: "gallery" } }
|
||||
sort: { order: DESC, fields: fields___imageMeta___dateTaken }
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
relativePath
|
||||
base
|
||||
childImageSharp {
|
||||
fluid {
|
||||
aspectRatio
|
||||
}
|
||||
gatsbyImageData(layout: CONSTRAINED, height: 550)
|
||||
}
|
||||
gatsbyImageData(
|
||||
layout: CONSTRAINED
|
||||
height: 550
|
||||
)
|
||||
}
|
||||
fields {
|
||||
imageMeta {
|
||||
dateTaken
|
||||
iptc {
|
||||
object_name
|
||||
fields {
|
||||
imageMeta {
|
||||
dateTaken
|
||||
iptc {
|
||||
object_name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}`;
|
||||
`;
|
||||
|
||||
export default GalleryPage;
|
||||
|
||||
Reference in New Issue
Block a user