Changed the behavior of the 'more' bar into something less annoying, and re-did the entire project grid component chain.

components/ProjectCard.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import type { Project } from "@/data/content";
 import SimpleGallery from "./SimpleGallery";
 import Link from "next/link";
-import { relative } from "path";
 import "../styles/project-card.css";
 
 type Props = {
@@ -12,14 +11,11 @@ type Props = {
   visible: boolean;
   selected: boolean;
   setSelected: (selected: any) => void;
-  updateHeight: (projectId: number, heightPx: number) => void;
 };
 
-export default function ProjectCard({ project, visible, selected = false, setSelected, updateHeight}: Props) {
+export default function ProjectCard({ project, visible, selected = false, setSelected }: Props) {
   const [hovered, setHovered] = useState(false);
-  const [expandedImage, setExpandedImage] = useState(false);
-  const contentRef = useRef(null);
-  
+
   function projectTagsComponent(project: Project){
     return (<div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 12 }}>
           {project.tags.map((tag) => (
@@ -42,8 +38,7 @@ export default function ProjectCard({ project, visible, selected = false, setSel
   
   function notSelectedComponent(){
     return (
-      <div 
-        ref={contentRef}
+      <div
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
         onClick={() => setSelected(project.id)}
@@ -88,29 +83,13 @@ export default function ProjectCard({ project, visible, selected = false, setSel
     );
   }
 
- useEffect(() => {
-  if (!contentRef.current) return;
-
-  const observer = new ResizeObserver((entries) => {
-    const height = entries[0]?.borderBoxSize?.[0]?.blockSize
-      ?? entries[0]?.contentRect.height;
-    if (height > 0) {
-      updateHeight(project.id, height);
-    }
-  });
-
-  observer.observe(contentRef.current);
-  return () => observer.disconnect();
-}, [updateHeight, project.id]);
-
-  
   function selectedComponent(){
       return (
-      <div 
-        ref={contentRef}
+      <div
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
-        className="project-card"
+        className="project-card project-card-selected"
+        key={project.id}
         style={{
           minWidth: "10em",
           maxWidth: "90vw",
@@ -145,11 +124,12 @@ export default function ProjectCard({ project, visible, selected = false, setSel
           {project.description}
         </p>
      
-       {contentRef.current && project.images && project.images.length > 0 && (
-        <SimpleGallery images={project.images} videos={project.videos} title={project.title} />        
+       {project.images && project.images.length > 0 && (
+        <SimpleGallery images={project.images} videos={project.videos} title={project.title} />
       )}
 
-      <div v-if={project.link} style={{display: "flex", gap: 12, flexWrap: "wrap", marginTop: 16}}>
+      {project.link && (
+      <div style={{display: "flex", gap: 12, flexWrap: "wrap", marginTop: 16}}>
         <Link
         className="expand-on-hover-button"
         style={{
@@ -182,24 +162,17 @@ export default function ProjectCard({ project, visible, selected = false, setSel
           borderRadius: "var(--radius-md)",
         }} target="_blank" href={project.link} >Link</Link>
         </div>
+      )}
       </div>
     );
       }
 
   function imgComponent(){
     return (
-      <img src={project.images?.[0]} alt={`${project.title} screenshot`} style={{width: "100%", borderRadius: 4, marginBottom: 16, objectFit: "cover", maxHeight: 180}} />
+      <img src={`/${project.images?.[0]}`} alt={`${project.title} screenshot`} width={800} height={180} style={{width: "100%", borderRadius: 4, marginBottom: 16, objectFit: "cover", height: 180}} />
     );
   }
 
-  useEffect(() => {
-    if (!selected) {
-     if (expandedImage && contentRef.current) {      
-      setExpandedImage(false);
-    }
-    }
-  });
-
   if (selected) {
     return selectedComponent();
   } else {