Add markdown support into descriptions for adding links

src/app/components/AboutBrief.tsx

@@ -1,15 +1,14 @@
 import React, { useContext } from 'react';
 import Container from 'react-bootstrap/Container';
-import Image from 'react-bootstrap/Image'
 import { usePersonContext } from '../hooks/PersonContext';
-import { Col, Row } from 'react-bootstrap';
+import md from './Markdown';
 
 export default function AboutBrief() {
     const person = usePersonContext()
     return (
       <Container className='about-brief' fluid>
         <h1>{person.name}</h1>
-        <p className='brief'>{person.brief}</p>
+        <p className='brief'>{md(person.brief)}</p>
       </Container>
     )
 }

src/app/components/Education.tsx

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

src/app/components/Markdown.tsx

@@ -0,0 +1,5 @@
+import ReactMarkdown from "react-markdown";
+
+export default function md(text: string) {
+    return <ReactMarkdown>{text}</ReactMarkdown>
+}

src/app/components/Projects.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import { usePersonContext } from '../hooks/PersonContext';
+import JobHistory from './job/JobsHistory';
+
+export default function Projects() {
+    const person = usePersonContext()
+
+    return person.projects ? (
+      <JobHistory
+        jobs={person.projects}
+        heading='Projects'
+        currentHeading='Currently active'
+        />
+    ) : <></>
+}

src/app/components/job/JobCard.tsx

@@ -3,14 +3,11 @@ import Card from 'react-bootstrap/Card';
 import { useAutoFocus } from '../../hooks/FocusedElement';
 import { Placeholder } from 'react-bootstrap';
 import JobTags from './JobTags';
+import { Job } from '@/PersonalDataTypes';
+import md from '../Markdown';
 
-export type Props = {
-    heading?: string,
-    position: string,
-    timerange: string,
-    company: string, 
-    description: string,
-    tags?: string[]
+export type Props = Job & {
+    heading?: string
 };
 
 export function JobCardPlaceholder() {
@@ -37,9 +34,11 @@ export default function JobCard(props: Props) {
             <Card.Body>
                 <Card.Title>{props.position}</Card.Title>
                 <Card.Subtitle>
-                    <span className='company-name'>{props.company}</span>, <span className='timerange'>{props.timerange}</span>
+                    {props.company && <span className='company-name'>{props.company}</span>}
+                    {props.company && props.timerange && <span>, </span>}
+                    {props.timerange && <span className='timerange'>{props.timerange}</span>}
                     </Card.Subtitle>
-                <Card.Text className='multiline'>{props.description}</Card.Text>
+                <Card.Text className='multiline'>{md(props.description)}</Card.Text>
                 {props.tags && <JobTags tags={props.tags} />}
             </Card.Body>
         </Card>

src/app/components/job/JobsAccordion.tsx

@@ -4,6 +4,7 @@ import { Job } from '@/PersonalDataTypes';
 import { Accordion, Row } from 'react-bootstrap';
 import { JobListProps } from './types';
 import JobTags from './JobTags';
+import md from '../Markdown';
 
 
 export type Props = {
@@ -23,7 +24,7 @@ export default function JobsAccordion(props: JobListProps) {
     return (
       <div>
         <div><strong>{job.position}</strong></div>
-        <div>{job.company}, {job.timerange}</div>
+        <div>{[job.company, job.timerange].filter(x => x).join(', ')}</div>
         {heading && (<div>({heading})</div>)}
       </div>
     )
@@ -34,7 +35,7 @@ export default function JobsAccordion(props: JobListProps) {
       <Accordion.Item eventKey="current">
         <Accordion.Header><JobTitle heading={config.currentHeading} job={jobs.current} /> </Accordion.Header>
         <Accordion.Body>
-          {jobs.current.description}
+          {md(jobs.current.description)}
           {jobs.current.tags && <JobTags tags={jobs.current.tags} />}
         </Accordion.Body>
       </Accordion.Item>
@@ -43,7 +44,7 @@ export default function JobsAccordion(props: JobListProps) {
       <Accordion.Item eventKey={`previous-${index}`} key={index}>
         <Accordion.Header><JobTitle job={job} /></Accordion.Header>
         <Accordion.Body className='multiline'>
-        {job.description}
+        {md(job.description)}
         {job.tags && <JobTags tags={job.tags} />}
         </Accordion.Body>
       </Accordion.Item>

src/app/globals.css

@@ -65,7 +65,7 @@ body {
     margin: 0.75em;
 }
 .accordion-button.collapsed {
-    background-color: lavender;
+    background-color: #eff2ff;
 }
 .accordion {
     margin: 1rem;

src/app/page.tsx

@@ -9,7 +9,7 @@ import Education from './components/Education';
 import { Col, Row } from 'react-bootstrap';
 import Footer from './components/Footer';
 import Photo from './components/Photo';
-import useSize from './hooks/Size';
+import Projects from './components/Projects';
 
 export default function Home() {
   return (
@@ -27,6 +27,7 @@ export default function Home() {
       <Row>
         <Col xs={12} xl={7}>
           <Row><WorkExperience /></Row>
+          <Row><Projects /></Row>
           <Row><Education /></Row>
         </Col>
         <Col>