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

run prettier on index to help merge

Browse Source
This commit is contained in:
Chuck Dries 2021-07-16 16:16:17 -07:00
parent 8fc978fadb
commit adb88233ce
1 changed files with 189 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

317
src/pages/index.js
View File

@ -1,47 +1,69 @@
import * as React from 'react'; import * as React from "react";
import { Link, graphql } from 'gatsby'; import { Link, graphql } from "gatsby";
import { GatsbyImage, getImage } from 'gatsby-plugin-image'; import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { Helmet } from 'react-helmet'; import { Helmet } from "react-helmet";
import { take } from 'ramda'; import { take } from "ramda";
import classnames from 'classnames'; import classnames from "classnames";
import posthog from 'posthog-js'; import posthog from "posthog-js";
import { getVibrantToHelmetSafeBodyStyle, getVibrant, getAspectRatio } from '../utils'; import {
import { HeroA } from '../components/Index/HeroLink'; 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 getDifferentRand = (range, lastNs, iterations = 0) => {
const n = Math.floor(Math.random() * range); const n = Math.floor(Math.random() * range);
if (lastNs.findIndex(x => x === n) > -1 && iterations < 5) { if (lastNs.findIndex((x) => x === n) > -1 && iterations < 5) {
console.log('got dupe, trying again', n); console.log("got dupe, trying again", n);
return getDifferentRand(range, lastNs, iterations + 1); return getDifferentRand(range, lastNs, iterations + 1);
} }
return n; return n;
}; };
const IndexPage = ({ data: { allFile: { edges } } }) => { const IndexPage = ({
data: {
allFile: { edges },
},
}) => {
const [isClient, setIsClient] = React.useState(false); const [isClient, setIsClient] = React.useState(false);
const [imageIndex, setImageIndex] = React.useState(0); const [imageIndex, setImageIndex] = React.useState(0);
const images = React.useMemo(() => edges.map((edge) => edge.node), [edges]); const images = React.useMemo(() => edges.map((edge) => edge.node), [edges]);
const image = React.useMemo(() => { const image = React.useMemo(() => {
console.log('ii', imageIndex); console.log("ii", imageIndex);
return images[imageIndex]; return images[imageIndex];
}, [images, imageIndex]); }, [images, imageIndex]);
const shuffleImage = React.useCallback((currentImage) => { const shuffleImage = React.useCallback(
const lastThreeImages = JSON.parse(localStorage.getItem('lastHeros')) || []; (currentImage) => {
if (env === 'production') { const lastThreeImages =
try { JSON.parse(localStorage.getItem("lastHeros")) || [];
// eslint-disable-next-line if (env === "production") {
posthog.capture('[shuffle image]', { currentImage: currentImage?.base }); try {
window.plausible('Shuffle', {props: { currentImage: currentImage?.base }}); // eslint-disable-next-line
} catch (e) {/* do nothing */} posthog.capture("[shuffle image]", {
} currentImage: currentImage?.base,
const index = getDifferentRand(images.length, lastThreeImages); });
localStorage.setItem('lastHeros', JSON.stringify(take(3, [index, ...lastThreeImages]))); window.plausible("Shuffle", {
setImageIndex(index); props: { currentImage: currentImage?.base },
}, [images.length]); });
} 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 // pick random image on page hydration
React.useEffect(() => { React.useEffect(() => {
@ -54,75 +76,96 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
React.useEffect(() => { React.useEffect(() => {
const keyListener = (e) => { const keyListener = (e) => {
switch (e.code) { switch (e.code) {
case 'ArrowRight': { case "ArrowRight": {
if (imageIndex === images.length - 1) { if (imageIndex === images.length - 1) {
setImageIndex(0); setImageIndex(0);
return;
}
setImageIndex(imageIndex + 1);
return; return;
} }
setImageIndex(imageIndex + 1);
return;
}
case 'ArrowLeft': { case "ArrowLeft": {
if (imageIndex === 0) { if (imageIndex === 0) {
setImageIndex(images.length - 1); setImageIndex(images.length - 1);
return;
}
setImageIndex(imageIndex - 1);
return; return;
} }
setImageIndex(imageIndex - 1);
return;
}
} }
}; };
document.addEventListener('keydown', keyListener); document.addEventListener("keydown", keyListener);
return () => { return () => {
document.removeEventListener('keydown', keyListener); document.removeEventListener("keydown", keyListener);
}; };
}, [imageIndex, images.length]); }, [imageIndex, images.length]);
const vibrant = getVibrant(image); const vibrant = getVibrant(image);
const ar = getAspectRatio(image); const ar = getAspectRatio(image);
return (<> return (
<Helmet> <>
<title>Chuck Dries</title> <Helmet>
<body <title>Chuck Dries</title>
className={classnames(isClient ? 'bg-vibrant-dark' : '')} <body
style={getVibrantToHelmetSafeBodyStyle(vibrant)} className={classnames(isClient ? "bg-vibrant-dark" : "")}
/> style={getVibrantToHelmetSafeBodyStyle(vibrant)}
</Helmet> />
{/* WIP: ipad portrait hits md breakpoint, looks bad */} </Helmet>
<main {/* WIP: ipad portrait hits md breakpoint, looks bad */}
className={classnames('font-serif hero', ar > 1 || !isClient <main
? 'landscape:grid portrait:flex portrait:flex-col' : 'portrait:grid landscape:flex landscape:flex-row-reverse')} className={classnames(
> "font-serif hero",
{isClient ? ar > 1 || !isClient
<GatsbyImage ? "landscape:grid portrait:flex portrait:flex-col"
alt="" : "portrait:grid landscape:flex landscape:flex-row-reverse"
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('relative grid', ar <= 1 ? 'place-items-end landscape:place-items-center' : 'place-items-end')} style={{gridArea: '1/1'}}> */}
<div
className={classnames('flex flex-col items-center justify-between', ar > 1 || !isClient ? 'portrait:items-center' : 'landscape:justify-center')}
style={{gridArea: '1/1'}}
> >
{/* CQ change based on sampling of picture? add background? */} {isClient ? (
<nav className={classnames('text-vibrant-dark px-6 p-4', ar > 1 || !isClient ? 'landscape:w-screen' : 'portrait:w-screen')} style={{zIndex: 100}}> <GatsbyImage
<ul className="flex justify-between"> alt=""
className={classnames(
<li> ar > 1 || !isClient
gallery ? "landscape:h-screen portrait:h-two-thirds-vw"
</li> : "h-screen portrait:w-full landscape:w-1/2"
<li>resume</li> <li>github</li> <li>devpost</li> <li>contact</li> )}
</ul> image={getImage(image)}
</nav> loading="eager"
{/* <div className="flex mx-6 justify-end"> 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={classnames(
"flex flex-col items-center justify-between",
ar > 1 || !isClient
? "portrait:items-center"
: "landscape:justify-center"
)}
style={{ gridArea: "1/1" }}
>
{/* CQ change based on sampling of picture? add background? */}
<nav
className={classnames(
"text-vibrant-dark px-6 p-4",
ar > 1 || !isClient ? "landscape:w-screen" : "portrait:w-screen"
)}
style={{ zIndex: 100 }}
>
<ul className="flex justify-between">
<li>gallery</li>
<li>resume</li> <li>github</li> <li>devpost</li> <li>contact</li>
</ul>
</nav>
{/* <div className="flex mx-6 justify-end">
<div className="flex my-2 items-center flex-col"> <div className="flex my-2 items-center flex-col">
<Link <Link
className={classnames( className={classnames(
@ -158,25 +201,44 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
Photography Gallery Photography Gallery
</Link> </Link>
</div> */} </div> */}
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<h1 className={classnames('font-black filter drop-shadow-dark z-20', isClient && 'mb-5 mt-0 text-vibrant-light')} style={{fontSize: 'max(8vw, 100px)', lineHeight: '80%'}}>Chuck Dries</h1> <h1
<div className={classnames(
className={classnames( "font-black filter drop-shadow-dark z-20",
ar > 1 && 'landscape:shadow-lg', isClient && "mb-5 mt-0 text-vibrant-light"
'mb-4 inline-block', isClient && )}
'bg-vibrant-dark blurred-or-opaque-bg-1' style={{ fontSize: "max(8vw, 100px)", lineHeight: "80%" }}
)}
>
<div
// className="mx-auto filter drop-shadow"
className={classnames('mx-auto filter drop-shadow items-end', ar > 1 || !isClient ? '' : '')}
> >
<div className="flex-auto"> Chuck Dries
<h2 className={classnames('p-3', isClient && 'text-vibrant-light')} style={{fontSize: 'max(1vw, 20px)'}}>Full Stack Software Engineer &amp; Hobbyist Photographer</h2> </h1>
</div> <div
{/* {<div className="border-t-2 border-muted-light mt-2 mr-2 mb-1" style={{width: 30}}></div>} */} className={classnames(
ar > 1 && "landscape:shadow-lg",
"mb-4 inline-block",
isClient && "bg-vibrant-dark blurred-or-opaque-bg-1"
)}
>
<div
// className="mx-auto filter drop-shadow"
className={classnames(
"mx-auto filter drop-shadow items-end",
ar > 1 || !isClient ? "" : ""
)}
>
<div className="flex-auto">
<h2
className={classnames(
"p-3",
isClient && "text-vibrant-light"
)}
style={{ fontSize: "max(1vw, 20px)" }}
>
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')}> {/* <ul className={' md:mr-4', classnames(isClient && 'text-muted-light')}>
<li>Software Engineer, Axosoft</li> <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="mailto:chuck@chuckdries.com" isClient={isClient}>chuck@chuckdries.com</HeroA>/<span className="ml-2">602.618.0414</span></li>
<li> <li>
@ -187,48 +249,47 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
<HeroA href="https://medium.com/@chuckdries" isClient={isClient}>Medium (blog)</HeroA> <HeroA href="https://medium.com/@chuckdries" isClient={isClient}>Medium (blog)</HeroA>
</li> </li>
</ul> */} </ul> */}
</div>
</div> </div>
</div> </div>
<div></div>
</div> </div>
<div></div> </main>
</div> </>
);
</main>
</>);
}; };
export const query = graphql` export const query = graphql`
{ {
allFile( allFile(
filter: { sourceInstanceName: {eq: "gallery"} } filter: { sourceInstanceName: { eq: "gallery" } }
sort: {order: DESC, fields: fields___imageMeta___dateTaken} sort: { order: DESC, fields: fields___imageMeta___dateTaken }
) { ) {
edges { edges {
node { node {
relativePath relativePath
base base
childImageSharp { childImageSharp {
fluid { fluid {
aspectRatio aspectRatio
}
gatsbyImageData(
layout: FULL_WIDTH
placeholder: NONE
breakpoints: [750, 1080, 1366, 1920, 2560, 3840]
)
} }
gatsbyImageData( fields {
layout: FULL_WIDTH imageMeta {
placeholder: NONE vibrant {
breakpoints: [750, 1080, 1366, 1920, 2560, 3840] ...VibrantColors
) }
}
fields {
imageMeta {
vibrant {
...VibrantColors
} }
} }
} }
} }
} }
} }
}
`; `;
export default IndexPage; export default IndexPage;