feat: implement Embla carousel in ProjectsTile

package-lock.json

@@ -12,6 +12,8 @@
         "@xenova/transformers": "^2.17.2",
         "concurrently": "^9.2.1",
         "d3": "^7.9.0",
+        "embla-carousel-autoplay": "^8.6.0",
+        "embla-carousel-react": "^8.6.0",
         "framer-motion": "^11.15.0",
         "fuse.js": "^7.1.0",
         "lucide-react": "^0.468.0",
@@ -3286,6 +3288,43 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/embla-carousel": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
+      "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
+      "license": "MIT"
+    },
+    "node_modules/embla-carousel-autoplay": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.6.0.tgz",
+      "integrity": "sha512-OBu5G3nwaSXkZCo1A6LTaFMZ8EpkYbwIaH+bPqdBnDGQ2fh4+NbzjXjs2SktoPNKCtflfVMc75njaDHOYXcrsA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.6.0"
+      }
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",
+      "integrity": "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==",
+      "license": "MIT",
+      "dependencies": {
+        "embla-carousel": "8.6.0",
+        "embla-carousel-reactive-utils": "8.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
+      "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.6.0"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",

package.json

@@ -17,6 +17,8 @@
     "@xenova/transformers": "^2.17.2",
     "concurrently": "^9.2.1",
     "d3": "^7.9.0",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "framer-motion": "^11.15.0",
     "fuse.js": "^7.1.0",
     "lucide-react": "^0.468.0",

src/components/tiles/ProjectsTile.tsx

@@ -1,4 +1,6 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import useEmblaCarousel from 'embla-carousel-react'
+import Autoplay from 'embla-carousel-autoplay'
 import { investigations } from '@/data/investigations'
 import { Card, CardHeader } from '../Card'
 import { useDetailPanel } from '@/contexts/DetailPanelContext'
@@ -12,10 +14,11 @@ const statusColorMap: Record<string, string> = {
 
 interface ProjectItemProps {
   project: Investigation
+  slideBasis: string
   onClick: () => void
 }
 
-function ProjectItem({ project, onClick }: ProjectItemProps) {
+function ProjectItem({ project, slideBasis, onClick }: ProjectItemProps) {
   const dotColor = statusColorMap[project.status] || '#0D6E6E'
   const isLive = project.status === 'Live'
 
@@ -30,6 +33,13 @@ function ProjectItem({ project, onClick }: ProjectItemProps) {
   )
 
   return (
+    <div
+      style={{
+        flex: `0 0 ${slideBasis}`,
+        minWidth: 0,
+        paddingRight: '10px',
+      }}
+    >
       <div
         role="button"
         tabIndex={0}
@@ -38,11 +48,12 @@ function ProjectItem({ project, onClick }: ProjectItemProps) {
         style={{
           display: 'flex',
           flexDirection: 'column',
+          gap: '10px',
           background: 'var(--surface)',
           border: '1px solid var(--border-light)',
           borderRadius: 'var(--radius-sm)',
-        padding: '12px 16px',
+          padding: '12px',
-        minHeight: '44px',
+          minHeight: '176px',
           fontSize: '13px',
           color: 'var(--text-primary)',
           transition: 'border-color 0.15s, box-shadow 0.15s',
@@ -57,7 +68,26 @@ function ProjectItem({ project, onClick }: ProjectItemProps) {
           e.currentTarget.style.boxShadow = 'none'
         }}
       >
-      {/* Row: status dot + name + year */}
+        <div
+          style={{
+            height: '72px',
+            borderRadius: '6px',
+            border: '1px solid var(--border-light)',
+            background:
+              'linear-gradient(135deg, rgba(19, 94, 94, 0.12), rgba(212, 171, 46, 0.18))',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontFamily: 'var(--font-geist-mono)',
+            fontSize: '10px',
+            letterSpacing: '0.08em',
+            color: 'var(--text-tertiary)',
+            textTransform: 'uppercase',
+          }}
+        >
+          Thumbnail Pending
+        </div>
+
         <div
           style={{
             display: 'flex',
@@ -91,13 +121,13 @@ function ProjectItem({ project, onClick }: ProjectItemProps) {
           </span>
         </div>
 
-      {/* Tech stack tags */}
         {project.techStack && project.techStack.length > 0 && (
           <div
             style={{
               display: 'flex',
               flexWrap: 'wrap',
               gap: '4px',
+              marginTop: 'auto',
             }}
           >
             {project.techStack.map((tech) => (
@@ -119,25 +149,92 @@ function ProjectItem({ project, onClick }: ProjectItemProps) {
           </div>
         )}
       </div>
+    </div>
   )
 }
 
 export function ProjectsTile() {
   const { openPanel } = useDetailPanel()
+  const [viewportWidth, setViewportWidth] = useState(
+    typeof window !== 'undefined' ? window.innerWidth : 1200,
+  )
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)
+
+  const [emblaRef] = useEmblaCarousel(
+    {
+      align: 'start',
+      containScroll: 'trimSnaps',
+      loop: true,
+      dragFree: true,
+    },
+    useMemo(
+      () =>
+        prefersReducedMotion
+          ? []
+          : [
+              Autoplay({
+                delay: 3500,
+                stopOnInteraction: false,
+                stopOnMouseEnter: true,
+                stopOnFocusIn: true,
+              }),
+            ],
+      [prefersReducedMotion],
+    ),
+  )
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    const resizeHandler = () => setViewportWidth(window.innerWidth)
+    resizeHandler()
+    window.addEventListener('resize', resizeHandler)
+
+    return () => window.removeEventListener('resize', resizeHandler)
+  }, [])
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const syncMotionPreference = () => setPrefersReducedMotion(mediaQuery.matches)
+
+    syncMotionPreference()
+    mediaQuery.addEventListener('change', syncMotionPreference)
+
+    return () => mediaQuery.removeEventListener('change', syncMotionPreference)
+  }, [])
+
+  const slideBasis = useMemo(() => {
+    if (viewportWidth < 768) {
+      return '100%'
+    }
+    if (viewportWidth < 1200) {
+      return '50%'
+    }
+    return '33.3333%'
+  }, [viewportWidth])
 
   return (
     <Card tileId="projects">
       <CardHeader dotColor="amber" title="SIGNIFICANT INTERVENTIONS" />
 
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+      <div ref={emblaRef} style={{ overflow: 'hidden' }}>
+        <div style={{ display: 'flex', marginRight: '-10px' }}>
           {investigations.map((project) => (
             <ProjectItem
               key={project.id}
               project={project}
+              slideBasis={slideBasis}
               onClick={() => openPanel({ type: 'project', investigation: project })}
             />
           ))}
         </div>
+      </div>
     </Card>
   )
 }