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

hero image on landing page

Browse Source
This commit is contained in:
Chuck Dries 2021-06-15 06:04:10 -07:00
parent 7fd15704b8
commit 769a18fdb7
No known key found for this signature in database
GPG Key ID: 4E6B9B2DCEC64BA9
2 changed files with 50 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
gatsby/src/pages/index.js
View File

@ -1,18 +1,31 @@
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);
import { Link } from 'gatsby';
import { StaticImage } from 'gatsby-plugin-image';
const IndexPage = () => {
return (
<main className="font-serif text-white">
<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 ">
<main className="font-serif text-white sm:block lg:grid">
<StaticImage
style={{
gridArea: '1/1',
maxHeight: '90vh',
// height: '100vh',
}}
layout='fullWidth'
alt=''
src='../../data/gallery/_DSC4949.jpg'
/>
<div className='relative' style={{gridArea: '1/1'}}>
<div
className="lg:inline-block sm:relative lg:absolute m-2 flex flex-col items-end"
style={{
right: 0,
}}
>
<section className='bg-black rounded-xl py-6'>
<div className="mx-auto px-6">
<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 &amp; VR</h2>
<h2 className="italic text-blue-300 text-2xl">Full stack software engineer &amp; hobbyist photographer</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>
@ -27,74 +40,12 @@ const IndexPage = ({ data }) => {
</ul>
</div>
</section>
<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>
);
})}
<Link className='text-black hover:underline font-sans inline-block p-3 my-2 rounded-md bg-gray-300 border-2 arrow-after font-bold border-gray-400' to='/photogallery'>
Photography</Link>
</div>
</div>
</section>
</main>
);
};
export const query = graphql`
query HomePageGallery {
allFile(filter: {
sourceInstanceName: { eq: "gallery" }}
sort: {order: DESC, fields: childrenImageSharp___fields___imageMeta___dateTaken}
) {
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;

8
gatsby/src/styles/global.css
View File

@ -43,3 +43,11 @@ h3 {
a {
@apply text-blue-600;
}
.arrow-after:after {
content: "\279C";
margin-left: 3px;
transform: translate(0px);
display: inline-block;
transition: all .2s;
}