Refactor experience & education tiles to use a shared RecordTile component

src/components/Education.tsx

@@ -1,10 +1,26 @@
+import Link from 'next/link';
+
+import { EducationTile } from '@/components/Tiles/EducationTile';
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
-import LinkWithArrow from '@/components/ui/LinkWithArrow';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
 import { cn } from '@/lib/utils';
 
 export function Education() {
-  const isDesktop = useMediaQuery('(min-width: 768px)');
+  const educationDetails = (
+    <p className="mt-1 py-0 text-gray-700 dark:text-gray-300">
+      <Link
+        href="https://uwaterloo.ca/computational-mathematics/"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="mr-0.5 hover:text-black hover:underline hover:underline-offset-4 dark:hover:text-white"
+      >
+        Computational Mathematics
+      </Link>{' '}
+      is a interdisplinary major that combines Mathematics, Statistics, Optimization and Computer
+      Science, offered by the Faculty of Mathematics.
+      {/* TODO: Insert all courses using a recursive React component */}
+    </p>
+  );
+
   return (
     <section id="education" className="mb-12">
       <BlurFade delay={BLUR_FADE_DELAY * 7}>
@@ -18,62 +34,15 @@ export function Education() {
         </h2>
       </BlurFade>
       <BlurFade delay={BLUR_FADE_DELAY * 8}>
-        <div className="flex items-center">
-          <div className="relative flex-grow md:pl-12">
-            <div className={'absolute left-[5px] aspect-square rounded-lg bg-white'}>
-              {/* // center the bullet : `top-1/2 transform -translate-y-1/2` */}
-              <img
-                src="/images/uwaterlooLogo.png"
-                alt={'University of Waterloo logo'}
-                width={isDesktop ? 80 : 45}
-                height={isDesktop ? 80 : 45}
-                className="rounded-md"
-              />
-            </div>
-            <div className={'pl-16 ' + (isDesktop && 'py-3')}>
-              <div className="mb-2 flex flex-col justify-between sm:flex-row md:items-start">
-                <div>
-                  <LinkWithArrow
-                    href="https://uwaterloo.ca/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label={'Link to University of Waterloo'}
-                  >
-                    <h2 className="inline-flex items-center text-xl font-bold">
-                      University of Waterloo
-                    </h2>
-                  </LinkWithArrow>
-                  <h3 className="text-lg font-semibold">
-                    Bachelor of Mathematics, Computational Mathematics Major
-                  </h3>
-                  {!isDesktop && (
-                    <h3 className="font-typewriter text-gray-600 dark:text-gray-400">
-                      Sept 2022 - Present
-                    </h3>
-                  )}
-                </div>
-                {isDesktop && (
-                  <h3 className="font-typewriter text-gray-600 dark:text-gray-400">
-                    Sept 2022 - Present
-                  </h3>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-        <p className="mt-1 py-0 text-gray-700 dark:text-gray-300">
-          <LinkWithArrow
-            href="https://uwaterloo.ca/computational-mathematics/"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="mr-0.5"
-          >
-            Computational Mathematics
-          </LinkWithArrow>{' '}
-          is a interdisplinary major that combines Mathematics, Statistics, Optimization and
-          Computer Science, offered by the Faculty of Mathematics.
-          {/* TODO: Insert all courses using a recursive React component */}
-        </p>
+        <EducationTile
+          institutionLogo={'/images/uwaterlooLogo.png'}
+          institutionName={'University of Waterloo'}
+          institutionLink={'https://uwaterloo.ca/'}
+          degree={'Bachelor of Mathematics'}
+          major={'Computational Mathematics Major'}
+          duration={'Sept 2022 - Present'}
+          details={educationDetails}
+        />
       </BlurFade>
     </section>
   );

src/components/Header.tsx

@@ -32,7 +32,7 @@ const Header = ({
   email,
   resumeFile,
 }: HeaderProps) => {
-  const isDesktop = useMediaQuery('(min-width: 768px)');
+  const isTablet = useMediaQuery('(min-width: 768px)');
   const [copied, setCopiedId] = useState<string>();
   useEffect(() => {
     setTimeout(() => {
@@ -44,7 +44,7 @@ const Header = ({
     <div className="container mx-auto mb-10">
       <div className="flex flex-col items-center justify-between md:flex-row">
         <BlurFade delay={BLUR_FADE_DELAY}>
-          {!isDesktop && (
+          {!isTablet && (
             <div className="mb-4 flex-shrink-0 md:mb-0 md:mr-8">
               <img
                 src="/images/headshot.jpg"
@@ -145,7 +145,7 @@ const Header = ({
           </div>
         </div>
         <BlurFade delay={BLUR_FADE_DELAY} inView={true}>
-          {isDesktop && (
+          {isTablet && (
             <div className="flex-shrink-0">
               <img
                 src="/images/headshot.jpg"

src/components/Tiles/EducationTile.tsx

@@ -0,0 +1,34 @@
+import { RecordTile } from '@/components/Tiles/RecordTile';
+
+export type EducationTileProps = {
+  institutionLogo: string;
+  institutionName: string;
+  institutionLink: string;
+  degree: string;
+  major: string;
+  duration: string;
+  details?: React.ReactNode;
+};
+
+export function EducationTile({
+  institutionLogo,
+  institutionName,
+  institutionLink,
+  degree,
+  major,
+  duration,
+  details,
+}: EducationTileProps) {
+  const combinedDegreeNameAndMajor = degree.concat(', ').concat(major);
+  return (
+    <RecordTile
+      organizationLogo={institutionLogo}
+      organizationName={institutionName}
+      organizationLink={institutionLink}
+      role={combinedDegreeNameAndMajor}
+      duration={duration}
+      body={details}
+      organizationBeforeRole={true}
+    />
+  );
+}

src/components/Tiles/ExperienceTile.tsx

@@ -1,6 +1,6 @@
-import LinkWithArrow from '@/components/ui/LinkWithArrow';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
-// import Image from 'next/image';
+import { Icon } from '@iconify/react';
+
+import { RecordTile } from '@/components/Tiles/RecordTile';
 
 export type ExperienceTileProps = {
   companyLogo: string;
@@ -19,57 +19,30 @@ export function ExperienceTile({
   period,
   responsibilities,
 }: ExperienceTileProps) {
-  const isDesktop = useMediaQuery('(min-width: 768px)');
-  return (
-    <div
-      className={
-        (!(responsibilities && responsibilities.length > 0) && !isDesktop ? '-mb-6' : 'mb-6') +
-        ' ' +
-        'flex items-center'
-      }
-    >
-      <div className="relative flex-grow md:pl-12">
-        <div className="absolute left-[5px] top-3 aspect-square rounded-lg bg-white">
-          {/* // center the bullet : `top-1/2 transform -translate-y-1/2` */}
-          <img
-            src={companyLogo}
-            alt={`${companyName} logo`}
-            width={isDesktop ? 80 : 45}
-            height={isDesktop ? 80 : 45}
-            className="rounded-md"
-          />
-        </div>
-        <div className="py-3 pl-16">
-          <div className="mb-4 flex flex-col justify-between sm:flex-row md:items-start">
-            <div>
-              <h2 className="text-xl font-bold">{position}</h2>
-              <LinkWithArrow
-                href={companyLink}
-                target="_blank"
-                rel="noopener noreferrer"
-                aria-label={`Link to ${companyName}`}
-              >
-                <h3 className="text-lg font-semibold">{companyName}</h3>
-              </LinkWithArrow>
-              {!isDesktop && (
-                <h3 className="font-typewriter text-gray-600 dark:text-gray-400">{period}</h3>
-              )}
-            </div>
-            {isDesktop && (
-              <h3 className="font-typewriter text-gray-600 dark:text-gray-400">{period}</h3>
-            )}
-          </div>
-          {responsibilities && responsibilities.length > 0 && (
-            <div className="mt-4">
-              <ul className="list-inside space-y-1 text-gray-700 dark:text-gray-300">
-                {responsibilities.map((responsibility, index) => (
-                  <li key={index}>- {responsibility}</li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </div>
-      </div>
+  const responsibilitiesAsHTML = responsibilities && responsibilities.length > 0 && (
+    <div className="mt-3">
+      <ul className="list-inside list-none space-y-1 text-gray-700 dark:text-gray-300">
+        {responsibilities.map((responsibility, index) => (
+          <li key={index}>
+            <span className="mr-1 inline-block align-middle">
+              {<Icon icon={'icons8:angle-right'} inline={true} />}
+            </span>
+            {responsibility}
+          </li>
+        ))}
+      </ul>
     </div>
   );
+
+  return (
+    <RecordTile
+      organizationLogo={companyLogo}
+      organizationName={companyName}
+      organizationLink={companyLink}
+      role={position}
+      duration={period}
+      body={responsibilitiesAsHTML}
+      organizationBeforeRole={true}
+    />
+  );
 }

src/components/Tiles/ProjectTile.tsx

@@ -29,7 +29,7 @@ export function ProjectTile({
   liveUrl,
   techStack,
 }: ProjectTileProps) {
-  // const isDesktop = useMediaQuery('(min-width: 768px)')
+  // const isTablet = useMediaQuery('(min-width: 768px)')
   return (
     <div className="items-center">
       <div className="mb-2 flex flex-col justify-between sm:flex-row md:items-start">

src/components/Tiles/RecordTile.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+
+import LinkWithArrow from '@/components/ui/LinkWithArrow';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+// import Image from 'next/image';
+
+export type RecordTileProps = {
+  organizationLogo: string;
+  organizationName: string;
+  organizationLink: string;
+  role: string;
+  duration: string;
+  body?: React.ReactNode;
+  organizationBeforeRole?: boolean;
+};
+
+function jobDescriptorSection(
+  organization: string,
+  link: string,
+  role: string,
+  duration: string,
+  isOrganizationBeforeRole: boolean = false,
+  isWidth768pxOrMore: boolean,
+) {
+  // styling for:
+  //    h2 - text-xl font-bold
+  //    h3 - text-lg font-semibold
+
+  const organizationNameHeadingTag = isOrganizationBeforeRole ? 'h2' : 'h3';
+  const organizationNameHeading = React.createElement(
+    LinkWithArrow,
+    {
+      href: link,
+      target: '_blank',
+      rel: 'noopener noreferrer',
+      'aria-label': `Link to ${organization}`,
+    },
+    React.createElement(
+      organizationNameHeadingTag,
+      { className: isOrganizationBeforeRole ? 'text-xl font-bold' : 'text-lg font-semibold' },
+      organization,
+    ),
+  );
+  const roleHeadingTag = !isOrganizationBeforeRole ? 'h2' : 'h3';
+  const roleHeading = React.createElement(
+    roleHeadingTag,
+    { className: !isOrganizationBeforeRole ? 'text-xl font-bold' : 'text-lg font-semibold' },
+    role,
+  );
+
+  return (
+    <div className="flex flex-col justify-between sm:flex-row md:items-start">
+      <div>
+        <>
+          {isOrganizationBeforeRole && (
+            <>
+              {organizationNameHeading}
+              {roleHeading}
+            </>
+          )}
+          {!isOrganizationBeforeRole && (
+            <>
+              {roleHeading}
+              {organizationNameHeading}
+            </>
+          )}
+        </>
+        {!isWidth768pxOrMore && (
+          <h3 className="font-typewriter text-gray-600 dark:text-gray-400">{duration}</h3>
+        )}
+      </div>
+      {isWidth768pxOrMore && (
+        <h3 className="font-typewriter text-gray-600 dark:text-gray-400">{duration}</h3>
+      )}
+    </div>
+  );
+}
+
+export function RecordTile({
+  organizationLogo,
+  organizationName,
+  organizationLink,
+  role,
+  duration,
+  body,
+  organizationBeforeRole = false,
+}: RecordTileProps) {
+  const isTablet = useMediaQuery('(min-width: 768px)');
+  const isDesktop = useMediaQuery('(min-width: 1280px)');
+
+  //   const topRow = (
+  //     <h2 className="text-xl font-bold">{!organizationBeforeRole ? role : organizationName}</h2>
+  //   );
+  //   const bottomRow = "";
+  return (
+    <div className="-mb-2 flex items-center">
+      <div className="group relative flex-grow lg:-ml-[132px] xl:-ml-40 2xl:-ml-52">
+        {isTablet && (
+          <div className="opacity-0 transition-opacity delay-100 md:group-hover:opacity-100">
+            <div className="absolute top-1/2 aspect-square -translate-y-1/2 transform rounded-lg bg-transparent">
+              {/* // center the bullet : `top-1/2 transform -translate-y-1/2` */}
+              <img
+                src={organizationLogo}
+                alt={`${organizationName} logo`}
+                width={isDesktop ? 80 : 70}
+                height={isDesktop ? 80 : 70}
+                className="rounded-md"
+              />
+            </div>
+          </div>
+        )}
+        <div className="py-3 lg:pl-[132px] xl:pl-40 2xl:pl-52">
+          {jobDescriptorSection(
+            organizationName,
+            organizationLink,
+            role,
+            duration,
+            organizationBeforeRole,
+            isTablet,
+          )}
+          {body}
+        </div>
+      </div>
+    </div>
+  );
+}