wip

Author: vika03

components/downloadPdfButton.js

@@ -0,0 +1,33 @@
+export const DownloadPdfButton = ({ href }) => {
+  return (
+    <>
+      <a className="downloadPdf" href={href} download>
+        Download as PDF
+      </a>
+      {/*language=SCSS*/}
+      <style jsx>{`
+        .downloadPdf {
+          display: inline-block;
+          text-transform: uppercase;
+          background: #3e46cf;
+          color: #fff;
+          border: 0;
+          outline: none;
+          padding: 20px 50px;
+          cursor: pointer;
+          font-size: 18px;
+          font-family: 'Overpass', sans-serif;
+          font-weight: 300;
+          -webkit-appearance: none;
+          -webkit-border-radius: 0px;
+          margin: 20px 0;
+
+          &:hover,
+          &:visited {
+            color: #fff;
+          }
+        }
+      `}</style>
+    </>
+  )
+}

pages/viktor-kalajo.js

@@ -1,5 +1,6 @@
 import { Header } from '../components/header'
 import { Project } from '../components/project'
+import { DownloadPdfButton } from '../components/downloadPdfButton'
 
 const ViktorKalajo = () => (
   <>
@@ -43,7 +44,7 @@ const ViktorKalajo = () => (
         <h2>Highlighted projects</h2>
         <Project
           title="SVT Astrid"
-          role="Fullstack"
+          role="Full-stack"
           from="Q1 2020"
           to="present"
           tags={[
@@ -80,7 +81,7 @@ const ViktorKalajo = () => (
           <p>
             One of the major technical challenges was enabling real-time
             collaboration among editors on articles and feeds. We solved this by
-            implementing an event-driven architecture, which supported seamless
+            implementing an event-driven architecture, which supports seamless
             and concurrent editing.
           </p>
           <p>
@@ -91,7 +92,7 @@ const ViktorKalajo = () => (
         </Project>
         <Project
           title="SVT Direktcenter"
-          role="Fullstack"
+          role="Full-stack"
           from="Q1 2019"
           to="Q1 2020"
           tags={[
@@ -207,6 +208,9 @@ const ViktorKalajo = () => (
             .
           </p>
         </div>
+        <div className="downloadPdfWrapper">
+          <DownloadPdfButton href="/static/pdf/viktor-kalajo-cv.pdf" />
+        </div>
       </div>
       {/*language=SCSS*/}
       <style jsx>{`
@@ -230,14 +234,6 @@ const ViktorKalajo = () => (
           padding: 20px;
         }
 
-        .content div {
-          display: flex;
-          height: 100%;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-        }
-
         a,
         a:active,
         a:visited {
@@ -267,6 +263,10 @@ const ViktorKalajo = () => (
             font-weight: 600;
           }
         }
+
+        .downloadPdfWrapper {
+          justify-content: flex-start;
+        }
       `}</style>
       <style jsx global>{`
         h1 {