added site as project. Improved mobile display

components/ProjectCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { Project } from "@/data/content";
 import SimpleGallery from "./SimpleGallery";
 
@@ -10,13 +10,14 @@ type Props = {
   visible: boolean;
   selected: boolean;
   setSelected: (selected: any) => void;
-  setExpandedHeight: (activeId: number) => void;
+  updateHeight: (activeId: number, contentRef: HTMLElement | null) => void;
 };
 
-export default function ProjectCard({ project, visible, selected = false, setSelected, setExpandedHeight}: Props) {
+export default function ProjectCard({ project, visible, selected = false, setSelected, updateHeight}: Props) {
   const [hovered, setHovered] = useState(false);
   const [expandedImage, setExpandedImage] = useState(false);
-  const [currentExpandedHeight, setCurrentExpandedHeight] = useState(0);
+  const contentRef = useRef(null);
+  
   function projectTagsComponent(project: Project){
     return (<div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 12 }}>
           {project.tags.map((tag) => (
@@ -40,11 +41,12 @@ export default function ProjectCard({ project, visible, selected = false, setSel
   function notSelectedComponent(){
     return (
       <div 
+        ref={contentRef}
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
         onClick={() => setSelected(project.id)}
         style={{             
-          height: "100%",
+         // height: "100%",
           minWidth: "10em",
           textDecoration: "none",
           padding: 28,
@@ -83,15 +85,28 @@ export default function ProjectCard({ project, visible, selected = false, setSel
       </div>
     );
   }
+
+   useEffect(() => {
+  if (!contentRef.current) return;
+
+  const observer = new ResizeObserver(() => {
+    if (contentRef.current) {
+      updateHeight(project.id, contentRef.current);
+    }
+  });
+
+  observer.observe(contentRef.current);
+  return () => observer.disconnect();
+}, [updateHeight, project.id]);
+
   
   function selectedComponent(){
       return (
       <div 
+        ref={contentRef}
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
-        onClick={() => setSelected(project.id)}
         style={{
-          height: "100%",
           minWidth: "10em",
           overflow: "hidden",
           textDecoration: "none",
@@ -124,11 +139,9 @@ export default function ProjectCard({ project, visible, selected = false, setSel
           {project.description}
         </p>
      
-       {project.images && project.images.length > 0 && (
-        <SimpleGallery images={project.images} videos={project.videos} title={project.title} expansionHandler={(height: number) => {
-          setExpandedHeight(height);
-          setExpandedImage(height > 0);         
-        }} />
+       {contentRef.current && project.images && project.images.length > 0 && (
+        <SimpleGallery images={project.images} videos={project.videos} title={project.title}
+         />
       )}
         
       </div>
@@ -143,8 +156,7 @@ export default function ProjectCard({ project, visible, selected = false, setSel
 
   useEffect(() => {
     if (!selected) {
-     if (expandedImage) {
-      setExpandedHeight(0);
+     if (expandedImage && contentRef.current) {      
       setExpandedImage(false);
     }
     }