Move gatsby data to top level
This commit is contained in:
Chuck Dries
54
src/pages/404.js
Normal file
54
src/pages/404.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import * as React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
|
||||
// styles
|
||||
const pageStyles = {
|
||||
color: '#232129',
|
||||
padding: '96px',
|
||||
fontFamily: '-apple-system, Roboto, sans-serif, serif',
|
||||
};
|
||||
const headingStyles = {
|
||||
marginTop: 0,
|
||||
marginBottom: 64,
|
||||
maxWidth: 320,
|
||||
};
|
||||
|
||||
const paragraphStyles = {
|
||||
marginBottom: 48,
|
||||
};
|
||||
const codeStyles = {
|
||||
color: '#8A6534',
|
||||
padding: 4,
|
||||
backgroundColor: '#FFF4DB',
|
||||
fontSize: '1.25rem',
|
||||
borderRadius: 4,
|
||||
};
|
||||
|
||||
// markup
|
||||
const NotFoundPage = () => {
|
||||
return (
|
||||
<main style={pageStyles}>
|
||||
<title>Not found</title>
|
||||
<h1 style={headingStyles}>Page not found</h1>
|
||||
<p style={paragraphStyles}>
|
||||
Sorry{' '}
|
||||
<span aria-label="Pensive emoji" role="img">
|
||||
😔
|
||||
</span>{' '}
|
||||
we couldn’t find what you were looking for.
|
||||
<br />
|
||||
{process.env.NODE_ENV === 'development' ? (
|
||||
<>
|
||||
<br />
|
||||
Try creating a page in <code style={codeStyles}>src/pages/</code>.
|
||||
<br />
|
||||
</>
|
||||
) : null}
|
||||
<br />
|
||||
<Link to="/">Go home</Link>.
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFoundPage;
|
||||
10
src/pages/asdf-resume.mdx
Normal file
10
src/pages/asdf-resume.mdx
Normal file
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Charles Dries Resume
|
||||
---
|
||||
|
||||
import ResumeLayout from '../components/resume/ResumeLayout'
|
||||
export default ResumeLayout
|
||||
|
||||
# Hello, World!
|
||||
|
||||
<h2>{props.pageContext.frontmatter.title}</h2>
|
||||
130
src/pages/index.js
Normal file
130
src/pages/index.js
Normal file
@@ -0,0 +1,130 @@
|
||||
import * as React from 'react';
|
||||
import { Link, graphql } from 'gatsby';
|
||||
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
|
||||
import { getVibrantToHelmetSafeBodyStyle, getVibrant } from '../utils';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { take } from 'ramda';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import { HeroA } from '../components/IndexComponents';
|
||||
|
||||
// TODO: better text colors in situations of low contrast
|
||||
|
||||
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 images = React.useMemo(() => edges.map((edge) => edge.node), [edges]);
|
||||
const image = React.useMemo(() => {
|
||||
if (!isClient) {
|
||||
return images[0];
|
||||
}
|
||||
const lastThreeImages = JSON.parse(localStorage.getItem('lastHeros')) || [];
|
||||
const imageIndex = getDifferentRand(images.length, lastThreeImages);
|
||||
localStorage.setItem('lastHeros', JSON.stringify(take(3, [imageIndex, ...lastThreeImages])));
|
||||
return images[imageIndex];
|
||||
}, [images, isClient]);
|
||||
const vibrant = getVibrant(image);
|
||||
React.useEffect(() => {
|
||||
if (!isClient) {
|
||||
setIsClient(true);
|
||||
}
|
||||
}, [isClient]);
|
||||
return (<>
|
||||
<Helmet>
|
||||
<title>Chuck Dries</title>
|
||||
<body
|
||||
className={classnames(isClient ? 'bg-vibrant-dark' : '')}
|
||||
style={getVibrantToHelmetSafeBodyStyle(vibrant)}
|
||||
/>
|
||||
</Helmet>
|
||||
<main
|
||||
className="font-serif sm:block md:grid hero"
|
||||
>
|
||||
{isClient ?
|
||||
<GatsbyImage
|
||||
alt=""
|
||||
className={classnames(
|
||||
'md:h-screen sm:h-two-thirds-vw',
|
||||
)}
|
||||
image={getImage(image)}
|
||||
loading="eager"
|
||||
style={{
|
||||
gridArea: '1/1',
|
||||
}} />
|
||||
// 67vw = 1/1.49253731 = 1/aspect ratio of my camera lol
|
||||
: <div className="md:h-screen sm:h-two-thirds-vw" style={{gridArea: '1/1' }}></div> }
|
||||
<div className="relative grid place-items-center" style={{gridArea: '1/1'}}>
|
||||
<div className="m-2 flex flex-col items-end">
|
||||
<section className={classnames('rounded-xl py-5', isClient && ' bg-vibrant-dark-75')}>
|
||||
<div className="mx-auto px-5">
|
||||
<h1 className={classnames('font-black text-6xl', isClient && 'text-vibrant-light')}>Chuck Dries</h1>
|
||||
<h2 className={classnames('italic text-2xl', isClient && 'text-vibrant')}>Full stack software engineer & hobbyist photographer</h2>
|
||||
<ul className={classnames(isClient && 'text-muted-light')}>
|
||||
<li>Software Developer, <span className="italic">Axosoft</span></li>
|
||||
<li><HeroA className="ml-0" href="mailto:chuck@chuckdries.com" isClient={isClient}>chuck@chuckdries.com</HeroA>/<span className="ml-1">602.618.0414</span></li>
|
||||
<li>
|
||||
<HeroA className="ml-0" href="http://github.com/chuckdries" isClient={isClient}>Github</HeroA>/
|
||||
<HeroA href="https://www.linkedin.com/in/chuckdries/" isClient={isClient}>LinkedIn</HeroA>/
|
||||
<HeroA href="https://devpost.com/chuckdries" isClient={isClient}>Devpost</HeroA>/
|
||||
<HeroA href="/CharlesDriesResumeCurrent.pdf" isClient={isClient}>Resume [pdf]</HeroA>/
|
||||
<HeroA href="https://medium.com/@chuckdries" isClient={isClient}>Medium (blog)</HeroA>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<Link
|
||||
className={classnames(
|
||||
'hover:underline inline-block p-2 px-4 my-2 text-lg rounded-md border-2 arrow-right-after font-bold font-serif',
|
||||
isClient && 'text-muted-dark bg-muted-light border-muted-light')}
|
||||
to="/photogallery"
|
||||
>
|
||||
Photo Gallery</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
{
|
||||
allFile(
|
||||
filter: {
|
||||
sourceInstanceName: {eq: "gallery"},
|
||||
# base: {nin: ["DSC01699.jpg", "DSC02981.jpg", "_DSC4155.jpg", "DSC02538.jpg", "DSC05851.jpg"]}
|
||||
# no vertical images
|
||||
childrenImageSharp: {elemMatch: {fluid: {aspectRatio: {gte: 1.4}}}}
|
||||
}
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
relativePath
|
||||
base
|
||||
childImageSharp {
|
||||
gatsbyImageData(
|
||||
layout: FULL_WIDTH
|
||||
placeholder: NONE
|
||||
breakpoints: [750, 1080, 1366, 1920, 2560]
|
||||
)
|
||||
fields {
|
||||
imageMeta {
|
||||
vibrant {
|
||||
...VibrantColors
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default IndexPage;
|
||||
80
src/pages/photogallery.js
Normal file
80
src/pages/photogallery.js
Normal file
@@ -0,0 +1,80 @@
|
||||
import * as React from 'react';
|
||||
import { graphql } from 'gatsby';
|
||||
import { Link } from 'gatsby';
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
import MasonryGallery from '../components/MasonryGallery';
|
||||
|
||||
// TODO: caption and title more images
|
||||
// TODO: more images
|
||||
|
||||
const GalleryPage = ({ data }) => {
|
||||
const images = React.useMemo(() =>
|
||||
data.allFile.edges
|
||||
.map(edge => edge.node, [data])
|
||||
, [data]);
|
||||
|
||||
return (<>
|
||||
<Helmet>
|
||||
<title>Photo Gallery | Chuck Dries</title>
|
||||
<body className="bg-black text-white" />
|
||||
</Helmet>
|
||||
<div className="bg-black min-h-screen 2xl:container">
|
||||
<Link className="hover:underline hover:text-blue-200 text-blue-300 arrow-left-before" to="/">home</Link>
|
||||
<h1 className="text-5xl mt-2 ml-4 font-serif font-black z-10 relative">Photo Gallery</h1>
|
||||
<div className="mx-auto">
|
||||
<MasonryGallery
|
||||
images={images}
|
||||
itemsPerRow={{
|
||||
sm: 2,
|
||||
md: 2,
|
||||
lg: 3,
|
||||
xl: 3,
|
||||
'2xl': 4,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query GalleryPageQuery {
|
||||
allFile(filter: {
|
||||
sourceInstanceName: { eq: "gallery" }}
|
||||
sort: {order: DESC, fields: childrenImageSharp___fields___imageMeta___dateTaken}
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
relativePath,
|
||||
base,
|
||||
childImageSharp{
|
||||
fluid {
|
||||
aspectRatio
|
||||
},
|
||||
gatsbyImageData(
|
||||
layout: CONSTRAINED,
|
||||
height: 550
|
||||
)
|
||||
fields {
|
||||
imageMeta {
|
||||
dateTaken
|
||||
iptc {
|
||||
# caption
|
||||
object_name
|
||||
}
|
||||
# exif {
|
||||
# FNumber
|
||||
# ExposureTime
|
||||
# ShutterSpeedValue
|
||||
# ISO
|
||||
# }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
export default GalleryPage;
|
||||
Reference in New Issue
Block a user