Add Education

src/app/components/Education.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import { usePersonContext } from './PersonContext';
+import JobHistory from './JobHistory';
+
+export default function WorkExperience() {
+    const person = usePersonContext()
+
+    return person.education && (
+      <JobHistory
+        jobs={person.education}
+        heading='Education'
+        currentHeading='Currently studying'
+        />
+    )
+}

src/app/components/JobCard.tsx

@@ -11,7 +11,7 @@ export type Props = {
 };
 
 export default function JobCard(props: Props) {
-    const focusRef = useAutoFocus<HTMLDivElement>('position ' + [props.position, props.company].join(', '))
+    const focusRef = useAutoFocus<HTMLDivElement>([props.position, props.company, props.timerange].join(' - '))
     return (
         <Card ref={focusRef} className='job-card'>
             {props.heading && (

src/app/components/JobHistory.tsx

@@ -4,25 +4,35 @@ import Container from 'react-bootstrap/Container';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 import JobCard from './JobCard';
-import { usePersonContext } from './PersonContext';
 import { partition } from '../utils';
+import { Jobs } from '@/PersonalDataTypes';
 
-const entriesPerRow = 2
+export type Props = {
+  jobs: Jobs,
+  heading: string,
+  entriesPerRow?: number,
+  currentHeading?: string,
+}
 
-export default function JobsHistory() {
-    const person = usePersonContext()
+const defaultProps = {
+  entriesPerRow: 2,
+  currentHeading: 'Currently',
+}
 
+export default function JobHistory(props: Props) {
+    const jobs = props.jobs
+    const config = {...defaultProps, ...props}
     return (
     <Container>
-        <h2>Experience</h2>
-        {person.jobs.current && (
+        <h2>{config.heading}</h2>
+        {jobs.current && (
         <Row>
           <Col>
-            <JobCard heading={'Current position'} {...person.jobs.current} />
+            <JobCard heading={config.currentHeading} {...jobs.current} />
           </Col>
         </Row>
         )}
-        {partition(person.jobs.previous, entriesPerRow).map((jobs, index) => (
+        {partition(jobs.previous, config.entriesPerRow).map((jobs, index) => (
         <Row key={index}>
           {(jobs.map((job, subindex) => (
           <Col key={index + '_' + subindex}>

src/app/components/WorkExperience.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import { usePersonContext } from './PersonContext';
+import JobHistory from './JobHistory';
+
+export default function WorkExperience() {
+    const person = usePersonContext()
+
+    return (
+      <JobHistory
+        jobs={person.jobs}
+        heading='Work Experience'
+        currentHeading='Current position'
+        />
+    )
+}

src/app/page.tsx

@@ -1,10 +1,12 @@
 'use client'
 import React from 'react';
 import Container from 'react-bootstrap/Container';
-import JobsHistory from './components/JobsHistory';
+import JobsHistory from './components/WorkExperience';
 import AboutBrief from './components/AboutBrief';
 import Skills from './components/Skills';
 import { Contacts } from './components/Contacts';
+import WorkExperience from './components/WorkExperience';
+import Education from './components/Education';
 
 export default function Home() {
   return (
@@ -12,7 +14,8 @@ export default function Home() {
     <Container fluid='xxl'>
       <AboutBrief />
       <Contacts />
-      <JobsHistory />
+      <WorkExperience />
+      <Education />
       <Skills />
     </Container>
   )