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

WIP experimental typography hero

Browse Source
This commit is contained in:
Chuck Dries 2021-07-12 17:04:41 -07:00
parent 7b6e7e72e5
commit 7d21613c43
2 changed files with 36 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/pages/index.js
View File

@ -107,15 +107,20 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
}} /> }} />
// 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 className=""> <div
<div className="flex mx-6 justify-end"> className={classnames('flex flex-col items-end justify-center', ar > 1 || !isClient ? 'portrait:items-center' : 'landscape:justify-center')}
style={{gridArea: '1/1'}}
>
<div
className={classnames('flex flex-col items-end', ar > 1 || !isClient ? 'portrait:flex-col-reverse' : 'landscape:flex-col-reverse')}
>
{/* <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(
'hover:underline inline-block px-1 my-1 mr-2 text-md rounded-md border-2', 'hover:underline inline-block px-1 my-1 mr-2 text-md rounded-md border-2',
isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')} isClient && 'text-muted-dark bg-muted-light blurred-or-opaque-bg-2 hover:bg-muted border-muted-dark')}
// style={{top: '5px'}}
id="image-link" id="image-link"
title="view image details" title="view image details"
to={`/photogallery/${image.base}/`} to={`/photogallery/${image.base}/`}
@ -125,7 +130,7 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
<button <button
className={classnames( className={classnames(
'hover:underline inline-block px-1 my-1 mr-2 text-md rounded-md border-2', 'hover:underline inline-block px-1 my-1 mr-2 text-md rounded-md border-2',
isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')} isClient && 'text-muted-dark bg-muted-light hover:bg-muted border-muted-dark')}
id="shuffle-button" id="shuffle-button"
onClick={() => { onClick={() => {
shuffleImage(image); shuffleImage(image);
@ -139,30 +144,31 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
<Link <Link
className={classnames( className={classnames(
'hover:underline p-3 px-5 py-4 my-3 text-md sm:text-lg rounded-md border-2 arrow-right-after font-bold font-serif', 'hover:underline p-3 px-5 py-4 my-3 text-md sm:text-lg rounded-md border-2 arrow-right-after font-bold font-serif',
isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')} isClient && 'text-muted-dark bg-muted-light bg-opacity-70 border-muted-dark hover:bg-muted')}
id="photogallery-link" id="photogallery-link"
to="/photogallery/" to="/photogallery/"
> >
Photography Gallery Photography Gallery
</Link> </Link>
</div> </div> */}
<section <section
className={classnames( className={classnames(
ar > 1 && 'landscape:shadow-lg', ar > 1 && 'landscape:shadow-lg',
'md:px-6 px-4 md:py-5 py-3 rounded-l-md mb-4', isClient && 'md:px-6 px-4 md:py-5 py-3 rounded-l-md mb-4', isClient &&
'bg-vibrant-dark bg-opacity-60 backdrop-filter backdrop-blur-xl' 'bg-vibrant-dark blurred-or-opaque-bg-1'
)} )}
> >
<div <div
className={classnames('mx-auto filter drop-shadow items-end', ar > 1 || !isClient ? 'landscape:flex' : 'portrait:flex')} // className="mx-auto filter drop-shadow"
className={classnames('mx-auto filter drop-shadow items-end', ar > 1 || !isClient ? 'portrait:flex' : 'portrait:flex')}
> >
<div className="mr-5 flex-auto"> <div className="mr-5 flex-auto">
<h1 className={classnames('font-black text-4xl sm:text-5xl md:text-6xl', isClient && 'text-vibrant-light')}>Chuck Dries</h1> <h1 className={classnames('font-black', isClient && 'text-vibrant-light')} style={{fontSize: '120px'}}>Chuck Dries</h1>
<h2 className={classnames('text-xl md:text-2xl', isClient && 'text-vibrant')}>Full Stack Software Engineer &amp; Hobbyist Photographer</h2> {/* <h2 className={classnames('text-xl md:text-2xl', isClient && 'text-vibrant')}>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>} */}
<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>
@ -172,12 +178,12 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
<HeroA href="/CharlesDriesResumeCurrent.pdf" isClient={isClient}>Resume [pdf]</HeroA>/ <HeroA href="/CharlesDriesResumeCurrent.pdf" isClient={isClient}>Resume [pdf]</HeroA>/
<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>
</section> </section>
</div> </div>
</div> </div>
</main> </main>
</>); </>);
}; };
@ -199,7 +205,7 @@ export const query = graphql`
gatsbyImageData( gatsbyImageData(
layout: FULL_WIDTH layout: FULL_WIDTH
placeholder: NONE placeholder: NONE
breakpoints: [750, 1080, 1366, 1920, 2560] breakpoints: [750, 1080, 1366, 1920, 2560, 3840]
) )
} }
fields { fields {

14
src/styles/global.css
View File

@ -32,6 +32,20 @@
.scroll-padding-6 { .scroll-padding-6 {
scroll-padding: theme('spacing.6'); scroll-padding: theme('spacing.6');
} }
.blurred-or-opaque-bg-1 {
@apply bg-opacity-80;
}
.blurred-or-opaque-bg-2 {
@apply bg-opacity-100;
}
@supports (backdrop-filter: blur(24px)) {
.blurred-or-opaque-bg-1 {
@apply bg-opacity-50 backdrop-filter backdrop-blur-lg;
}
.blurred-or-opaque-bg-2 {
@apply bg-opacity-70 backdrop-filter backdrop-blur;
}
}
@variants responsive { @variants responsive {
.h-two-thirds-vw { .h-two-thirds-vw {
height: 67vw; height: 67vw;