add bouncing ball page; add home page link styling; fix some bugs in ImageSliders and FallingSpheres

Author: mikelind28

public/bouncing-ball.gif

@@ -19,17 +19,25 @@ export default function Header() {
         case '/image-sliders':
             currentPage = 'Image Sliders';
             break;
+        case '/bouncing-ball':
+            currentPage = 'Bouncing Ball';
+            break;
+        case '/':
+            currentPage = 'Home';
+            break;
         default:
             break;
     }
 
     return (
-        <header className="z-100 sticky top-0 bg-white w-full flex items-center gap-4 p-2">
-            <Link to='/' className="ml-2 text-2xl border border-black rounded-md bg-white">
-                <IoHomeOutline className="m-2"/>
-            </Link>
+        <header className="z-100 sticky top-0 bg-white w-full flex items-center p-2 font-mono">
+            { currentPage !== 'Home' &&
+                <Link to='/' className="ml-2 text-2xl border border-black rounded-md bg-white">
+                    <IoHomeOutline className="m-2"/>
+                </Link>
+            }
 
-            <div>
+            <div className="pl-4">
                 <h1 className="text-xl text-center">
                     Animation Experimentation
                 </h1>

public/falling-spheres.gif

@@ -0,0 +1,25 @@
+import { Link } from "react-router"
+
+type ImageLinkType = {
+    path: string; 
+    text: string;
+    imagePath: string;
+}
+
+export default function ImageLink({ path, text, imagePath }: ImageLinkType) {
+  return (
+    <Link
+      to={path}
+      className={`group relative flex items-center w-full max-w-100 aspect-square border rounded-lg hover:scale-105 transition-transform duration-100 overflow-hidden`}
+    >
+      <div
+        className="absolute w-full h-full bg-cover bg-center rounded-lg brightness-75 group-hover:brightness-90 transition-all duration-300 blur-[1px] scale-105 group-hover:blur-[0px]"
+        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">
+        {text}
+      </p>
+    </Link>
+  )
+}

public/image-sliders.gif

@@ -1,5 +1,8 @@
 @import 'tailwindcss';
 
+@theme {
+  --breakpoint-xs: 34rem;
+}
 
 .zalando-sans-expanded {
   font-family: "Zalando Sans Expanded", sans-serif;

public/my-proficiencies.gif

@@ -9,6 +9,7 @@ import FallingSpheres from './pages/FallingSpheres.tsx';
 import MyProficiencies from './pages/MyProficiencies.tsx';
 import NatureSlideshow from './pages/NatureSlideshow.tsx';
 import ImageSliders from './pages/ImageSliders.tsx';
+import BouncingBall from './pages/BouncingBall.tsx';
 
 const router = createBrowserRouter([
   {
@@ -35,6 +36,10 @@ const router = createBrowserRouter([
         path: '/image-sliders',
         Component: ImageSliders,
       },
+      {
+        path: '/bouncing-ball',
+        Component: BouncingBall,
+      },
     ]
   },
 ]);