Refactor jobs into separate files

src/app/components/Education.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react';
 import { usePersonContext } from '../hooks/PersonContext';
-import JobHistory from './JobHistory';
+import JobHistory from './job/JobsHistory';
 
 export default function WorkExperience() {
     const person = usePersonContext()

src/app/components/WorkExperience.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react';
 import { usePersonContext } from '../hooks/PersonContext';
-import JobHistory from './JobHistory';
+import JobHistory from './job/JobsHistory';
 
 export default function WorkExperience() {
     const person = usePersonContext()

src/app/components/job/JobCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Card from 'react-bootstrap/Card';
-import { useAutoFocus, useFocusedElement } from '../hooks/FocusedElement';
+import { useAutoFocus, useFocusedElement } from '../../hooks/FocusedElement';
 
 export type Props = {
     heading?: string,

src/app/components/job/JobsAccordion.tsx

@@ -4,16 +4,12 @@ import Container from 'react-bootstrap/Container';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 import JobCard from './JobCard';
-import { partition } from '../utils';
+import { partition } from '../../utils';
 import { Job, Jobs } from '@/PersonalDataTypes';
-import useSize from '../hooks/Size';
+import useSize from '../../hooks/Size';
 import { Accordion } from 'react-bootstrap';
+import { JobListProps } from './types';
 
-type JobListProps = {
-  jobs: Jobs,
-  entriesPerRow?: number,
-  currentHeading?: string,
-}
 
 export type Props = {
   heading: string,
@@ -49,7 +45,7 @@ function FullList(props: JobListProps) {
   )
 }
 
-function SmallList(props: JobListProps) {
+export default function JobsAccordion(props: JobListProps) {
   const {jobs} = props
   const config = {...defaultProps, ...props}
   function jobTitle(job: Job) {
@@ -76,19 +72,3 @@ function SmallList(props: JobListProps) {
     </Accordion>
   )
 }
-
-export default function JobHistory(props: Props) {
-  const {SizeWrapper, size} = useSize()
-  const jobs = props.jobs
-
-  const jobsList = size.width < 600 ? <SmallList {...props} /> : <FullList {...props} />
-
-  return (
-    <Container>
-      <h2>{props.heading}</h2>
-      <SizeWrapper>
-        {jobsList}
-      </SizeWrapper>
-    </Container>
-  )
-}

src/app/components/job/JobsCards.tsx

@@ -0,0 +1,42 @@
+
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+import JobCard from './JobCard';
+import { partition } from '../../utils';
+import { JobListProps } from './types';
+
+export type Props = {
+  heading: string,
+} & JobListProps
+
+const defaultProps = {
+  entriesPerRow: 2,
+  currentHeading: 'Currently',
+}
+
+export default function JobsCards(props: JobListProps) {
+  const {jobs} = props
+  const config = {...defaultProps, ...props}
+  return (
+    <Container>
+      {jobs.current && (
+      <Row>
+        <Col>
+          <JobCard heading={config.currentHeading} {...jobs.current} />
+        </Col>
+      </Row>
+      )}
+      {partition(jobs.previous, config.entriesPerRow).map((jobs, index) => (
+      <Row key={index}>
+        {(jobs.map((job, subindex) => (
+        <Col key={index + '_' + subindex}>
+          <JobCard {...job} />
+        </Col>
+        )))}
+      </Row>
+      ))}
+    </Container>
+  )
+}

src/app/components/job/JobsHistory.tsx

@@ -0,0 +1,31 @@
+
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import useSize from '../../hooks/Size';
+import { JobListProps } from './types';
+import JobsAccordion from './JobsAccordion';
+import JobsCards from './JobsCards';
+
+export type Props = {
+  heading: string,
+} & JobListProps
+
+const defaultProps = {
+  entriesPerRow: 2,
+  currentHeading: 'Currently',
+}
+
+export default function JobHistory(props: Props) {
+  const {SizeWrapper, size} = useSize()
+
+  const jobsList = size.width < 600 ? <JobsAccordion {...props} /> : <JobsCards {...props} />
+
+  return (
+    <Container>
+      <h2>{props.heading}</h2>
+      <SizeWrapper>
+        {jobsList}
+      </SizeWrapper>
+    </Container>
+  )
+}

src/app/components/job/types.tsx

@@ -0,0 +1,7 @@
+import { Jobs } from "@/PersonalDataTypes";
+
+export type JobListProps = {
+    jobs: Jobs,
+    entriesPerRow?: number,
+    currentHeading?: string,
+  }

src/app/globals.css

@@ -13,9 +13,11 @@ body {
 }
 .footer {
     margin-top: 2rem;
+    filter: opacity(75%)
 }
 .tiny {
     font-size: 75%;
+    filter: opacity(75%)
 }
 
 .container > h2, h3, h4 {