wip

sthlmio · Nov 15, 2024 · 072c7c7 · 072c7c7
1 parent bc691ac
commit 072c7c7
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 419 deletions.
diff --git a/components/cv.js b/components/cv.js
diff --git a/components/downloadPdfButton.js b/components/downloadPdfButton.js
@@ -13,20 +13,31 @@ export const DownloadPdfButton = ({ href }) => {
           color: #fff;
           border: 0;
           outline: none;
-          padding: 20px 50px;
+          padding: 20px 40px;
           cursor: pointer;
           font-size: 18px;
           font-family: 'Overpass', sans-serif;
           font-weight: 300;
           -webkit-appearance: none;
           -webkit-border-radius: 0px;
           margin: 20px 0;
+          text-decoration: none;
+
+          &:hover {
+            background: #4c52c1;
+          }
 
           &:hover,
           &:visited {
             color: #fff;
           }
         }
+
+        @media print {
+          .downloadPdf {
+            display: none;
+          }
+        }
       `}</style>
     </>
   )

diff --git a/components/project.js b/components/project.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Tags } from './tags'
 
@@ -7,26 +7,39 @@ export const Project = ({ from, to, role, title, children, tags }) => (
     <h3>
       {title}
       <span className="role">
-        {role}, {from} - {to}
+        {role ? `${role}, ` : ''}
+        {from} - {to}
       </span>
     </h3>
-    <h4></h4>
     {children}
     <Tags tags={tags} />
     {/*language=SCSS*/}
     <style jsx>
       {`
         .project {
-          page-break-inside: avoid;
           display: block;
         }
 
         .role {
+          font-family: 'Overpass Mono';
           display: block;
-          font-size: 0.8em;
-          text-transform: uppercase;
+          font-size: 16px;
           line-height: 1.2em;
           margin-top: 0.3em;
+          font-weight: 400;
+        }
+
+        h3 {
+          font-size: 16px;
+        }
+
+        @media screen and (min-width: 500px) {
+          h3 {
+            font-size: 20px;
+          }
+          .role {
+            font-size: 18px;
+          }
         }
       `}
     </style>

diff --git a/pages/johan-baath.js b/pages/johan-baath.js
@@ -91,20 +91,20 @@ export default function JohanBaath() {
             <br />
             <br />
             Working with the following teams:
-            <ul>
-              <li>
-                Performance - Ensuring peak performance for the native apps.
-              </li>
-              <li>
-                Release - Responsible for tooling around releasing Spotify on
-                all app stores.
-              </li>
-              <li>Foundation - iOS developer experience and tooling.</li>
-              <li>
-                Machine Learning UX - Building tools for Spotify's ML engineers.
-              </li>
-            </ul>
           </p>
+          <ul>
+            <li>
+              Performance - Ensuring peak performance for the native apps.
+            </li>
+            <li>
+              Release - Responsible for tooling around releasing Spotify on all
+              app stores.
+            </li>
+            <li>Foundation - iOS developer experience and tooling.</li>
+            <li>
+              Machine Learning UX - Building tools for Spotify's ML engineers.
+            </li>
+          </ul>
           <h4>
             <a href="https://cabonline.com/">Cabonline Technologies</a>
           </h4>