summaryrefslogtreecommitdiff
path: root/src/pages/cv.js
blob: 774774427fa261e20172e7505df4cef45c9cb646 (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
import React from 'react'
import { css } from '@emotion/core'

import { BaseLayout } from '../components/base-layout'
import { Project as BaseProject } from '../components/project'
import { cvTheme } from '../components/globals'

import { projects } from './projects'
import { workHistory } from './work'
import { skills, tools } from './about'

const Project = p => <BaseProject {...p} iconSize="14px" />

const cleanProjectDetailForCv = ({ images, ...rest }) => rest

const cleanProjectForCv = project => ({
  ...project,
  inProd: false,
  projectDetails: project.projectDetails
    ? project.projectDetails.map(cleanProjectDetailForCv)
    : null
})

const cvProjects = projects.filter(k => k.showOnCv).map(cleanProjectForCv)

const cvWork = workHistory.map(cleanProjectForCv)

const containerStyle = ({ margins }) =>
  css`
    margin: 0 0 ${margins.lg}px 0;
  `

export default () => (
  <BaseLayout theme={cvTheme}>
    <header
      css={({ margins }) =>
        css`
          margin-bottom: ${margins.lg}px;
        `
      }
    >
      <h1
        css={({ margins }) => css`
          font-size: 2em;
          margin-bottom: ${margins.md}px;
        `}
      >
        Nicholas Van Doorn
      </h1>
      <div
        css={({ margins }) => css`
          & a {
            margin-right: ${margins.lg}px;
          }
        `}
      >
        <a href="mailto:vandoorn.nick@gmail.com">vandoorn.nick@gmail.com</a>
        <a href="https://github.com/nvandoorn">github.com/nvandoorn</a>
        <a href="https://twitter.com/nickvandoorn">twitter.com/nickvandoorn</a>
      </div>
    </header>

    <div
      css={({ margins }) => css`
        & h1 {
          margin-bottom: ${margins.md}px;
        }
      `}
    >
      <h1>Work</h1>
      {cvWork.map((k, i) => (
        <Project {...k} key={`work-${i}`} />
      ))}
      <h1>Projects</h1>
      {cvProjects.map(k => (
        <Project {...k} key={k.name} />
      ))}
      <h1>Skills</h1>
      <article css={containerStyle}>
        <ul>
          {skills.map(k => (
            <li key={k}>{k}</li>
          ))}
        </ul>
      </article>
      <h1>Tools</h1>
      <article css={containerStyle}>
        <ul>
          {tools.map(k => (
            <li key={k}>{k}</li>
          ))}
        </ul>
      </article>
    </div>
  </BaseLayout>
)