adjust bouncing ball bottom scroll text

Author: mikelind28

src/components/ImageLink.tsx

@@ -17,7 +17,7 @@ export default function ImageLink({ path, text, imagePath }: ImageLinkType) {
         style={{ backgroundImage: `url(${imagePath})`}}
       ></div>
 
-      <p className="w-full h-[4em] p-4 m-2 font-mono text-white text-2xl text-shadow-lg/100 bg-black/75 rounded-xl drop-shadow-lg/50 group-hover:drop-shadow-lg/75 transition-all duration-300">
+      <p className="w-full h-[4em] p-4 m-2 font-mono tracking-wider text-white text-2xl text-shadow-lg/100 bg-black/75 rounded-xl drop-shadow-lg/50 group-hover:drop-shadow-lg/75 transition-all duration-300">
         {text}
       </p>
     </Link>

src/pages/BouncingBall.tsx

@@ -8,10 +8,7 @@ export default function BouncingBall() {
 
     useEffect(() => {
         const main = mainRef.current;
-
         if (!main) return;
-
-        console.log('width:', main.clientWidth);
 
         const observer = new ResizeObserver(() => {
             const w = main.clientWidth;
@@ -79,13 +76,17 @@ export default function BouncingBall() {
                 />
             </svg>
 
-            <div className="h-20">
+            <div className="h-20 w-full">
                 <motion.p
                     key={mainWidth}
-                    initial={{ x: '150%' }}
-                    animate={{ x: '-150%' }}
-                    transition={{ duration: (mainWidth / 50), repeat: Infinity }}
-                    className="h-full mt-10 text-xl"
+                    initial={{ x: '100%',  }}
+                    animate={{ x: '-33%',  }}
+                    transition={{ 
+                        duration: mainWidth / 100, 
+                        repeat: Infinity, 
+                        ease: 'linear'
+                    }}
+                    className="p-2 w-full mt-10 text-lg font-stretch-120%"
                 >
                     Thanks for visiting ☺︎
                 </motion.p>

src/pages/Home.tsx

@@ -3,7 +3,7 @@ import ImageLink from "../components/ImageLink";
 export default function Home() {
     return (
         <main className="p-4">
-            <div className="grid grid-cols-1 gap-6 xs:grid-cols-2 xs:gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+            <div className="grid grid-cols-1 gap-6 min-[35rem]:grid-cols-2 min-[35rem]:gap-4 min-[52rem]:grid-cols-3 min-[68rem]:grid-cols-4 min-[86rem]:grid-cols-5">
                 <ImageLink
                     path="/falling-spheres"
                     text="Falling Spheres"