refactor: rename isDesktop to isTablet for 768px breakpoint

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

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