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'; // TODO: better text colors in situations of low contrast 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); return getDifferentRand(range, lastNs, iterations + 1); } return n; }; 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); 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 }); } 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(() => { if (!isClient) { setIsClient(true); shuffleImage(image); } }, [isClient, imageIndex, image, shuffleImage]); React.useEffect(() => { const keyListener = (e) => { switch (e.code) { case 'ArrowRight': { if (imageIndex === images.length - 1) { setImageIndex(0); return; } setImageIndex(imageIndex + 1); return; } case 'ArrowLeft': { if (imageIndex === 0) { setImageIndex(images.length - 1); return; } setImageIndex(imageIndex - 1); return; } } }; document.addEventListener('keydown', keyListener); return () => { document.removeEventListener('keydown', keyListener); }; }, [imageIndex, images.length]); const vibrant = getVibrant(image); const ar = getAspectRatio(image); return (<> Chuck Dries
1 ? 'flex md:grid flex-col' : 'grid md:flex md:flex-row-reverse')} > {isClient ? 1 ? 'md:h-screen h-two-thirds-vw' : 'h-screen w-full md:w-1/2', )} image={getImage(image)} loading="eager" style={{ gridArea: '1/1', }} /> // 67vw = 1/1.49253731 = 1/aspect ratio of my camera lol :
}

Chuck Dries

Full stack software engineer & hobbyist photographer

{
}
  • Software Engineer, 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: ["DSC06517.jpg"]} # childrenImageSharp: {elemMatch: {fluid: {aspectRatio: {lte: 1.3}}}} } ) { edges { node { relativePath base childImageSharp { fluid { aspectRatio } gatsbyImageData( layout: FULL_WIDTH placeholder: NONE breakpoints: [750, 1080, 1366, 1920, 2560] ) fields { imageMeta { vibrant { ...VibrantColors } } } } } } } } `; export default IndexPage;