Commit 9e8467a9 authored by David Rhoderick's avatar David Rhoderick
Browse files

Finishing navbar and adding pages for portfolio pieces.

parent cfe52006
Pipeline #18 canceled with stages
import styles from './container.module.scss'
export default function Container ({children}) {
return (
<div className={styles.container}>{children}</div>
)
}
\ No newline at end of file
.container {
max-width: 1040px;
margin: 0 auto;
padding: 1rem;
}
\ No newline at end of file
import NavLink from './navlink'
import Link from 'next/link'
import styles from './navbar.module.scss'
export default function Navbar() {
return (
<ul>
<li><NavLink href="/"><a>work</a></NavLink></li>
<li><NavLink href="/about"><a>about me</a></NavLink></li>
<li><NavLink href="/contact"><a>contact</a></NavLink></li>
</ul>
<div className={styles.navbar}>
<div className={styles.title}>
<Link href="/"><a>Tamara Rhoderick</a></Link>
</div>
<ul className={styles.menu}>
<li><NavLink href="/"><a>work</a></NavLink></li>
<li><NavLink href="/about"><a>about me</a></NavLink></li>
<li><NavLink href="/contact"><a>contact</a></NavLink></li>
</ul>
</div>
)
}
\ No newline at end of file
.navbar {
display: flex;
justify-content: space-between;
// max-width: 1040px;
margin: 0 5rem 0 2rem;
// padding: 3rem;
padding: 2rem 0;
align-items: center;
@media screen and (max-width: 620px) {
margin: 0 2rem;
}
@media screen and (max-width: 490px) {
flex-direction: column;
}
}
.title a {
color: black;
text-transform: uppercase;
text-decoration: none;
font-size: 1.25rem;
}
.menu {
display: flex;
list-style: none;
align-items: center;
@media screen and (max-width: 490px) {
margin-top: 1rem;
}
a {
padding: 0 1rem;
text-decoration: none;
color: black;
}
}
\ No newline at end of file
.active {
color: pink;
color: black;
position: relative;
&:after {
content: "";
position: absolute;
left: 0;
right: 0;
top: .8rem;
display: block;
height: 1rem;
background: {
image: url(../public/brush-stroke.png);
size: 100%;
size: contain;
position: center;
repeat: no-repeat;
}
}
}
\ No newline at end of file
import Head from 'next/head'
import styles from './about.module.scss'
import Container from '../components/container'
export default function About() {
return (
<>
<Container>
<Head>
<title>About</title>
</Head>
<h1 className={styles.heading}>About page</h1>
</>
</Container>
)
}
import Head from 'next/head'
import Container from '../components/container'
export default function Illustration () {
return (
<Container>
<Head>
<title>Illustration</title>
</Head>
<h1>Illustration</h1>
</Container>
)
}
\ No newline at end of file
import Head from 'next/head'
import Link from 'next/link'
import Container from '../components/container'
export default function Work() {
return (
<>
<Container>
<Head>
<title>Work</title>
</Head>
<h1>Work page</h1>
</>
<Link href="/marthas-vineyard-museum">
<a>Museum</a>
</Link>
<Link href="/the-exodus-institute">
<a>Exodus</a>
</Link>
<Link href="/national-widowers-organization">
<a>NWO</a>
</Link>
<Link href="/illustration">
<a>Illustration</a>
</Link>
<Link href="/microbe-ninja">
<a>Microbe Ninja</a>
</Link>
</Container>
)
}
import Head from 'next/head'
import Container from '../components/container'
export default function MarthasVineyardMuseum () {
return (
<Container>
<Head>
<title>Martha's Vineyard Museum</title>
</Head>
<h1>Martha's Vineyard Museum</h1>
</Container>
)
}
\ No newline at end of file
import Head from 'next/head'
import Container from '../components/container'
export default function MicrobeNinja () {
return (
<Container>
<Head>
<title>Microbe Ninja</title>
</Head>
<h1>Microbe Ninja</h1>
</Container>
)
}
\ No newline at end of file
import Head from 'next/head'
import Container from '../components/container'
export default function NationalWidowersOrganization () {
return (
<Container>
<Head>
<title>National Widowers' Organization</title>
</Head>
<h1>National Widowers' Organization</h1>
</Container>
)
}
\ No newline at end of file
import Head from 'next/head'
import Container from '../components/container'
export default function TheExodusInstitute () {
return (
<Container>
<Head>
<title>The Exodus Institute</title>
</Head>
<h1>The Exodus Institute</h1>
</Container>
)
}
\ No newline at end of file
@import url("https://use.typekit.net/nzr3ime.css");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
font-family: orpheuspro, serif;
}
\ No newline at end of file
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