Update CV to use BaseLayout

1 files changed, 62 insertions, 23 deletions

diff --git a/src/pages/cv.js b/src/pages/cv.js
index 0888c54..e171131 100644
--- a/src/pages/cv.js
+++ b/src/pages/cv.js
@@ -1,38 +1,77 @@
 import React from 'react'
+import { css } from '@emotion/core'
 
-import Layout from '../components/layout'
+import { BaseLayout } from '../components/base-layout'
 import { Project } from '../components/project'
+import { cvTheme } from '../components/globals'
 
 import { projects } from './projects'
 import { workHistory } from './work'
 import { skills, tools } from './about'
 
-const cleanProjectForCv = ({ desc, imgUrl, ...rest }) => rest
+const cleanProjectDetailForCv = ({ images, ...rest }) => rest
+
+const cleanProjectForCv = project => ({
+  ...project,
+  projectDetails: project.projectDetails
+    ? project.projectDetails.map(cleanProjectDetailForCv)
+    : null
+})
 
 const cvProjects = projects.filter(k => k.showOnCv).map(cleanProjectForCv)
 
+const cvWork = workHistory.map(cleanProjectForCv)
+
 export default () => (
-  <Layout>
-    <h2>Work</h2>
-    {workHistory.map(k => (
-      <Project {...k} key={k.name} />
-    ))}
-    <h2>Projects</h2>
-    {cvProjects.map(k => (
-      <Project {...k} key={k.name} />
-    ))}
-    <h2>Teaching</h2>
-    <h2>Skills</h2>
-    <ul>
-      {skills.map(k => (
-        <li key={k}>{k}</li>
+  <BaseLayout theme={cvTheme}>
+    <header
+      css={({ margins }) =>
+        css`
+          margin-bottom: ${margins.lg}px;
+        `
+      }
+    >
+      <h1>Nicholas Van Doorn</h1>
+      <div
+        css={({ margins }) => css`
+          & a {
+            margin-right: 20px;
+          }
+        `}
+      >
+        <a>vandoorn.nick@gmail.com</a>
+        <a>github.com/nvandoorn</a>
+        <a>twitter.com/nickvandoorn</a>
+      </div>
+    </header>
+
+    <div
+      css={({ margins }) => css`
+        & h1 {
+          margin-bottom: ${margins.lg}px;
+        }
+      `}
+    >
+      <h1>Work</h1>
+      {cvWork.map(k => (
+        <Project {...k} key={k.name} />
       ))}
-    </ul>
-    <h2>Tools</h2>
-    <ul>
-      {tools.map(k => (
-        <li key={k}>{k}</li>
+      <h1>Projects</h1>
+      {cvProjects.map(k => (
+        <Project {...k} key={k.name} />
       ))}
-    </ul>
-  </Layout>
+      <h1>Skills</h1>
+      <ul>
+        {skills.map(k => (
+          <li key={k}>{k}</li>
+        ))}
+      </ul>
+      <h1>Tools</h1>
+      <ul>
+        {tools.map(k => (
+          <li key={k}>{k}</li>
+        ))}
+      </ul>
+    </div>
+  </BaseLayout>
 )