Improved accordion list style

src/PersonalData.ts

@@ -14,17 +14,30 @@ export const personalData: PersonalData = {
     ],
     jobs: {
         current: {
-            position: 'Janitor',
+            position: 'Senior Software Development Manager',
-            company: 'Cleaners Limited',
+            company: 'Oracle|NetSuite',
             timerange: '2022 - present',
-            description: 'Cleanup duty 24/7.',
+            description: 'Lead role in the development of internal UI frameworks, components and tools.',
+            tags: ['TypeScript', 'Preact', 'NodeJs/NPM']
         },
         previous: [
             {
-                position: 'CEO',
+                position: 'Software Development Manager',
-                company: 'CryptoDancers',
+                company: 'Oracle|NetSuite',
-                timerange: '2019 - 2022',
+                timerange: '2017 - 2022',
-                description: 'Revolutionizing the crypto world.',
+                description: '',
+            },
+            {
+                position: 'Senior Software Engineer',
+                company: 'Oracle|NetSuite',
+                timerange: '2013 - 2017',
+                description: '',
+            },
+            {
+                position: 'Software Engineer',
+                company: 'Q2 Interactive',
+                timerange: '2009 - 2013',
+                description: '',
             }
         ]
     },

src/PersonalDataTypes.ts

@@ -7,7 +7,8 @@ export type Job = {
     position: string,
     company: string,
     timerange: string,
-    description: string
+    description: string,
+    tags?: string[],
 }
 
 export type Jobs = {

src/app/components/job/JobsAccordion.tsx

@@ -1,13 +1,7 @@
 
 import React from 'react';
-import Container from 'react-bootstrap/Container';
+import { Job } from '@/PersonalDataTypes';
-import Col from 'react-bootstrap/Col';
+import { Accordion, Row } from 'react-bootstrap';
-import Row from 'react-bootstrap/Row';
-import JobCard from './JobCard';
-import { partition } from '../../utils';
-import { Job, Jobs } from '@/PersonalDataTypes';
-import useSize from '../../hooks/Size';
-import { Accordion } from 'react-bootstrap';
 import { JobListProps } from './types';
 
 
@@ -20,42 +14,24 @@ const defaultProps = {
   currentHeading: 'Currently',
 }
 
-function FullList(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>
-  )
-}
-
 export default function JobsAccordion(props: JobListProps) {
   const {jobs} = props
   const config = {...defaultProps, ...props}
-  function jobTitle(job: Job) {
+  function JobTitle(props: {job: Job, heading?: string}) {
-    return `${job.position} at ${job.company}, ${job.timerange}`
+    const {job, heading} = props
+    return (
+      <div>
+        <div><strong>{job.position}</strong></div>
+        <div>{job.company}, {job.timerange}</div>
+        {heading && (<div>({heading})</div>)}
+      </div>
+    )
   }
   return (
-    <Accordion defaultActiveKey={jobs.current ? 'current' : 'previous-0'} alwaysOpen>
+    <Accordion defaultActiveKey={jobs.current ? 'current' : 'previous-0'}>
       {jobs.current && (
       <Accordion.Item eventKey="current">
-        <Accordion.Header>{config.currentHeading}:<br />{jobTitle(jobs.current)} </Accordion.Header>
+        <Accordion.Header><JobTitle heading={config.currentHeading} job={jobs.current} /> </Accordion.Header>
         <Accordion.Body>
           {jobs.current.position}
         </Accordion.Body>
@@ -63,7 +39,7 @@ export default function JobsAccordion(props: JobListProps) {
       )}
       {jobs.previous?.map((job, index) => (
       <Accordion.Item eventKey={`previous-${index}`} key={index}>
-        <Accordion.Header>{jobTitle(job)}</Accordion.Header>
+        <Accordion.Header><JobTitle job={job} /></Accordion.Header>
         <Accordion.Body>
         {job.description}
         </Accordion.Body>