fix eslint warnings and image styling issues

- replace <img> with Next.js <Image> component in Timeline and about page for better performance and LCP
- add eslint-disable comments for valid useEffect dependency exceptions in search and HackerNews components
- remove border/outline from hover images by adding !important overrides to .image-hover class

fixes all build warnings while maintaining existing functionality.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: benthecoder

app/about/page.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import Timeline from "@/components/Timeline";
 
 type ImageOnHoverProps = {
@@ -18,7 +19,13 @@ const ImageOnHover: React.FC<ImageOnHoverProps> = ({
         {text}
       </span>
       <div className="absolute hidden group-hover:flex left-1/2 -translate-x-1/2 bottom-full pb-2 z-50 pointer-events-none">
-        <img src={imagePath} alt={altText} className="image-hover" />
+        <Image
+          src={imagePath}
+          alt={altText}
+          className="image-hover"
+          width={300}
+          height={200}
+        />
       </div>
     </span>
   );

app/globals.css

@@ -299,6 +299,8 @@ mark {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
   animation: fadeInImage 200ms ease-out;
   transform-origin: center;
+  border: none !important;
+  outline: none !important;
 }
 
 .dark .image-hover {

app/search/page.tsx

@@ -125,6 +125,7 @@ function SearchContent() {
     if (cached) setResults(JSON.parse(cached));
 
     setHasSearched(sessionStorage.getItem("hasSearched") === "true");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleSearch = async (e: React.FormEvent) => {
@@ -220,6 +221,7 @@ function SearchContent() {
       // Don't auto-trigger search when params change
       // Users must press Enter or click Search button
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchParams]);
 
   // Clear hasSearched when query changes

components/HackerNews.tsx

@@ -45,6 +45,7 @@ const HackerNews = () => {
 
   useEffect(() => {
     fetchTopStories();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentPage]);
 
   const handleNextPage = () => {

components/Timeline.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState, useRef } from "react";
+import Image from "next/image";
 
 type ImageLink = {
   text: string;
@@ -130,10 +131,12 @@ const Timeline: React.FC<TimelineProps> = ({ events }) => {
               left: `${position.left}px`,
             }}
           >
-            <img
+            <Image
               src={link.imagePath}
               alt={link.altText || link.text}
               className="image-hover"
+              width={800}
+              height={600}
             />
           </div>
         )}