feat: initialize portfolio site with core components, pages, and content structure, and update Next.js configuration.

app/components/animations/LazyRevealImage.tsx

@@ -21,7 +21,6 @@ export function LazyRevealImage({
 }: Readonly<LazyRevealImageProps>) {
   const shouldReduceMotion = useReducedMotion();
   const [loaded, setLoaded] = useState(false);
-  const [animating, setAnimating] = useState(!shouldReduceMotion);
 
   return (
     <motion.div
@@ -29,28 +28,24 @@ export function LazyRevealImage({
       initial={
         shouldReduceMotion
           ? { opacity: 0 }
-          : { opacity: 0, filter: "blur(20px)", scale: 1.05 }
+          : { opacity: 0, y: 20, scale: 1.02 }
       }
       animate={
         loaded
           ? shouldReduceMotion
             ? { opacity: 1 }
-            : { opacity: 1, filter: "blur(0px)", scale: 1 }
+            : { opacity: 1, y: 0, scale: 1 }
           : shouldReduceMotion
             ? { opacity: 0 }
-            : { opacity: 0, filter: "blur(20px)", scale: 1.05 }
+            : { opacity: 0, y: 20, scale: 1.02 }
       }
       transition={{
         duration: shouldReduceMotion ? 0.25 : 0.75,
         ease: [0.16, 1, 0.3, 1],
       }}
       style={{
-        willChange:
-          animating && !shouldReduceMotion
-            ? "filter, transform, opacity"
-            : undefined,
+        willChange: !shouldReduceMotion ? "transform, opacity" : undefined,
       }}
-      onAnimationComplete={() => setAnimating(false)}
     >
       <Image
         src={src}
@@ -59,10 +54,7 @@ export function LazyRevealImage({
         loading="lazy"
         sizes={sizes}
         placeholder={typeof src === "string" ? "empty" : "blur"}
-        onLoad={() => {
-          setAnimating(true);
-          setLoaded(true);
-        }}
+        onLoad={() => setLoaded(true)}
         className={imageClassName}
       />
     </motion.div>