Fetch experience from Google cloud Firestore

This currently does not work with Next.js. See:
googleapis/google-auth-library-nodejs#449
googleapis/google-auth-library-nodejs#371

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .next/
 apiConfig.json
+keys/**.json

.prettierrc

@@ -1,5 +1,5 @@
 {
-    "printWidth": 80,
+    "printWidth": 100,
     "tabWidth": 4,
     "singleQuote": true,
     "trailingComma": "none",

components/experience/experience-card.js

@@ -2,23 +2,14 @@ import { Box, ImageBox, H3, H4, LI, SubheadingSmall, UL } from '../common';
 import theme from '../common/theme';
 
 export const ExperienceCard = (props) => {
-    const {
-        company,
-        details,
-        endDate,
-        fallback,
-        location,
-        logo,
-        title,
-        startDate
-    } = props;
+    const { company, details, endDate, location, logo, title, startDate } = props;
 
     return (
         <Box width={{ _: 1, md: 1 / 2, lg: 1 / 3 }} mb={40}>
             <ImageBox
-                src={logo}
-                fallback={fallback}
-                alt={company}
+                src={logo?.src}
+                fallback={`images/${logo?.filename}`}
+                alt={logo.alt || ''}
                 width={200}
                 height={200}
                 borderRadius={'25%'}
@@ -28,12 +19,7 @@ export const ExperienceCard = (props) => {
                 <H3 textAlign="center" mt={0} mb="10px">
                     {company}
                 </H3>
-                <H4
-                    textAlign="center"
-                    mt={0}
-                    mb="10px"
-                    fw={theme.fontWeights.light}
-                >
+                <H4 textAlign="center" mt={0} mb="10px" fw={theme.fontWeights.light}>
                     {title}
                 </H4>
                 <SubheadingSmall
@@ -43,13 +29,12 @@ export const ExperienceCard = (props) => {
                     fw={theme.fontWeights.ultraLight}
                     color={theme.colors.medGray}
                 >
-                    {startDate.years} -{' '}
-                    {endDate.years < 9999 ? endDate.years : 'Present'}
+                    {startDate.years} - {endDate?.years || 'Present'}
                 </SubheadingSmall>
                 <UL mb={0}>
                     {details.map((detail, i) => (
                         <LI key={i} mb="20px" hyphens="auto">
-                            {detail}
+                            {detail.text}
                         </LI>
                     ))}
                 </UL>

components/experience/experience-section.js

@@ -2,7 +2,8 @@ import { Flex } from '../common';
 import { SectionLayout } from '../layout';
 import { ExperienceCard } from './experience-card';
 
-export const ExperienceSection = props => (
+export const ExperienceSection = (props) => (
+    // TODO get data from context? Does that work with Next static build?
     <SectionLayout title="// Where I've Worked">
         <Flex flexWrap="wrap" justifyContent="center">
             {props.experience.map((exp, i) => (

config/jest/cssTransform.js

@@ -0,0 +1,8 @@
+module.exports = {
+    process() {
+        return 'module.exports = {};';
+    },
+    getCacheKey() {
+        return 'cssTransform';
+    }
+};

jest.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+    collectCoverageFrom: [
+        '**/*.{js,jsx,ts,tsx}',
+        '!**/*.d.ts',
+        '!**/node_modules/**'
+    ],
+    testPathIgnorePatterns: ['/node_modules/', '/.next/'],
+    transform: {
+        '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
+        '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js'
+    },
+    transformIgnorePatterns: [
+        '/node_modules/',
+        '^.+\\.module\\.(css|sass|scss)$'
+    ],
+    moduleNameMapper: {
+        '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy'
+    }
+};

keys/README.md

@@ -0,0 +1,3 @@
+# KEYS
+
+Place JSON keys obtained from https://console.cloud.google.com/iam-admin/serviceaccounts here