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

171
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 =
JSON.parse(localStorage.getItem("lastHeros")) || [];
if (env === "production") {
try { try {
// eslint-disable-next-line // eslint-disable-next-line
posthog.capture('[shuffle image]', { currentImage: currentImage?.base }); posthog.capture("[shuffle image]", {
window.plausible('Shuffle', {props: { currentImage: currentImage?.base }}); currentImage: currentImage?.base,
} catch (e) {/* do nothing */} });
window.plausible("Shuffle", {
props: { currentImage: currentImage?.base },
});
} catch (e) {
/* do nothing */
}
} }
const index = getDifferentRand(images.length, lastThreeImages); const index = getDifferentRand(images.length, lastThreeImages);
localStorage.setItem('lastHeros', JSON.stringify(take(3, [index, ...lastThreeImages]))); localStorage.setItem(
"lastHeros",
JSON.stringify(take(3, [index, ...lastThreeImages]))
);
setImageIndex(index); setImageIndex(index);
}, [images.length]); },
[images.length]
);
// pick random image on page hydration // pick random image on page hydration
React.useEffect(() => { React.useEffect(() => {
@ -54,7 +76,7 @@ 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; return;
@ -63,7 +85,7 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
return; return;
} }
case 'ArrowLeft': { case "ArrowLeft": {
if (imageIndex === 0) { if (imageIndex === 0) {
setImageIndex(images.length - 1); setImageIndex(images.length - 1);
return; return;
@ -73,52 +95,73 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
} }
} }
}; };
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> <Helmet>
<title>Chuck Dries</title> <title>Chuck Dries</title>
<body <body
className={classnames(isClient ? 'bg-vibrant-dark' : '')} className={classnames(isClient ? "bg-vibrant-dark" : "")}
style={getVibrantToHelmetSafeBodyStyle(vibrant)} style={getVibrantToHelmetSafeBodyStyle(vibrant)}
/> />
</Helmet> </Helmet>
{/* WIP: ipad portrait hits md breakpoint, looks bad */} {/* WIP: ipad portrait hits md breakpoint, looks bad */}
<main <main
className={classnames('font-serif hero', ar > 1 || !isClient className={classnames(
? 'landscape:grid portrait:flex portrait:flex-col' : 'portrait:grid landscape:flex landscape:flex-row-reverse')} "font-serif hero",
ar > 1 || !isClient
? "landscape:grid portrait:flex portrait:flex-col"
: "portrait:grid landscape:flex landscape:flex-row-reverse"
)}
> >
{isClient ? {isClient ? (
<GatsbyImage <GatsbyImage
alt="" alt=""
className={classnames( className={classnames(
ar > 1 || !isClient ? 'landscape:h-screen portrait:h-two-thirds-vw' : 'h-screen portrait:w-full landscape:w-1/2', ar > 1 || !isClient
? "landscape:h-screen portrait:h-two-thirds-vw"
: "h-screen portrait:w-full landscape:w-1/2"
)} )}
image={getImage(image)} image={getImage(image)}
loading="eager" loading="eager"
style={{ style={{
gridArea: '1/1', gridArea: "1/1",
}} /> }}
/>
) : (
// 67vw = 1/1.49253731 = 1/aspect ratio of my camera lol // 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="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('relative grid', ar <= 1 ? 'place-items-end landscape:place-items-center' : 'place-items-end')} style={{gridArea: '1/1'}}> */}
<div <div
className={classnames('flex flex-col items-center justify-between', ar > 1 || !isClient ? 'portrait:items-center' : 'landscape:justify-center')} className={classnames(
style={{gridArea: '1/1'}} "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? */} {/* 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}}> <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"> <ul className="flex justify-between">
<li>gallery</li>
<li>
gallery
</li>
<li>resume</li> <li>github</li> <li>devpost</li> <li>contact</li> <li>resume</li> <li>github</li> <li>devpost</li> <li>contact</li>
</ul> </ul>
</nav> </nav>
@ -159,20 +202,39 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
</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
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>
<div <div
className={classnames( className={classnames(
ar > 1 && 'landscape:shadow-lg', ar > 1 && "landscape:shadow-lg",
'mb-4 inline-block', isClient && "mb-4 inline-block",
'bg-vibrant-dark blurred-or-opaque-bg-1' isClient && "bg-vibrant-dark blurred-or-opaque-bg-1"
)} )}
> >
<div <div
// className="mx-auto filter drop-shadow" // className="mx-auto filter drop-shadow"
className={classnames('mx-auto filter drop-shadow items-end', ar > 1 || !isClient ? '' : '')} className={classnames(
"mx-auto filter drop-shadow items-end",
ar > 1 || !isClient ? "" : ""
)}
> >
<div className="flex-auto"> <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> <h2
className={classnames(
"p-3",
isClient && "text-vibrant-light"
)}
style={{ fontSize: "max(1vw, 20px)" }}
>
Full Stack Software Engineer &amp; Hobbyist Photographer
</h2>
</div> </div>
{/* {<div className="border-t-2 border-muted-light mt-2 mr-2 mb-1" style={{width: 30}}></div>} */} {/* {<div className="border-t-2 border-muted-light mt-2 mr-2 mb-1" style={{width: 30}}></div>} */}
@ -187,22 +249,21 @@ 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> </div>
</main> </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 {
@ -228,7 +289,7 @@ export const query = graphql`
} }
} }
} }
} }
`; `;
export default IndexPage; export default IndexPage;