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

Non-centered hero

Browse Source
This commit is contained in:
Chuck Dries 2021-07-11 22:42:13 -07:00
parent b04bef50a9
commit 7b6e7e72e5
1 changed files with 32 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/pages/index.js
View File

@ -107,33 +107,9 @@ 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="relative grid place-items-center" 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="m-0 sm:m-3 flex flex-col items-end"> <div className="">
<section <div className="flex mx-6 justify-end">
className={classnames(
'rounded-xl md:px-6 px-4 md:py-5 py-3', isClient &&
'border-2 border-vibrant-light bg-vibrant-dark bg-opacity-60 backdrop-filter backdrop-blur-lg'
)}
>
<div className="mx-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>
{<div className="border-t-2 border-muted-light mt-2 mr-2 mb-1" style={{width: 30}}></div>}
<ul className={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>
<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>
<div className="flex mr-2">
<div className="flex my-2 items-center flex-col"> <div className="flex my-2 items-center flex-col">
<Link <Link
className={classnames( className={classnames(
@ -170,6 +146,35 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
Photography Gallery Photography Gallery
</Link> </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'
)}
>
<div
className={classnames('mx-auto filter drop-shadow items-end', ar > 1 || !isClient ? 'landscape: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>
</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')}>
<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="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>
</div> </div>
</div> </div>