summaryrefslogtreecommitdiff
path: root/src/components/layout.js
blob: ccee009dfc48155ac2243de52248fafb413f78d1 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import React from 'react'
import Helmet from 'react-helmet'
import { css, Global } from '@emotion/core'
import { colours, fontStack, transitions } from './globals'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
  faSpotify,
  faGithub,
  faTwitter,
  faKeybase
} from '@fortawesome/free-brands-svg-icons'

import { Container } from './container'
import { Header } from './header'

const globalStyles = css`
  *,
  html,
  body {
    margin: 0;
    padding: 0;
  }
  p,
  a,
  h1,
  h2,
  h3,
  h4,
  h5,
  div {
    font-family: ${fontStack};
    color: ${colours.main};
  }
  p,
  li {
    line-height: 2em;
  }
  li {
    list-style-type: circle;
    list-style-position: outside;
  }
  a {
    border-bottom: 1px dotted;
    text-decoration: none;
    &: hover {
      transition: ${transitions.hover};
    }
  }
  body {
    background: ${colours.background};
  }
`

const siteData = {
  siteName: 'Nicholas Van Doorn',
  navLinks: [
    {
      name: 'Work',
      to: '/work'
    },
    {
      name: 'Projects',
      to: '/projects'
    },
    {
      name: 'About',
      to: '/about'
    }
  ],
  socialEntries: [
    {
      href: '//github.com/nvandoorn',
      name: 'GitHub',
      icon: <FontAwesomeIcon icon={faGithub} />
    },
    {
      href: '//twitter.com/nickvandoorn',
      name: 'Twitter',
      icon: <FontAwesomeIcon icon={faTwitter} />
    },
    {
      href: '//keybase.io/nvandoorn',
      name: 'Keybase',
      icon: <FontAwesomeIcon icon={faKeybase} />
    },
    {
      href: '//open.spotify.com/user/pontonn',
      name: 'Spotify',
      icon: <FontAwesomeIcon icon={faSpotify} />
    }
  ]
}

export default ({ children, height }) => (
  <>
    <Global styles={globalStyles} />
    <Helmet
      title="Nicholas Van Doorn"
      meta={[
        { name: 'description', content: 'Portfolio for Nicholas Van Doorn' },
        { name: 'keywords', content: 'software, engineer, development, web' }
      ]}
    >
      <html lang="en" />
    </Helmet>
    <Container height={height}>
      <Header
        siteName={siteData.siteName}
        links={siteData.navLinks}
        socialEntries={siteData.socialEntries}
      />
      {children}
    </Container>
  </>
)