Add Education

src/PersonalData.ts

@@ -7,7 +7,9 @@ export const personalData: PersonalData = {
     contacts: [
         {icon: 'browser-firefox', text: 'www.dejvino.cz'},
         {icon: 'envelope-at', text: 'explosive@dejvino.cz'},
-        {icon: 'git', text: 'https://git.dejvino.cz'}
+        {icon: 'git', text: 'https://git.dejvino.cz'},
+        {icon: 'telephone', text: '+420 111 222 333'},
+        {icon: 'geo-alt', text: 'Brno, Czechia'}
     ],
     jobs: {
         current: {
@@ -25,6 +27,16 @@ export const personalData: PersonalData = {
             }
         ]
     },
+    education: {
+        previous: [
+            {
+                position: 'Information Technology (unfinished)',
+                company: 'University of Benimoto',
+                timerange: '2010 - 2017',
+                description: '',
+            }
+        ]
+    },
     skills: {
         primary: ['Java', 'TypeScript', 'JavaScript'],
         secondary: ['Kotlin', 'Go'],

src/PersonalDataTypes.ts

@@ -15,6 +15,8 @@ export type Jobs = {
     previous?: Job[]
 }
 
+export type Education = Jobs;
+
 export type Skills = {
     primary: string[],
     secondary?: string[],
@@ -26,6 +28,7 @@ export type PersonalData = {
     brief: string,
     contacts: Contact[],
     jobs: Jobs,
+    education?: Education,
     skills: Skills,
     interests: string[]
 }

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>
   )