fix: replace img tags with next/image, fix useEffect deps, suppress test mock warnings

- projects/page.tsx & projects/[slug]/page.tsx: <img> → <Image fill unoptimized>
- ActivityFeed.tsx: add allQuotes.length to useEffect deps
- Test mocks: eslint-disable for intentional <img> in next/image mocks

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

app/__tests__/components/CurrentlyReading.test.tsx

@@ -11,6 +11,7 @@ jest.mock("next-intl", () => ({
 // Mock next/image
 jest.mock("next/image", () => ({
   __esModule: true,
+  // eslint-disable-next-line @next/next/no-img-element
   default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => <img {...props} alt={props.alt || ""} />,
 }));
 

app/__tests__/components/Hero.test.tsx

@@ -30,6 +30,7 @@ interface ImageProps {
 jest.mock('next/image', () => ({
   __esModule: true,
   default: ({ src, alt, fill, priority, ...props }: ImageProps) => (
+    // eslint-disable-next-line @next/next/no-img-element
     <img 
       src={src} 
       alt={alt} 

app/components/ActivityFeed.tsx

@@ -110,7 +110,7 @@ export default function ActivityFeed({
       clearInterval(statusInterval);
       clearInterval(quoteInterval);
     };
-  }, [onActivityChange]);
+  }, [onActivityChange, allQuotes.length]);
 
   if (loading) {
     return <div className="animate-pulse space-y-4">

app/projects/[slug]/page.tsx

@@ -2,6 +2,7 @@
 
 import { motion } from 'framer-motion';
 import { ExternalLink, Calendar, ArrowLeft, Github as GithubIcon, Share2 } from 'lucide-react';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { useState, useEffect } from 'react';
@@ -132,9 +133,11 @@ const ProjectDetail = () => {
             className="mb-16 rounded-2xl overflow-hidden shadow-2xl bg-stone-100 aspect-video relative"
         >
              {project.imageUrl ? (
-                <img 
+                <Image 
                     src={project.imageUrl} 
                     alt={project.title} 
+                    fill
+                    unoptimized
                     className="w-full h-full object-cover"
                 />
              ) : (

app/projects/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react";
 import { motion } from 'framer-motion';
 import { ExternalLink, Github, Calendar, ArrowLeft, Search } from 'lucide-react';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useLocale, useTranslations } from "next-intl";
 
@@ -159,9 +160,11 @@ const ProjectsPage = () => {
               <div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
                 {project.imageUrl ? (
                   <>
-                    <img 
+                    <Image 
                       src={project.imageUrl}
                       alt={project.title}
+                      fill
+                      unoptimized
                       className="w-full h-full object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
                     />
                     <div className="absolute inset-0 bg-gradient-to-t from-stone-900/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />