♻️ refactor(curriculum): add certifications

src/components/molecules/CurriculumItem/CurriculumItem.tsx

@@ -5,8 +5,8 @@ import { ExpandMore as ExpandIcon } from '@mui/icons-material'
 interface CurriculumEntryProps {
   title: string
   dates: string
-  company: string
+  company?: string
-  location: string
+  location?: string
   children?: React.ReactNode
 }
 
@@ -60,12 +60,16 @@ const CurriculumItem = (props: CurriculumEntryProps) => {
           <Grid item xs={3} component={Typography} variant="h6" color="primary.main" textAlign="right">
             {props.dates}
           </Grid>
-          <Grid item xs={9} component={Typography} variant="overline" color="text.secondary">
+          {typeof props.company !== 'undefined' && (
-            {props.company}
+            <Grid item xs={9} component={Typography} variant="overline" color="text.secondary">
-          </Grid>
+              {props.company}
-          <Grid item xs={3} component={Typography} variant="subtitle1" color="text.secondary" textAlign="right">
+            </Grid>
-            <em>{props.location}</em>
+          )}
-          </Grid>
+          {typeof props.location !== 'undefined' && (
+            <Grid item xs={3} component={Typography} variant="subtitle1" color="text.secondary" textAlign="right">
+              <em>{props.location}</em>
+            </Grid>
+          )}
         </Grid>
         <Box display={{ xs: 'block', sm: 'none' }}>
           <Typography variant="subtitle1" color="primary.main">
@@ -74,12 +78,16 @@ const CurriculumItem = (props: CurriculumEntryProps) => {
           <Typography variant="h6">
             <b>{props.title}</b>
           </Typography>
-          <Typography variant="button" color="text.secondary">
+          {typeof props.company !== 'undefined' && (
-            {props.company}
+            <Typography variant="button" color="text.secondary">
-          </Typography>
+              {props.company}
-          <Typography variant="subtitle2" color="text.secondary">
+            </Typography>
-            <em>{props.location}</em>
+          )}
-          </Typography>
+          {typeof props.location !== 'undefined' && (
+            <Typography variant="subtitle2" color="text.secondary">
+              <em>{props.location}</em>
+            </Typography>
+          )}
         </Box>
       </AccordionSummary>
       <AccordionDetails>{props.children}</AccordionDetails>

src/components/pages/CurriculumPage/CurriculumPage.tsx

@@ -1,13 +1,13 @@
-import { Box, Divider, Link, Table, TableCell, TableRow, Typography } from '@mui/material'
+import { Box, Divider, Link, Stack, Table, TableCell, TableRow, Typography } from '@mui/material'
 
-import { Award, Extracurricular, Publication } from 'components/atoms'
+import { Award, ExternalIconLink, Extracurricular, Publication } from 'components/atoms'
 import { CurriculumItem } from 'components/molecules'
 import { Page } from 'components/templates'
 
 const Curriculum = () => {
   return (
     <Page title="Curriculum">
-      <Box component="section" id="robotics">
+      <Box component="section" id="work">
         <Typography variant="h4" color="primary.main" gutterBottom>
           Work Experience
         </Typography>
@@ -114,10 +114,22 @@ const Curriculum = () => {
           Education
         </Typography>
 
+        <Typography variant="h5" gutterBottom>
+          Certifications
+        </Typography>
+        {/* id="WUT" */}
+        <CurriculumItem title="IBM Full Stack Software Developer Professional Certificate" dates="03/24">
+          <Stack direction="row" alignItems="flex-end">
+            <Typography>Credential ID: EZ34GWQLRHEG</Typography>
+            <ExternalIconLink size="small" fontSize="small" href="https://www.coursera.org/account/accomplishments/professional-cert/EZ34GWQLRHEG" />
+          </Stack>
+        </CurriculumItem>
+
         <Typography
           variant="h5"
           onClick={() => window.open('https://master-emaro.ec-nantes.fr/', '_blank')}
           sx={{
+            mt: 2,
             cursor: 'pointer',
             ':hover': {
               backgroundColor: 'transparent',