Fix CV spacing

1 files changed, 25 insertions, 13 deletions

diff --git a/src/pages/cv.js b/src/pages/cv.js
index 39d4264..8616838 100644
--- a/src/pages/cv.js
+++ b/src/pages/cv.js
@@ -2,17 +2,20 @@ import React from 'react'
 import { css } from '@emotion/core'
 
 import { BaseLayout } from '../components/base-layout'
-import { Project } from '../components/project'
+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
@@ -22,6 +25,11 @@ 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
@@ -53,25 +61,29 @@ export default () => (
       `}
     >
       <h1>Work</h1>
-      {cvWork.map(k => (
-        <Project {...k} key={k.name} />
+      {cvWork.map((k, i) => (
+        <Project {...k} key={`work-${i}`} />
       ))}
       <h1>Projects</h1>
       {cvProjects.map(k => (
         <Project {...k} key={k.name} />
       ))}
       <h1>Skills</h1>
-      <ul>
-        {skills.map(k => (
-          <li key={k}>{k}</li>
-        ))}
-      </ul>
+      <article css={containerStyle}>
+        <ul>
+          {skills.map(k => (
+            <li key={k}>{k}</li>
+          ))}
+        </ul>
+      </article>
       <h1>Tools</h1>
-      <ul>
-        {tools.map(k => (
-          <li key={k}>{k}</li>
-        ))}
-      </ul>
+      <article css={containerStyle}>
+        <ul>
+          {tools.map(k => (
+            <li key={k}>{k}</li>
+          ))}
+        </ul>
+      </article>
     </div>
   </BaseLayout>
 )