Polish experience tile layout with hover logo and cleaner list styling (#5)

Author: steadyfall

src/components/Education.tsx

@@ -4,7 +4,7 @@ import { useMediaQuery } from '@/hooks/useMediaQuery';
 import { cn } from '@/lib/utils';
 
 export function Education() {
-  const isDesktop = useMediaQuery('(min-width: 768px)');
+  const isTablet = useMediaQuery('(min-width: 768px)');
   return (
     <section id="education" className="mb-12">
       <BlurFade delay={BLUR_FADE_DELAY * 7}>
@@ -25,12 +25,12 @@ export function Education() {
               <img
                 src="/images/uwaterlooLogo.png"
                 alt={'University of Waterloo logo'}
-                width={isDesktop ? 80 : 45}
-                height={isDesktop ? 80 : 45}
+                width={isTablet ? 80 : 45}
+                height={isTablet ? 80 : 45}
                 className="rounded-md"
               />
             </div>
-            <div className={'pl-16 ' + (isDesktop && 'py-3')}>
+            <div className={'pl-16 ' + (isTablet && 'py-3')}>
               <div className="mb-2 flex flex-col justify-between sm:flex-row md:items-start">
                 <div>
                   <LinkWithArrow
@@ -46,13 +46,13 @@ export function Education() {
                   <h3 className="text-lg font-semibold">
                     Bachelor of Mathematics, Computational Mathematics Major
                   </h3>
-                  {!isDesktop && (
+                  {!isTablet && (
                     <h3 className="font-typewriter text-gray-600 dark:text-gray-400">
                       Sept 2022 - Present
                     </h3>
                   )}
                 </div>
-                {isDesktop && (
+                {isTablet && (
                   <h3 className="font-typewriter text-gray-600 dark:text-gray-400">
                     Sept 2022 - Present
                   </h3>

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/ExperienceTile.tsx

@@ -19,28 +19,27 @@ export function ExperienceTile({
   period,
   responsibilities,
 }: ExperienceTileProps) {
-  const isDesktop = useMediaQuery('(min-width: 768px)');
+  const isTablet = useMediaQuery('(min-width: 768px)');
+  const isDesktop = useMediaQuery('(min-width: 1280px)');
   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 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={companyLogo}
+                alt={`${companyName} 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">
+          <div className="flex flex-col justify-between sm:flex-row md:items-start">
             <div>
               <h2 className="text-xl font-bold">{position}</h2>
               <LinkWithArrow
@@ -51,19 +50,19 @@ export function ExperienceTile({
               >
                 <h3 className="text-lg font-semibold">{companyName}</h3>
               </LinkWithArrow>
-              {!isDesktop && (
+              {!isTablet && (
                 <h3 className="font-typewriter text-gray-600 dark:text-gray-400">{period}</h3>
               )}
             </div>
-            {isDesktop && (
+            {isTablet && (
               <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">
+            <div className="mt-3">
+              <ul className="list-inside list-['-_'] space-y-1 text-gray-700 dark:text-gray-300">
                 {responsibilities.map((responsibility, index) => (
-                  <li key={index}>- {responsibility}</li>
+                  <li key={index}>{responsibility}</li>
                 ))}
               </ul>
             </div>

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