107 lines
3.9 KiB
JavaScript
107 lines
3.9 KiB
JavaScript
import * as React from 'react'
|
|
import { graphql, Link } from 'gatsby'
|
|
import { GatsbyImage, getImage } from 'gatsby-plugin-image'
|
|
|
|
// markup
|
|
const IndexPage = ({ data }) => {
|
|
const images = React.useMemo(() => data.allFile.edges.map(edge => edge.node), [data])
|
|
console.log('images', images)
|
|
|
|
return (
|
|
<main className="font-serif">
|
|
<section style={{ height: '50vh' }} className="m-2 py-6 intro flex flex-col justify-center flex-auto bg-black rounded-xl">
|
|
<div className="mx-auto px-4 md:px-2 w-full md:w-8 ">
|
|
<h1 className="italic font-normal text-5xl text-pink-500">Chuck Dries</h1>
|
|
<h2 className="italic text-blue-300 text-2xl">Software Engineer in web & VR</h2>
|
|
<ul>
|
|
<li>Software Developer, <span className="text-gray-300 italic">Axosoft</span></li>
|
|
<li><a className="hover:text-pink-400 underline" href="mailto:chuck@chuckdries.com">chuck@chuckdries.com</a> / <span>602.618.0414</span></li>
|
|
<li>
|
|
<a className="mr-1 hover:text-pink-400 underline" href="http://github.com/chuckdries">Github</a>/
|
|
<a className="mx-1 hover:text-pink-400 underline" href="https://www.linkedin.com/in/chuckdries/">LinkedIn</a>/
|
|
<a className="mx-1 hover:text-pink-400 underline" href="https://devpost.com/chuckdries">Devpost</a>/
|
|
<a className="mx-1 hover:text-pink-400 underline" href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a>/
|
|
<a className="mx-1 hover:text-pink-400 underline" href="https://medium.com/@chuckdries">Medium (blog)</a>
|
|
{/* <a href="https://pgp.mit.edu/pks/lookup?op=get&search=0x2BD9D0871DB5A518">Public Key</a> */}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
{/* <h1 >
|
|
Congratulations
|
|
<br />
|
|
<span >— you just made a Gatsby site! </span>
|
|
<span role="img" aria-label="Party popper emojis">
|
|
🎉🎉🎉
|
|
</span>
|
|
</h1> */}
|
|
<section className="mt-0 m-2 max-w-full flex flex-col shadow-md bg-black text-gray-200 py-2 rounded-xl">
|
|
<h2 className="ml-6 text-2xl mb-2"><Link to='/photogallery'>Photography</Link></h2>
|
|
<div className="gallery gallery flex-auto flex overflow-x-scroll w-full scroll-snap-x scroll-padding-6 ">
|
|
{images.map(image => {
|
|
const name = image.childImageSharp.fields.imageMeta.iptc.object_name || image.base
|
|
console.log('name', name)
|
|
// const file = data.allFile
|
|
// console.log(fileName)
|
|
// return <></>
|
|
return (
|
|
// <div style={{ maxHeight: '500px' }} className="flex-shrink-0 mr-4 scroll-snap-start bg-red-300">
|
|
// .
|
|
<GatsbyImage
|
|
className="gallery-img h-full flex-shrink-0 scroll-snap-start mr-4"
|
|
style={{
|
|
// maxHeight: "800px"
|
|
// width: '400px',
|
|
// height: '100%'
|
|
}}
|
|
key={image.base}
|
|
image={getImage(image)}
|
|
alt={name} />
|
|
// </div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
export const query = graphql`
|
|
query HomePageGallery {
|
|
allFile(filter: {
|
|
sourceInstanceName: { eq: "gallery" }}) {
|
|
edges {
|
|
node {
|
|
relativePath,
|
|
base,
|
|
childImageSharp{
|
|
gatsbyImageData(
|
|
layout: CONSTRAINED,
|
|
placeholder: DOMINANT_COLOR,
|
|
# width: 400
|
|
# height: 900
|
|
height: 600
|
|
)
|
|
fields {
|
|
imageMeta {
|
|
dateTaken
|
|
iptc {
|
|
caption
|
|
object_name
|
|
}
|
|
exif {
|
|
FNumber
|
|
ExposureTime
|
|
ShutterSpeedValue
|
|
ISO
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}`;
|
|
|
|
export default IndexPage
|