import * as React from 'react';
import { Link, graphql } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { getVibrantToHelmetSafeBodyStyle, getVibrant } from '../utils';
import { Helmet } from 'react-helmet';
import { take } from 'ramda';
import classnames from 'classnames';
import { HeroA } from '../components/IndexComponents';
// TODO: better text colors in situations of low contrast
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);
return getDifferentRand(range, lastNs, iterations + 1);
}
return n;
};
const IndexPage = ({ data: { allFile: { edges } } }) => {
const [isClient, setIsClient] = React.useState(false);
const images = React.useMemo(() => edges.map((edge) => edge.node), [edges]);
const image = React.useMemo(() => {
if (!isClient) {
return images[0];
}
const lastThreeImages = JSON.parse(localStorage.getItem('lastHeros')) || [];
const imageIndex = getDifferentRand(images.length, lastThreeImages);
localStorage.setItem('lastHeros', JSON.stringify(take(3, [imageIndex, ...lastThreeImages])));
return images[imageIndex];
}, [images, isClient]);
const vibrant = getVibrant(image);
React.useEffect(() => {
if (!isClient) {
setIsClient(true);
}
}, [isClient]);
return (<>
Chuck Dries
{isClient ?
// 67vw = 1/1.49253731 = 1/aspect ratio of my camera lol
: }
Chuck Dries
Full stack software engineer & hobbyist photographer
- Software Developer, Axosoft
- chuck@chuckdries.com/602.618.0414
-
Github/
LinkedIn/
Devpost/
Resume [pdf]/
Medium (blog)
Photography Gallery
);
};
export const query = graphql`
{
allFile(
filter: {
sourceInstanceName: {eq: "gallery"},
# images that don't work well
base: {nin: ["DSC00340.jpg"]}
childrenImageSharp: {elemMatch: {fluid: {aspectRatio: {gte: 1.4}}}}
}
) {
edges {
node {
relativePath
base
childImageSharp {
gatsbyImageData(
layout: FULL_WIDTH
placeholder: NONE
breakpoints: [750, 1080, 1366, 1920, 2560]
)
fields {
imageMeta {
vibrant {
...VibrantColors
}
}
}
}
}
}
}
}
`;
export default IndexPage;