add education to timeline

src/data/index.ts

@@ -10,6 +10,11 @@ const AdditionalFields = z.object({
       coordinates: z.tuple([z.number(), z.number()]).optional(),
     }),
   }),
+  education: z.array(
+    z.object({
+      name: z.string(),
+    }),
+  ),
 });
 
 const fullSchema = z.intersection(ResumeSchema, AdditionalFields);

src/data/resume.json

@@ -400,6 +400,7 @@
   ],
   "education": [
     {
+      "name": "Fredonia",
       "institution": "State University of New York at Fredonia",
       "url": "https://www.fredonia.edu/",
       "area": "Computer Information Systems",
@@ -533,7 +534,6 @@
         "Artifactory",
         "Pendo",
         "Google Analytics",
-        "Launch Darkly",
         "FullStory",
         "Sentry",
         "Segment",

src/pages/ResumeTimeline/EducationTimelineItem.tsx

@@ -0,0 +1,66 @@
+import { MdSchool } from 'react-icons/md';
+import { Timeline, Card } from 'flowbite-react';
+import { ResumeProfile } from 'data';
+import ResumeTimelineDates from './Dates';
+
+type EducationTimelineItemProps = {
+  education: NonNullable<ResumeProfile['education']>[0];
+};
+
+const logoWidth = 150;
+
+const EducationTimelineItem: React.FC<EducationTimelineItemProps> = ({
+  education,
+}) => (
+  <Timeline.Item key={education.name}>
+    <Timeline.Point icon={MdSchool} />
+    <Timeline.Content>
+      <Card>
+        <ResumeTimelineDates
+          startDate={education.startDate as string}
+          endDate={education.endDate as string}
+        />
+        <Timeline.Title className="flex flex-col justify-between gap-6 md:flex-row">
+          <div>
+            {education.studyType}
+            <div className="font-light italic">{education.institution}</div>
+          </div>
+          <div className="flex-none">
+            <a href={education.url}>
+              <img
+                alt={`${education.name} logo`}
+                src={`/images/school-icons/${education.name.toLowerCase()}-dark.svg`}
+                width={logoWidth}
+                className="hidden dark:inline"
+              />
+              <img
+                alt={`${education.name} logo`}
+                src={`/images/school-icons/${education.name.toLowerCase()}.svg`}
+                width={logoWidth}
+                className="inline dark:hidden"
+              />
+            </a>
+          </div>
+        </Timeline.Title>
+        <Timeline.Body>
+          <ul>
+            <li>
+              <strong>Major:</strong> {education.area}
+            </li>
+            <li>
+              <strong>Second Major:</strong> {education.secondaryArea}
+            </li>
+            <li>
+              <strong>Minor:</strong> {education.minorArea}
+            </li>
+            <li>
+              <strong>GPA:</strong> {education.score}
+            </li>
+          </ul>
+        </Timeline.Body>
+      </Card>
+    </Timeline.Content>
+  </Timeline.Item>
+);
+
+export default EducationTimelineItem;

src/pages/ResumeTimeline/WorkTimelineItem.tsx

@@ -18,7 +18,7 @@ const WorkTimelineItem: React.FC<WorkTimelineItemProps> = ({ work }) => (
           startDate={work.startDate as string}
           endDate={work.endDate as string}
         />
-        <Timeline.Title className="flex flex-col justify-between gap-2 md:flex-row">
+        <Timeline.Title className="flex flex-col justify-between gap-6 md:flex-row">
           <div>
             {work.position}
             <div className="font-light italic">{work.name}</div>

src/pages/ResumeTimeline/index.tsx

@@ -2,13 +2,15 @@ import data from 'data/index';
 import { Timeline } from 'flowbite-react';
 import ScrollPageHeading from 'components/ScrollPages/Heading';
 import WorkTimelineItem from './WorkTimelineItem';
+import EducationTimelineItem from './EducationTimelineItem';
 
 const ResumeTimeline: React.FC = () => (
   <section id="resume-timeline">
     <ScrollPageHeading>Experience</ScrollPageHeading>
     <div className="z-0 flex flex-col items-center">
       <Timeline>
         {data.work?.map((work) => <WorkTimelineItem work={work} />)}
+        {data.education?.map((ed) => <EducationTimelineItem education={ed} />)}
       </Timeline>
     </div>
   </section>