diff --git a/gatsby/src/components/IndexComponents.js b/gatsby/src/components/IndexComponents.js index 6a270d9..4f88ad6 100644 --- a/gatsby/src/components/IndexComponents.js +++ b/gatsby/src/components/IndexComponents.js @@ -5,10 +5,11 @@ export const HeroA = ({ href, children, className, + isClient, ...linkProps }) => ( {children} diff --git a/gatsby/src/pages/index.js b/gatsby/src/pages/index.js index 8f12ea8..aa89beb 100644 --- a/gatsby/src/pages/index.js +++ b/gatsby/src/pages/index.js @@ -4,16 +4,28 @@ import { GatsbyImage, getImage } from 'gatsby-plugin-image'; import { getVibrantToHelmetSafeBodyStyle, getVibrant } from '../utils'; import { Helmet } from 'react-helmet'; import { HeroA } from '../components/IndexComponents'; +import classnames from 'classnames'; -const IndexPage = ({ data }) => { - const images = data.allFile.edges.map((edge) => edge.node); - const image = React.useRef(images[Math.floor(Math.random() * images.length)]).current; - const vibrant = getVibrant(image); - console.log('image', image); +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]; + } + return images[Math.floor(Math.random() * images.length)]; + }, [images, isClient]); + const vibrant = getVibrant(image, isClient); + console.log('vibrant', vibrant); + React.useEffect(() => { + if (!isClient) { + setIsClient(true); + } + }, [isClient]); return (<> @@ -22,34 +34,46 @@ const IndexPage = ({ data }) => { >
-
+
-

Chuck Dries

-

Full stack software engineer & hobbyist photographer

-
    +

    Chuck Dries

    +

    Full stack software engineer & hobbyist photographer

    +
    • Software Developer, Axosoft
      • -
    • chuck@chuckdries.com/602.618.0414
      • +
    • chuck@chuckdries.com/602.618.0414
    • - Github/ - LinkedIn/ - Devpost/ - Resume [pdf]/ - Medium (blog) + Github/ + LinkedIn/ + Devpost/ + Resume [pdf]/ + Medium (blog) {/* Public Key */}
- + Photography
@@ -63,7 +87,7 @@ export const query = graphql` allFile( filter: { sourceInstanceName: {eq: "gallery"}, - base: {nin: ["DSC01699.jpg", "DSC02981.jpg", "_DSC4155.jpg"]} + base: {nin: ["DSC01699.jpg", "DSC02981.jpg", "_DSC4155.jpg", "DSC02538.jpg", "DSC05851.jpg"]} } ) { edges { @@ -74,8 +98,8 @@ export const query = graphql` gatsbyImageData( layout: FULL_WIDTH # placeholder: BLURRED - placeholder: TRACED_SVG - # placeholder: NONE + # placeholder: TRACED_SVG + placeholder: NONE # blurredOptions: {width: 50} breakpoints: [750, 1080, 1366, 1920, 2560] ) diff --git a/gatsby/src/styles/global.css b/gatsby/src/styles/global.css index 709e2c6..80555ce 100644 --- a/gatsby/src/styles/global.css +++ b/gatsby/src/styles/global.css @@ -8,6 +8,7 @@ * { box-sizing: border-box; + transition: color .2s, background .2s; } @layer utilities { .scroll-snap-none { diff --git a/gatsby/src/utils.js b/gatsby/src/utils.js index 4106c02..067e9e2 100644 --- a/gatsby/src/utils.js +++ b/gatsby/src/utils.js @@ -4,7 +4,15 @@ export const getMeta = (image) => image.childImageSharp.fields.imageMeta; export const getName = (image) => getMeta(image)?.iptc.object_name || image.base; -export const getVibrant = (image) => getMeta(image)?.vibrant; +// some pleasing default colors for SSR and initial hydration +export const getVibrant = (image, isClient) => isClient ? getMeta(image)?.vibrant : { + 'DarkMuted': [ 63, 64, 73 ], + 'DarkVibrant': [ 52, 75, 116 ], + 'LightMuted': [ 211, 194, 181 ], + 'LightVibrant': [ 224, 183, 140 ], + 'Muted': [ 155, 123, 114 ], + 'Vibrant': [ 226, 116, 81 ], +}; export const hasName = (image) => Boolean(getMeta(image)?.iptc.object_name);