try introducing nav?

This commit is contained in:
Chuck Dries 2021-07-12 17:24:28 -07:00
parent dc5bd4b089
commit 3af7dc33bd

View File

@ -109,12 +109,18 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
: <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 <div
className={classnames('flex flex-col items-end justify-center', ar > 1 || !isClient ? 'portrait:items-center' : 'landscape:justify-center')} className={classnames('flex flex-col items-end justify-between', ar > 1 || !isClient ? 'portrait:items-center' : 'landscape:justify-center')}
style={{gridArea: '1/1'}} style={{gridArea: '1/1'}}
> >
<div <nav className="w-screen text-vibrant-dark px-6 p-4" style={{zIndex: 100}}>
className={classnames('flex flex-col items-end', ar > 1 || !isClient ? 'portrait:flex-col-reverse' : 'landscape:flex-col-reverse')} <ul className="flex justify-between">
>
<li>
gallery
</li>
<li>resume</li> <li>github</li> <li>devpost</li> <li>contact</li>
</ul>
</nav>
{/* <div className="flex mx-6 justify-end"> {/* <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
@ -151,8 +157,9 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
Photography Gallery Photography Gallery
</Link> </Link>
</div> */} </div> */}
<div>
<h1 className={classnames('font-black filter drop-shadow', isClient && 'mb-2 mt-0 text-vibrant-light')} style={{fontSize: '120px', lineHeight: '80%'}}>Chuck Dries</h1> <h1 className={classnames('font-black filter drop-shadow', isClient && 'mb-2 mt-0 text-vibrant-light')} style={{fontSize: '120px', lineHeight: '80%'}}>Chuck Dries</h1>
<section <div
className={classnames( className={classnames(
ar > 1 && 'landscape:shadow-lg', ar > 1 && 'landscape:shadow-lg',
'rounded-l-md mb-4', isClient && 'rounded-l-md mb-4', isClient &&
@ -181,9 +188,11 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
</ul> */} </ul> */}
</div> </div>
</section>
</div> </div>
</div> </div>
<div></div>
</div>
</main> </main>
</>); </>);
}; };