chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

run prettier

Browse Source
This commit is contained in:
Chuck Dries
2021-07-12 18:54:08 -07:00
parent 5df4c2baf4
commit d8655904fa
31 changed files with 1183 additions and 917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/breakpoints.js
View File

@@ -1,4 +1,4 @@
import preval from 'babel-plugin-preval/macro';
import preval from "babel-plugin-preval/macro";
const themeBreakpoints = preval`
const R = require('ramda')
const resolveConfig = require('tailwindcss/resolveConfig');
@@ -7,4 +7,4 @@ const {theme} = resolveConfig(tailwindConfig);
module.exports = R.map(size => parseInt(size, 10), theme.screens);
`;
export default themeBreakpoints;
export default themeBreakpoints;

336
src/components/GalleryImage/GalleryImage.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { graphql, navigate, Link } from 'gatsby';
import React from "react";
import { graphql, navigate, Link } from "gatsby";
import {
getAspectRatio,
getMeta,
@@ -8,19 +8,21 @@ import {
getVibrant,
getVibrantToHelmetSafeBodyStyle,
hasName,
} from '../../utils';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { Helmet } from 'react-helmet';
import classnames from 'classnames';
import posthog from 'posthog-js';
import MetadataItem from './MetadataItem';
} from "../../utils";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { Helmet } from "react-helmet";
import classnames from "classnames";
import posthog from "posthog-js";
import MetadataItem from "./MetadataItem";
const logKeyShortcut = (keyCode) => {
try {
// eslint-disable-next-line
posthog.capture('[key shortcut]', { keyCode });
window.plausible('KeyShortcut', {props: { keyCode }});
} catch (e) {/* do nothing */}
posthog.capture("[key shortcut]", { keyCode });
window.plausible("KeyShortcut", { props: { keyCode } });
} catch (e) {
/* do nothing */
}
};
const GalleryImage = ({ data, pageContext }) => {
@@ -29,32 +31,31 @@ const GalleryImage = ({ data, pageContext }) => {
React.useEffect(() => {
const keyListener = (e) => {
switch (e.code) {
case 'ArrowRight': {
logKeyShortcut(e.code);
if (pageContext.nextImage) {
navigate(`/photogallery/${pageContext.nextImage}/`);
case "ArrowRight": {
logKeyShortcut(e.code);
if (pageContext.nextImage) {
navigate(`/photogallery/${pageContext.nextImage}/`);
}
return;
}
return;
}
case 'ArrowLeft': {
logKeyShortcut(e.code);
if (pageContext.prevImage) {
navigate(`/photogallery/${pageContext.prevImage}/`);
case "ArrowLeft": {
logKeyShortcut(e.code);
if (pageContext.prevImage) {
navigate(`/photogallery/${pageContext.prevImage}/`);
}
return;
}
case "Escape":
case "KeyG": {
logKeyShortcut(e.code);
navigate("/photogallery/");
}
return;
}
case 'Escape':
case 'KeyG': {
logKeyShortcut(e.code);
navigate('/photogallery/');
}
}
};
document.addEventListener('keydown', keyListener);
document.addEventListener("keydown", keyListener);
return () => {
document.removeEventListener('keydown', keyListener);
document.removeEventListener("keydown", keyListener);
};
}, [pageContext]);
@@ -62,128 +63,193 @@ const GalleryImage = ({ data, pageContext }) => {
const meta = getMeta(image);
let locationString;
if (meta.iptc.city || meta.iptc.province_or_state) {
const location = [meta.iptc.city, meta.iptc.province_or_state].filter(Boolean);
locationString = location.join(', ');
const location = [meta.iptc.city, meta.iptc.province_or_state].filter(
Boolean
);
locationString = location.join(", ");
}
const vibrant = getVibrant(image, true);
const orientationClasses = ar > 1 ? 'flex-col mx-auto' : 'portrait:mx-auto landscape:mx-5 landscape:flex-row-reverse portrait:flex-col';
const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]);
const orientationClasses =
ar > 1
? "flex-col mx-auto"
: "portrait:mx-auto landscape:mx-5 landscape:flex-row-reverse portrait:flex-col";
const shutterSpeed = React.useMemo(
() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0),
[meta]
);
const dateTaken = React.useMemo(() => new Date(meta.dateTaken), [meta]);
return (<>
<Helmet>
<title>{name} - Gallery | Chuck Dries</title>
<body
className="text-vibrant-light bg-vibrant-dark"
style={getVibrantToHelmetSafeBodyStyle(vibrant)}
/>
</Helmet>
<div className="min-h-screen flex flex-col justify-between">
<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 <span className="bg-gray-300 text-black">esc</span></Link>
{pageContext.prevImage && <Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
to={`/photogallery/${pageContext.prevImage}/`}
>previous <span className="bg-gray-300 text-black">&#11104;</span></Link>}
{pageContext.nextImage && <Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
to={`/photogallery/${pageContext.nextImage}/`}
>next <span className="bg-gray-300 text-black">&#11106;</span></Link>}
</nav>
<div className={classnames('flex', orientationClasses)}>
<div className="flex-grow-0">
<GatsbyImage
alt={name}
className=""
image={getImage(image)}
key={image.base}
loading="eager"
objectFit="contain"
style={{
maxWidth: `calc(max(90vh, 500px) * ${ar})`,
maxHeight: '90vh',
// minHeight: '500px',
}} />
</div>
<div className={classnames(
'flex-shrink-0 mx-2 flex flex-row portrait:items-end', ar <= 1
? 'pt-5 flex-col flex-auto text-right'
: 'portrait:pt-5 portrait:flex-col portrait:text-right'
)}>
<div className="flex-auto mr-2">
<p className="text-muted-light font-mono text-sm m-0 mt-1">{image.base}</p>
{hasName(image) && <h1 className="text-4xl mt-0 font-serif">{name}</h1>}
<p className="landscape:mr-2">{meta.iptc.caption}</p>
return (
<>
<Helmet>
<title>{name} - Gallery | Chuck Dries</title>
<body
className="text-vibrant-light bg-vibrant-dark"
style={getVibrantToHelmetSafeBodyStyle(vibrant)}
/>
</Helmet>
<div className="min-h-screen flex flex-col justify-between">
<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 <span className="bg-gray-300 text-black">esc</span>
</Link>
{pageContext.prevImage && (
<Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
to={`/photogallery/${pageContext.prevImage}/`}
>
previous <span className="bg-gray-300 text-black">&#11104;</span>
</Link>
)}
{pageContext.nextImage && (
<Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
to={`/photogallery/${pageContext.nextImage}/`}
>
next <span className="bg-gray-300 text-black">&#11106;</span>
</Link>
)}
</nav>
<div className={classnames("flex", orientationClasses)}>
<div className="flex-grow-0">
<GatsbyImage
alt={name}
className=""
image={getImage(image)}
key={image.base}
loading="eager"
objectFit="contain"
style={{
maxWidth: `calc(max(90vh, 500px) * ${ar})`,
maxHeight: "90vh",
// minHeight: '500px',
}}
/>
</div>
<div
className={classnames(
"flex-shrink-0 mx-2 flex flex-row portrait:items-end",
ar <= 1
? "pt-5 flex-col flex-auto text-right"
: "portrait:pt-5 portrait:flex-col portrait:text-right"
)}
>
<div className="flex-auto mr-2">
<p className="text-muted-light font-mono text-sm m-0 mt-1">
{image.base}
</p>
{hasName(image) && (
<h1 className="text-4xl mt-0 font-serif">{name}</h1>
)}
<p className="landscape:mr-2">{meta.iptc.caption}</p>
</div>
{
<div
className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1"
style={{ width: 30 }}
></div>
}
<MetadataItem
aspectRatio={ar}
data={dateTaken.toLocaleDateString()}
icon="calendar-sharp"
title="date taken"
/>
<MetadataItem
aspectRatio={ar}
data={locationString}
icon="location-sharp"
title="location"
/>
<MetadataItem
aspectRatio={ar}
data={shutterSpeed}
icon="stopwatch-sharp"
title="shutter speed"
/>
<MetadataItem
aspectRatio={ar}
data={`f/${meta.exif.FNumber}`}
icon="aperture-sharp"
title="aperture"
/>
<MetadataItem
aspectRatio={ar}
data={meta.exif.ISO}
icon="film-outline"
title="ISO"
/>
</div>
{<div className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1" style={{width: 30}}></div>}
<MetadataItem aspectRatio={ar} data={dateTaken.toLocaleDateString()} icon="calendar-sharp" title="date taken"/>
<MetadataItem aspectRatio={ar} data={locationString} icon="location-sharp" title="location"/>
<MetadataItem aspectRatio={ar} data={shutterSpeed} icon="stopwatch-sharp" title="shutter speed" />
<MetadataItem aspectRatio={ar} data={`f/${meta.exif.FNumber}`} icon="aperture-sharp" title="aperture" />
<MetadataItem aspectRatio={ar} data={meta.exif.ISO} icon="film-outline" title="ISO" />
</div>
<div></div>
</div>
<div></div>
</div>
</>);
</>
);
};
export const query = graphql`
query GalleryImage($imageFilename: String) {
allFile(filter: {sourceInstanceName: {eq: "gallery"}, base: {eq: $imageFilename}}) {
edges {
node {
base
childImageSharp{
fluid {
aspectRatio
allFile(
filter: {
sourceInstanceName: { eq: "gallery" }
base: { eq: $imageFilename }
}
) {
edges {
node {
base
childImageSharp {
fluid {
aspectRatio
}
gatsbyImageData(
layout: CONSTRAINED
# placeholder: BLURRED
placeholder: DOMINANT_COLOR
# placeholder: TRACED_SVG
height: 2160
)
}
gatsbyImageData(
layout: CONSTRAINED
# placeholder: BLURRED
placeholder: DOMINANT_COLOR
# placeholder: TRACED_SVG
height: 2160
)
}
fields {
imageMeta {
dateTaken
iptc {
caption
object_name
keywords
city
province_or_state
}
exif {
FNumber
ExposureTime
ISO
}
vibrant {
...VibrantColors
fields {
imageMeta {
dateTaken
iptc {
caption
object_name
keywords
city
province_or_state
}
exif {
FNumber
ExposureTime
ISO
}
vibrant {
...VibrantColors
}
}
}
}
}
}
}
}
`;
export default GalleryImage;

37
src/components/GalleryImage/MetadataItem.js
View File

@@ -1,21 +1,20 @@
import classNames from 'classnames';
import React from 'react';
import classNames from "classnames";
import React from "react";
const MetadataItem = ({
aspectRatio,
icon,
data,
title,
}) => data ? (
<div className={classNames('flex items-baseline ml-2 text-lg',
aspectRatio <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
title={title}
>
<span className="icon-offset mr-1">
<ion-icon name={icon}></ion-icon>
</span>
<span className="mr-1">{data}</span>
</div>
) : null;
const MetadataItem = ({ aspectRatio, icon, data, title }) =>
data ? (
<div
className={classNames(
"flex items-baseline ml-2 text-lg",
aspectRatio <= 1 ? "flex-row-reverse" : "portrait:flex-row-reverse"
)}
title={title}
>
<span className="icon-offset mr-1">
<ion-icon name={icon}></ion-icon>
</span>
<span className="mr-1">{data}</span>
</div>
) : null;
export default MetadataItem;
export default MetadataItem;

16
src/components/Index/HeroLink.js
View File

@@ -1,5 +1,5 @@
import * as React from 'react';
import classnames from 'classnames';
import * as React from "react";
import classnames from "classnames";
export const HeroA = ({
href,
@@ -9,8 +9,14 @@ export const HeroA = ({
...linkProps
}) => (
<a
className={classnames('mx-2 underline', isClient && 'text-muted-light hover:text-vibrant-light', className)}
className={classnames(
"mx-2 underline",
isClient && "text-muted-light hover:text-vibrant-light",
className
)}
href={href}
{...linkProps}
>{children}</a>
);
>
{children}
</a>
);

67
src/components/MasonryGallery.js
View File

@@ -1,33 +1,41 @@
import * as React from 'react';
import { Link } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import * as R from 'ramda';
import { getAspectRatio, getName } from '../utils';
import useBreakpoint from 'use-breakpoint';
import * as React from "react";
import { Link } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import * as R from "ramda";
import { getAspectRatio, getName } from "../utils";
import useBreakpoint from "use-breakpoint";
import themeBreakpoints from '../breakpoints';
import themeBreakpoints from "../breakpoints";
const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
const breakpoints = React.useMemo(() =>
R.pick(R.keys(itemsPerRowByBreakpoint), themeBreakpoints)
, [itemsPerRowByBreakpoint]);
const breakpoints = React.useMemo(
() => R.pick(R.keys(itemsPerRowByBreakpoint), themeBreakpoints),
[itemsPerRowByBreakpoint]
);
const { breakpoint } = useBreakpoint(breakpoints, 'sm');
const { breakpoint } = useBreakpoint(breakpoints, "sm");
const aspectRatios = React.useMemo(() => R.map(getAspectRatio, images), [images]);
const rowAspectRatioSumsByBreakpoint = React.useMemo(() => R.map(R.pipe(
R.splitEvery(R.__, aspectRatios),
R.map(R.sum)
))(itemsPerRowByBreakpoint), [aspectRatios, itemsPerRowByBreakpoint]);
const aspectRatios = React.useMemo(
() => R.map(getAspectRatio, images),
[images]
);
const rowAspectRatioSumsByBreakpoint = React.useMemo(
() =>
R.map(R.pipe(R.splitEvery(R.__, aspectRatios), R.map(R.sum)))(
itemsPerRowByBreakpoint
),
[aspectRatios, itemsPerRowByBreakpoint]
);
const itemsPerRow = itemsPerRowByBreakpoint[breakpoint];
const rowAspectRatioSumsForCurrentBP = rowAspectRatioSumsByBreakpoint[breakpoint];
const rowAspectRatioSumsForCurrentBP =
rowAspectRatioSumsByBreakpoint[breakpoint];
return (
<div
className="w-full"
style={{
position: 'relative',
position: "relative",
}}
// style={{ maxWidth: minWidth }}
>
@@ -36,22 +44,24 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
const rowAspectRatioSum = rowAspectRatioSumsForCurrentBP[rowIndex];
// const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10);
const ar = getAspectRatio(image);
const widthNumber = rowAspectRatioSum === ar
// image is only one in row
? 100 / itemsPerRow
// image is one of several in row
: ((ar / rowAspectRatioSum) * 100).toFixed(5);
const widthNumber =
rowAspectRatioSum === ar
? // image is only one in row
100 / itemsPerRow
: // image is one of several in row
((ar / rowAspectRatioSum) * 100).toFixed(5);
const width = `${widthNumber}%`;
return (
<Link
<Link
className="inline-block"
key={`${image.base}`}
state={{modal: true}}
state={{ modal: true }}
style={{
width,
// marginLeft: '8px',
}} to={`/photogallery/${image.base}`}
}}
to={`/photogallery/${image.base}`}
>
<GatsbyImage
alt={getName(image)}
@@ -63,7 +73,8 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
</Link>
);
})}
</div>);
</div>
);
// return null;
};

17
src/components/resume/ResumeLayout.js
View File

@@ -1,10 +1,10 @@
import * as React from 'react';
import classnames from 'classnames';
import { MDXProvider } from '@mdx-js/react';
import * as React from "react";
import classnames from "classnames";
import { MDXProvider } from "@mdx-js/react";
import '../../styles/resume.css';
import "../../styles/resume.css";
const MyH1 = props => <h1 style={{ color: 'tomato' }} {...props} />;
const MyH1 = (props) => <h1 style={{ color: "tomato" }} {...props} />;
// const MyParagraph = props => (
// <p style={{ fontSize: '18px', lineHeight: 1.6 }} {...props} />
// );
@@ -14,12 +14,13 @@ const components = {
// p: MyParagraph,
};
const ResumeLayout = ({ pageContext, children }) => {
console.log('pc', pageContext);
console.log("pc", pageContext);
return (
<MDXProvider components={components}>
<div className={classnames('font-serif container mx-auto resume')}>{children}</div>
<div className={classnames("font-serif container mx-auto resume")}>
{children}
</div>
</MDXProvider>
);
};

4
src/fragments.js
View File

@@ -1,4 +1,4 @@
import { graphql } from 'gatsby';
import { graphql } from "gatsby";
export const VibrantColorsFragment = graphql`
fragment VibrantColors on FileFieldsImageMetaVibrant {
@@ -9,4 +9,4 @@ export const VibrantColorsFragment = graphql`
Vibrant
Muted
}
`;
`;

32
src/html.js
View File

@@ -1,7 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import React from "react";
import PropTypes from "prop-types";
const env = process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || 'development';
const env =
process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development";
export default function HTML(props) {
return (
@@ -9,25 +10,40 @@ export default function HTML(props) {
<head>
<meta charSet="utf-8" />
<meta content="ie=edge" httpEquiv="x-ua-compatible" />
<meta content="Chuck Dries: Full Stack Software Engineer and Photographer" name="description" />
<meta
content="Chuck Dries: Full Stack Software Engineer and Photographer"
name="description"
/>
<meta
content="width=device-width, initial-scale=1, shrink-to-fit=no"
name="viewport"
/>
{props.headComponents}
{env === 'production' && <script async data-domain="chuckdries.com" defer src="https://analytics.chuckdries.com/js/plausible.js"></script>}
{env === "production" && (
<script
async
data-domain="chuckdries.com"
defer
src="https://analytics.chuckdries.com/js/plausible.js"
></script>
)}
{/* eslint-disable-next-line */}
{env === 'production' && <script>{`window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }`}</script>}
{env === "production" && (
<script>{`window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }`}</script>
)}
</head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<div
dangerouslySetInnerHTML={{ __html: props.body }}
id="___gatsby"
key={'body'}
key={"body"}
/>
{props.postBodyComponents}
<script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js" type="module"></script>
<script
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
type="module"
></script>
</body>
</html>
);

22
src/pages/404.js
View File

@@ -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>.

4
src/pages/asdf-resume.mdx
View File

@@ -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!

418
src/pages/index.js
View File

@@ -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 &amp; 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 &amp; 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;

142
src/pages/photogallery.js
View File

@@ -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;

6
src/styles/global.css
View File

@@ -1,6 +1,6 @@
/* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap'); */
/* black, bold, regular */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap");
@tailwind base;
@tailwind components;
@@ -30,7 +30,7 @@
scroll-snap-align: start;
}
.scroll-padding-6 {
scroll-padding: theme('spacing.6');
scroll-padding: theme("spacing.6");
}
@variants responsive {
.h-two-thirds-vw {
@@ -63,7 +63,7 @@ a {
margin-left: 3px;
transform: translate(0px);
display: inline-block;
transition: all .2s;
transition: all 0.2s;
}
.arrow-left-before:before {

1
src/styles/resume.css
View File

@@ -3,4 +3,3 @@
@apply text-3xl font-bold;
}
}

33
src/utils.js
View File

@@ -2,31 +2,36 @@
export const getMeta = (image) => image.fields.imageMeta;
export const getName = (image) => getMeta(image)?.iptc.object_name || image.base;
export const getName = (image) =>
getMeta(image)?.iptc.object_name || image.base;
// some pleasing default colors for SSR and initial hydration
export const getVibrant = (image) => getMeta(image)?.vibrant;
export const hasName = (image) => Boolean(getMeta(image)?.iptc.object_name);
export const getAspectRatio = (image) => image.childImageSharp.fluid.aspectRatio;
export const getAspectRatio = (image) =>
image.childImageSharp.fluid.aspectRatio;
export const getRgba = (palette, alpha) => `rgba(${palette[0]}, ${palette[1]}, ${palette[2]}, ${alpha || 1})`;
export const getRgba = (palette, alpha) =>
`rgba(${palette[0]}, ${palette[1]}, ${palette[2]}, ${alpha || 1})`;
// work around SSR bug in react-helmet
export const getVibrantToHelmetSafeBodyStyle = (vibrant) => {
const style = {
'--muted': vibrant.Muted,
'--dark-muted': vibrant.DarkMuted,
'--light-muted': vibrant.LightMuted,
'--vibrant': vibrant.Vibrant,
'--dark-vibrant': vibrant.DarkVibrant,
'--light-vibrant': vibrant.LightVibrant,
"--muted": vibrant.Muted,
"--dark-muted": vibrant.DarkMuted,
"--light-muted": vibrant.LightMuted,
"--vibrant": vibrant.Vibrant,
"--dark-vibrant": vibrant.DarkVibrant,
"--light-vibrant": vibrant.LightVibrant,
};
if (typeof window === 'undefined') {
if (typeof window === "undefined") {
return style;
}
return Object.keys(style).map(key => `${(key)}: ${style[key]}`).join(';');
return Object.keys(style)
.map((key) => `${key}: ${style[key]}`)
.join(";");
};
const gcd = (a, b) => {
@@ -40,12 +45,12 @@ const gcd = (a, b) => {
export const getShutterFractionFromExposureTime = (exposureTime) => {
let fraction = exposureTime;
const len = fraction.toString().length - 2;
let denominator = Math.pow(10, len);
let numerator = fraction * denominator;
const divisor = gcd(numerator, denominator);
numerator /= divisor;
denominator /= divisor;
return `${numerator}/${denominator}`;