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
: <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="">
<div className="flex mx-6 justify-end">
{/* <div className={classnames('relative grid', ar <= 1 ? 'place-items-end landscape:place-items-center' : 'place-items-end')} style={{gridArea: '1/1'}}> */}
<div
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">
<Link
className={classnames(
'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')}
// style={{top: '5px'}}
isClient && 'text-muted-dark bg-muted-light blurred-or-opaque-bg-2 hover:bg-muted border-muted-dark')}
id="image-link"
title="view image details"
to={`/photogallery/${image.base}/`}
@ -125,7 +130,7 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
<button
className={classnames(
'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"
onClick={() => {
shuffleImage(image);
@ -139,30 +144,31 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
<Link
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',
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"
to="/photogallery/"
>
Photography Gallery
</Link>
</div>
</div> */}
<section
className={classnames(
ar > 1 && 'landscape:shadow-lg',
'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
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">
<h1 className={classnames('font-black text-4xl sm:text-5xl md:text-6xl', isClient && 'text-vibrant-light')}>Chuck Dries</h1>
<h2 className={classnames('text-xl md:text-2xl', isClient && 'text-vibrant')}>Full Stack Software Engineer &amp; Hobbyist Photographer</h2>
<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> */}
</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><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>
@ -172,12 +178,12 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
<HeroA href="/CharlesDriesResumeCurrent.pdf" isClient={isClient}>Resume [pdf]</HeroA>/
<HeroA href="https://medium.com/@chuckdries" isClient={isClient}>Medium (blog)</HeroA>
</li>
</ul>
</ul> */}
</div>
</section>
</div>
</div>
</main>
</>);
};
@ -199,7 +205,7 @@ export const query = graphql`
gatsbyImageData(
layout: FULL_WIDTH
placeholder: NONE
breakpoints: [750, 1080, 1366, 1920, 2560]
breakpoints: [750, 1080, 1366, 1920, 2560, 3840]
)
}
fields {

14
src/styles/global.css
View File

@ -32,6 +32,20 @@
.scroll-padding-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 {
.h-two-thirds-vw {
height: 67vw;