hook up nav links
This commit is contained in:
parent
9db0296b04
commit
0ddc194481
@ -25,6 +25,55 @@ const getDifferentRand = (range, lastNs, iterations = 0) => {
|
|||||||
return n;
|
return n;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const ImageButtons = ({ isClient, image, shuffleImage }) => (
|
||||||
|
<div className="flex mx-6 justify-end">
|
||||||
|
<div className="flex my-2 items-center flex-col">
|
||||||
|
<Link
|
||||||
|
className={classnames(
|
||||||
|
"z-20 hover:underline inline-block px-1 my-1 mr-2 text-md rounded-md border-2",
|
||||||
|
isClient &&
|
||||||
|
"text-muted-dark bg-muted-light hover:bg-muted border-muted-dark"
|
||||||
|
)}
|
||||||
|
id="image-link"
|
||||||
|
title="view image details"
|
||||||
|
to={`/photogallery/${image.base}/`}
|
||||||
|
>
|
||||||
|
<span className="icon-offset">
|
||||||
|
<ion-icon name="image"></ion-icon>
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
<button
|
||||||
|
className={classnames(
|
||||||
|
"z-20 hover:underline inline-block px-1 my-1 mr-2 text-md rounded-md border-2",
|
||||||
|
isClient &&
|
||||||
|
"text-muted-dark bg-muted-light hover:bg-muted border-muted-dark"
|
||||||
|
)}
|
||||||
|
id="shuffle-button"
|
||||||
|
onClick={() => {
|
||||||
|
shuffleImage(image);
|
||||||
|
}}
|
||||||
|
title="shuffle image"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span className="icon-offset">
|
||||||
|
<ion-icon name="shuffle"></ion-icon>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
className={classnames(
|
||||||
|
"z-20 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 border-muted-dark hover:bg-muted"
|
||||||
|
)}
|
||||||
|
id="photogallery-link"
|
||||||
|
to="/photogallery/"
|
||||||
|
>
|
||||||
|
Gallery
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
const IndexPage = ({
|
const IndexPage = ({
|
||||||
data: {
|
data: {
|
||||||
allFile: { edges },
|
allFile: { edges },
|
||||||
@ -152,55 +201,55 @@ const IndexPage = ({
|
|||||||
)}
|
)}
|
||||||
style={{ gridArea: "1/1" }}
|
style={{ gridArea: "1/1" }}
|
||||||
>
|
>
|
||||||
{/* CQ change based on sampling of picture? add background? */}
|
|
||||||
<nav
|
<nav
|
||||||
className={classnames(
|
className={classnames(
|
||||||
"text-vibrant-dark px-6 p-4",
|
"text-vibrant-dark px-6 p-2 bg-vibrant-dark blurred-or-opaque-bg-2",
|
||||||
ar > 1 || !isClient ? "landscape:w-screen" : "portrait:w-screen"
|
ar > 1 || !isClient ? "landscape:w-screen" : "portrait:w-screen"
|
||||||
)}
|
)}
|
||||||
style={{ zIndex: 100 }}
|
style={{ zIndex: 100 }}
|
||||||
>
|
>
|
||||||
<ul className="flex justify-between">
|
<ul className="flex justify-between">
|
||||||
<li>gallery</li>
|
<li>
|
||||||
<li>resume</li> <li>github</li> <li>devpost</li> <li>contact</li>
|
<HeroA
|
||||||
|
href="/CharlesDriesResumeCurrent.pdf"
|
||||||
|
isClient={isClient}
|
||||||
|
>
|
||||||
|
Resume
|
||||||
|
</HeroA>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
{" "}
|
||||||
|
<HeroA href="https://github.com/chuckdries" isClient={isClient}>
|
||||||
|
Github
|
||||||
|
</HeroA>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<HeroA
|
||||||
|
href="https://www.linkedin.com/in/chuckdries/"
|
||||||
|
isClient={isClient}
|
||||||
|
>
|
||||||
|
LinkedIn
|
||||||
|
</HeroA>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<HeroA
|
||||||
|
href="https://devpost.com/chuckdries"
|
||||||
|
isClient={isClient}
|
||||||
|
>
|
||||||
|
Devpost
|
||||||
|
</HeroA>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<HeroA
|
||||||
|
href="https://medium.com/@chuckdries"
|
||||||
|
isClient={isClient}
|
||||||
|
>
|
||||||
|
Medium (blog)
|
||||||
|
</HeroA>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
{/* <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 blurred-or-opaque-bg-2 hover:bg-muted border-muted-dark')}
|
|
||||||
id="image-link"
|
|
||||||
title="view image details"
|
|
||||||
to={`/photogallery/${image.base}/`}
|
|
||||||
>
|
|
||||||
Photography Gallery
|
|
||||||
</Link>
|
|
||||||
<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:bg-muted border-muted-dark')}
|
|
||||||
id="shuffle-button"
|
|
||||||
onClick={() => {
|
|
||||||
shuffleImage(image);
|
|
||||||
}}
|
|
||||||
title="shuffle image"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span className="icon-offset"><ion-icon name="shuffle"></ion-icon></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<section
|
|
||||||
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 bg-opacity-70 border-muted-dark hover:bg-muted')}
|
|
||||||
id="photogallery-link"
|
|
||||||
to="/photogallery/"
|
|
||||||
>
|
|
||||||
Photography Gallery
|
|
||||||
</Link>
|
|
||||||
</div> */}
|
|
||||||
<div className="flex flex-col items-center">
|
<div className="flex flex-col items-center">
|
||||||
<h1
|
<h1
|
||||||
className={classnames(
|
className={classnames(
|
||||||
@ -218,37 +267,16 @@ const IndexPage = ({
|
|||||||
isClient && "bg-vibrant-dark blurred-or-opaque-bg-1"
|
isClient && "bg-vibrant-dark blurred-or-opaque-bg-1"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div
|
<div className="flex-auto">
|
||||||
// className="mx-auto filter drop-shadow"
|
<h2
|
||||||
className={classnames(
|
className={classnames(
|
||||||
"mx-auto filter drop-shadow items-end",
|
"p-3",
|
||||||
ar > 1 || !isClient ? "" : ""
|
isClient && "text-vibrant-light"
|
||||||
)}
|
)}
|
||||||
>
|
style={{ fontSize: "max(1vw, 20px)" }}
|
||||||
<div className="flex-auto">
|
>
|
||||||
<h2
|
Full Stack Software Engineer & Hobbyist Photographer
|
||||||
className={classnames(
|
</h2>
|
||||||
"p-3",
|
|
||||||
isClient && "text-vibrant-light"
|
|
||||||
)}
|
|
||||||
style={{ fontSize: "max(1vw, 20px)" }}
|
|
||||||
>
|
|
||||||
Full Stack Software Engineer & 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user