CV added to about page

src/components/organisms/Footer.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import Menu from 'Atoms/Menu';
 
 const Foot = styled.footer`
-  padding: 0 3%;
+  padding: 0 3% 1rem;
   display: flex;
   flex-direction: row;
   justify-content: space-between;

src/components/organisms/__tests__/Footer.test.tsx

@@ -51,7 +51,7 @@ test('renders correctly', () => {
     }
 
     .c0 {
-      padding: 0 3%;
+      padding: 0 3% 1rem;
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;

src/components/templates/__tests__/Layout.test.js

@@ -152,7 +152,7 @@ it('renders correctly', () => {
     }
 
     .c11 {
-      padding: 0 3%;
+      padding: 0 3% 1rem;
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;

src/pages/__tests__/__snapshots__/about.test.tsx.snap

@@ -1,12 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-.c0 {
-  width: 1140px;
-  max-width: 94%;
-  margin: 0 auto;
-}
-
 .c11 {
   border-bottom: 1px solid;
   padding-bottom: 2rem;
@@ -25,6 +19,31 @@ exports[`renders correctly 1`] = `
   margin: 0 0 0.5rem;
 }
 
+.c15 {
+  background: #fff;
+  border: 2px solid #e94e1b;
+  color: #e94e1b;
+  padding: 0.5rem 2rem;
+  border-radius: 99px;
+  margin: 1rem 0;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+  display: inline-block;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c15:hover {
+  background: #e94e1b;
+  color: #fff;
+}
+
+.c0 {
+  width: 1140px;
+  max-width: 94%;
+  margin: 0 auto;
+}
+
 .c8 {
   background: transparent;
   border: none;
@@ -144,6 +163,10 @@ exports[`renders correctly 1`] = `
   margin: 0 auto;
 }
 
+.c14 {
+  text-align: center;
+}
+
 @media print {
   .c1 {
     border-bottom: 1pt solid #000;
@@ -606,5 +629,24 @@ exports[`renders correctly 1`] = `
       Show more
     </button>
   </section>
+  <section
+    class="c1"
+  >
+    <div
+      class="c14"
+    >
+      <p
+        class="c4"
+      >
+        Recruiters, you can find my up-to-date CV as a PDF download by clicking the button below.
+      </p>
+      <a
+        class="c15"
+        href="/docs/cv-jacob_herper-2020.pdf"
+      >
+        Download CV
+      </a>
+    </div>
+  </section>
 </div>
 `;

src/pages/about.tsx

@@ -4,8 +4,9 @@ import moment from 'moment';
 
 import { getTextColor } from 'Templates/Layout';
 import SEO from 'Molecules/Seo';
-import Container from 'Atoms/Container';
 import Job from 'Molecules/Job';
+import Button from 'Atoms/Button';
+import Container from 'Atoms/Container';
 import Filter from 'Atoms/Filter';
 
 import { jobs } from 'Data/jobs';
@@ -129,11 +130,20 @@ const About = () => {
             ))}
           </Jobs>
           {!loadedJobs ? (
-            <Button onClick={() => loadMore(true)}>Show more</Button>
+            <ReadMore onClick={() => loadMore(true)}>Show more</ReadMore>
           ) : (
-            <Button onClick={() => loadMore(false)}>Show less</Button>
+            <ReadMore onClick={() => loadMore(false)}>Show less</ReadMore>
           )}
         </Section>
+        <Section>
+          <Centre>
+            <Text>
+              Recruiters, you can find my up-to-date CV as a PDF download by
+              clicking the button below.
+            </Text>
+            <Button href="/docs/cv-jacob_herper-2020.pdf">Download CV</Button>
+          </Centre>
+        </Section>
       </Container>
     </>
   );
@@ -273,7 +283,7 @@ const ScreenOnly = styled.div`
   }
 `;
 
-const Button = styled.button`
+const ReadMore = styled.button`
   background: transparent;
   border: none;
   display: block;
@@ -284,3 +294,7 @@ const Button = styled.button`
     display: none;
   }
 `;
+
+const Centre = styled.div`
+  text-align: center;
+`;