Commit 17f17d4d authored by David Rhoderick's avatar David Rhoderick
Browse files

Updating portfolio to include titles under items.

parent dc2d08d9
import Link from 'next/link'
import styles from './piece.module.scss'
export default function Piece ({image, link, fullWidth, last}) {
return (
export default function Piece ({image, link, fullWidth, last, children}) {
console.log(link, children)
return (<div className={fullWidth ? styles.pieceFullWidth : (last ? styles.pieceLast : styles.piece)}>
<Link href={link}>
<a className={fullWidth ? styles.pieceFullWidth : (last ? styles.pieceLast : styles.piece)} style={{backgroundImage: `url(${image})`}}></a>
<a style={{backgroundImage: `url(${image})`}}></a>
</Link>
)
{children && <div>{children}</div>}
</div>)
}
\ No newline at end of file
.piece, .pieceFullWidth, .pieceLast {
display: block;
position: relative;
overflow: hidden;
width: calc(50% - 1rem);
margin: 0 0 2rem;
padding-bottom: 45%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: {
size: 100%;
size: cover;
position: center;
repeat: no-repeat;
margin-bottom: 2rem;
width: calc(50% - 1rem);
h1 {
font-weight: normal;
font-style: italic;
margin-bottom: 0.25rem;
text-align: center;
}
@media screen and (max-width: 540px) {
a {
display: block;
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
padding-bottom: 100%;
margin-bottom: 1rem;
margin: 0 0 1rem;
padding-bottom: 90%;
display: flex;
justify-content: space-around;
align-items: center;
background: {
size: 100%;
size: cover;
position: center;
repeat: no-repeat;
}
@media screen and (max-width: 540px) {
width: 100%;
padding-bottom: 100%;
margin-bottom: 1rem;
}
}
}
.pieceFullWidth {
width: 100%;
@media screen and (max-width: 540px) {
padding-bottom: 40%;
a {
width: 100%;
padding-bottom: 45%;
@media screen and (max-width: 540px) {
padding-bottom: 40%;
}
}
}
......@@ -39,4 +59,8 @@
left: auto;
right: auto;
}
a {
width: 100%;
}
}
\ No newline at end of file
......@@ -11,17 +11,29 @@ export default function Work() {
</Head>
<Portfolio>
<Piece image="/mv-museum-work-page.png" link="/marthas-vineyard-museum" fullWidth={true} />
<Piece image="/mv-museum-work-page.png" link="/marthas-vineyard-museum" fullWidth={true}>
<h1>UX/UI design</h1>
</Piece>
<Piece image="/exodus-work-page.png" link="/the-exodus-institute" />
<Piece image="/microbe-ninja-work-page.png" link="/microbe-ninja">
<h1>UI design</h1>
</Piece>
<Piece image="/nwo-work-page.png" link="/national-widowers-organization" />
<Piece image="/illustration.png" link="/illustration">
<h1>Illustration</h1>
</Piece>
<Piece image="/illustration.png" link="/illustration" />
<Piece image="/exodus-work-page.png" link="/the-exodus-institute">
<h1>Graphic design</h1>
</Piece>
<Piece image="/microbe-ninja-work-page.png" link="/microbe-ninja" />
<Piece image="/nwo-work-page.png" link="/national-widowers-organization">
<h1>Social media design</h1>
</Piece>
<Piece image="/icon-set-work-page.png" link="/icons" last={true} fullWidth={true} />
<Piece image="/icon-set-work-page.png" link="/icons" last={true} fullWidth={true}>
<h1>Icon design</h1>
</Piece>
</Portfolio>
</Container>
)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment