From e33c0ba415f819b4691a1047245f67f089df6afb Mon Sep 17 00:00:00 2001
From: Himank Dave <hddave@uwaterloo.ca>
Date: Wed, 9 Apr 2025 20:58:06 -0400
Subject: [PATCH 1/5] style: improve responsibilities list with cleaner bullet
 styling

---
 src/components/Tiles/ExperienceTile.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Tiles/ExperienceTile.tsx b/src/components/Tiles/ExperienceTile.tsx
index e5314c0..6a0e6ee 100644
--- a/src/components/Tiles/ExperienceTile.tsx
+++ b/src/components/Tiles/ExperienceTile.tsx
@@ -61,9 +61,9 @@ export function ExperienceTile({
           </div>
           {responsibilities && responsibilities.length > 0 && (
             <div className="mt-4">
-              <ul className="list-inside space-y-1 text-gray-700 dark:text-gray-300">
+              <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>

From f65125c42dc5df1d8c897834789be7f2e83c4d65 Mon Sep 17 00:00:00 2001
From: Himank Dave <hddave@uwaterloo.ca>
Date: Wed, 9 Apr 2025 21:44:35 -0400
Subject: [PATCH 2/5] feat: move company logo outside margins and reveal on
 hover

---
 src/components/Tiles/ExperienceTile.tsx | 28 ++++++++++++++-----------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/Tiles/ExperienceTile.tsx b/src/components/Tiles/ExperienceTile.tsx
index 6a0e6ee..213841e 100644
--- a/src/components/Tiles/ExperienceTile.tsx
+++ b/src/components/Tiles/ExperienceTile.tsx
@@ -28,18 +28,22 @@ export function ExperienceTile({
         '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="group relative flex-grow lg:-ml-[132px] xl:-ml-40 2xl:-ml-52">
+        {isDesktop && (
+          <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-white">
+              {/* // center the bullet : `top-1/2 transform -translate-y-1/2` */}
+              <img
+                src={companyLogo}
+                alt={`${companyName} logo`}
+                width={80}
+                height={80}
+                className="rounded-md"
+              />
+            </div>
+          </div>
+        )}
+        <div className="py-3 lg:pl-[132px] xl:pl-40 2xl:pl-52">
           <div className="mb-4 flex flex-col justify-between sm:flex-row md:items-start">
             <div>
               <h2 className="text-xl font-bold">{position}</h2>

From af05bf6d9a9496448686cab11efbaeb2d5f8275e Mon Sep 17 00:00:00 2001
From: Himank Dave <hddave@uwaterloo.ca>
Date: Wed, 9 Apr 2025 21:48:45 -0400
Subject: [PATCH 3/5] refactor: rename isDesktop to isTablet for 768px
 breakpoint

---
 src/components/Education.tsx            | 12 ++++++------
 src/components/Header.tsx               |  6 +++---
 src/components/Tiles/ExperienceTile.tsx | 10 +++++-----
 src/components/Tiles/ProjectTile.tsx    |  2 +-
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/Education.tsx b/src/components/Education.tsx
index 0965c58..e80cda0 100644
--- a/src/components/Education.tsx
+++ b/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>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index d8e674a..d200736 100644
--- a/src/components/Header.tsx
+++ b/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"
diff --git a/src/components/Tiles/ExperienceTile.tsx b/src/components/Tiles/ExperienceTile.tsx
index 213841e..0491c05 100644
--- a/src/components/Tiles/ExperienceTile.tsx
+++ b/src/components/Tiles/ExperienceTile.tsx
@@ -19,17 +19,17 @@ export function ExperienceTile({
   period,
   responsibilities,
 }: ExperienceTileProps) {
-  const isDesktop = useMediaQuery('(min-width: 768px)');
+  const isTablet = useMediaQuery('(min-width: 768px)');
   return (
     <div
       className={
-        (!(responsibilities && responsibilities.length > 0) && !isDesktop ? '-mb-6' : 'mb-6') +
+        (!(responsibilities && responsibilities.length > 0) && !isTablet ? '-mb-6' : 'mb-6') +
         ' ' +
         'flex items-center'
       }
     >
       <div className="group relative flex-grow lg:-ml-[132px] xl:-ml-40 2xl:-ml-52">
-        {isDesktop && (
+        {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-white">
               {/* // center the bullet : `top-1/2 transform -translate-y-1/2` */}
@@ -55,11 +55,11 @@ 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>
diff --git a/src/components/Tiles/ProjectTile.tsx b/src/components/Tiles/ProjectTile.tsx
index d3e85dc..395b187 100644
--- a/src/components/Tiles/ProjectTile.tsx
+++ b/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">

From 6979a7f0ba365c0f61abef45efffac4591ebff48 Mon Sep 17 00:00:00 2001
From: Himank Dave <hddave@uwaterloo.ca>
Date: Wed, 9 Apr 2025 21:55:09 -0400
Subject: [PATCH 4/5] feat: make company logo backdrop transparent and adjust
 image size for large screens

---
 src/components/Tiles/ExperienceTile.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Tiles/ExperienceTile.tsx b/src/components/Tiles/ExperienceTile.tsx
index 0491c05..b75e024 100644
--- a/src/components/Tiles/ExperienceTile.tsx
+++ b/src/components/Tiles/ExperienceTile.tsx
@@ -20,6 +20,7 @@ export function ExperienceTile({
   responsibilities,
 }: ExperienceTileProps) {
   const isTablet = useMediaQuery('(min-width: 768px)');
+  const isDesktop = useMediaQuery('(min-width: 1280px)');
   return (
     <div
       className={
@@ -31,13 +32,13 @@ export function ExperienceTile({
       <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-white">
+            <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={80}
-                height={80}
+                width={isDesktop ? 80 : 70}
+                height={isDesktop ? 80 : 70}
                 className="rounded-md"
               />
             </div>

From cdab2c5c892f52e421c75318856cfe69668b2f51 Mon Sep 17 00:00:00 2001
From: Himank Dave <hddave@uwaterloo.ca>
Date: Wed, 9 Apr 2025 22:11:59 -0400
Subject: [PATCH 5/5] style: adjust spacing between - positions with/(out)
 responsibilities and between given position and responsibility

---
 src/components/Tiles/ExperienceTile.tsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/Tiles/ExperienceTile.tsx b/src/components/Tiles/ExperienceTile.tsx
index b75e024..2860b38 100644
--- a/src/components/Tiles/ExperienceTile.tsx
+++ b/src/components/Tiles/ExperienceTile.tsx
@@ -22,13 +22,7 @@ export function ExperienceTile({
   const isTablet = useMediaQuery('(min-width: 768px)');
   const isDesktop = useMediaQuery('(min-width: 1280px)');
   return (
-    <div
-      className={
-        (!(responsibilities && responsibilities.length > 0) && !isTablet ? '-mb-6' : 'mb-6') +
-        ' ' +
-        'flex items-center'
-      }
-    >
+    <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">
@@ -45,7 +39,7 @@ export function ExperienceTile({
           </div>
         )}
         <div className="py-3 lg:pl-[132px] xl:pl-40 2xl:pl-52">
-          <div className="mb-4 flex flex-col justify-between sm:flex-row md:items-start">
+          <div className="flex flex-col justify-between sm:flex-row md:items-start">
             <div>
               <h2 className="text-xl font-bold">{position}</h2>
               <LinkWithArrow
@@ -65,7 +59,7 @@ export function ExperienceTile({
             )}
           </div>
           {responsibilities && responsibilities.length > 0 && (
-            <div className="mt-4">
+            <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>