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'; 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 }); 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(() => { 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 {/* WIP: ipad portrait hits md breakpoint, looks bad */}
1 || !isClient ? 'landscape:grid portrait:flex portrait:flex-col' : 'portrait:grid landscape:flex landscape:flex-row-reverse')} > {isClient ? 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 :
} {/*
*/}
1 || !isClient ? 'portrait:items-center' : 'landscape:justify-center')} style={{gridArea: '1/1'}} > {/*
Photography Gallery
*/}

Chuck Dries

1 && 'landscape:shadow-lg', 'mb-4 inline-block', isClient && 'bg-vibrant-dark blurred-or-opaque-bg-1' )} >
1 || !isClient ? '' : '')} >

Full Stack Software Engineer & Hobbyist Photographer

{/* {
} */} {/*
  • Software Engineer, Axosoft
  • chuck@chuckdries.com/602.618.0414
  • Github/ LinkedIn/ Devpost/ Resume [pdf]/ Medium (blog)
*/}
); }; export const query = graphql` { 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, 3840] ) } fields { imageMeta { vibrant { ...VibrantColors } } } } } } } `; export default IndexPage;