Added more photos.

Author: omid-jf

app/page.tsx

@@ -8,7 +8,7 @@ export default function Home() {
         <h2 className="text-3xl  font-bold tracking-tight text-gray-900 sm:text-4xl">About</h2>
       </div>
       <p className="text-left pb-3 text-gray-800">We are interested in conducting clinical epidemiology and health services research using big data, ranging from administrative claims database from public and private payers to electronic health records (EHR) from multiple U.S. hospital systems.</p>
-      <div className="flex justify-center">
+      <div className="w-full flex justify-center">
         <PhotosComp photosData={ photosData } />
       </div>
     </>

components/Photos.tsx

@@ -22,34 +22,34 @@ interface PhotosProps {
 
 export default function PhotosComp({ photosData }: PhotosProps) {
   const plugin = React.useRef(
-    Autoplay({ delay: 2000, stopOnInteraction: true })
+    Autoplay({ delay: 3000, stopOnInteraction: true })
   )
 
   return (
     <Carousel
       plugins={[plugin.current]}
-      className="w-full max-w-3xl"
+      className="w-full"
       onMouseEnter={plugin.current.stop}
       onMouseLeave={plugin.current.reset}
     >
       <CarouselContent>
         {photosData.map((photo, index) => (
           <CarouselItem key={index}>
-            <div className="p-1">
-              <Card>
-                <CardContent className="flex aspect-square items-center justify-center p-6">
-                  <Image className="self-center flex-shrink-0 -mt-12 bg-center bg-cover bg-gray-500 fill shadow-md" src={photo.imageUrl} alt="" />
-                </CardContent>
-                <CardFooter className="flex justify-center">
-                  <p>{photo.description}</p>
-                </CardFooter>
-              </Card>
-            </div>
+            <Card className="w-full">
+              <CardContent className="relative w-full h-[50vh] mb-4 mt-4">
+                <Image className="object-contain object-center" src={photo.imageUrl} fill alt="" />
+              </CardContent>
+              <CardFooter className="grid grid-cols-3 items-center text-center">
+                <div />
+                <p className="text-center">{photo.description}</p>
+                <div className="justify-self-end">{index + 1} of {photosData.length}</div>
+              </CardFooter>
+            </Card>
           </CarouselItem>
         ))}
       </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
+      <CarouselPrevious className="absolute left-4 top-1/2 -translate-y-1/2" />
+      <CarouselNext className="absolute right-4 top-1/2 -translate-y-1/2" />
     </Carousel>
   );
 }

lib/photos.ts

@@ -1,8 +1,34 @@
-import lab_photo_1 from "@/public/lab_photo_1.jpg";
+import ash_2023 from "@/public/ash_2023.jpg";
+import asco_award_2024 from "@/public/asco_award_2024.jpg";
+import icthic_2024 from "@/public/icthic_2024.jpg";
+import rice_ai_in_health_conf_2024 from "@/public/rice_ai_in_health_conf_2024.jpg";
+import ash_2024 from "@/public/ash_2024.jpg";
+import htrs_2025 from "@/public/htrs_2025.jpeg";
+
 
 export const photosData = [
+  {
+    description: "ASH 2023 Conference",
+    imageUrl: ash_2023,
+  },
+  {
+    description: "Dr. Li Receiving ASCO Career Development Award",
+    imageUrl: asco_award_2024,
+  },
+  {
+    description: "Dr. Li Presenting at ICTHIC 2024",
+    imageUrl: icthic_2024,
+  },
+  {
+    description: "2024 AI in Health Conference",
+    imageUrl: rice_ai_in_health_conf_2024,
+  },
   {
     description: "ASH 2024 Conference",
-    imageUrl: lab_photo_1,
+    imageUrl: ash_2024,
+  },
+  {
+    description: "Mrinal Presenting Poster at HTRS 2025",
+    imageUrl: htrs_2025,
   },
 ];