threejs: redesign project/blog/video cards with preview-driven visuals and fixed-height layout (#37)

Author: Copilot

src/templates/threejs/BlogCard.tsx

@@ -57,6 +57,7 @@ export default function BlogCard({ blog, excerptLength = 120, index = 0 }: BlogC
   return (
     <div
       ref={cardRef}
+      className="h-full"
       onMouseEnter={() => setHovered(true)}
       onMouseMove={handleMouseMove}
       onMouseLeave={() => { setHovered(false); setTilt({ x: 0, y: 0 }) }}
@@ -66,7 +67,7 @@ export default function BlogCard({ blog, excerptLength = 120, index = 0 }: BlogC
         willChange: 'transform',
       }}
     >
-      <article className="group relative flex flex-col rounded-xl border border-blue-900/40 bg-gradient-to-b from-[#0d1220] to-[#080c18] p-5 transition-shadow duration-300 hover:border-blue-500/40 hover:shadow-[0_0_30px_rgba(59,130,246,0.15)]">
+      <article className="group relative flex h-full min-h-[320px] flex-col rounded-xl border border-blue-900/40 bg-gradient-to-b from-[#0d1220] to-[#080c18] p-5 transition-shadow duration-300 hover:border-blue-500/40 hover:shadow-[0_0_30px_rgba(59,130,246,0.15)]">
         {/* Animated top-bar accent */}
         <div className={`absolute inset-x-0 top-0 h-px bg-gradient-to-r ${c.bar} opacity-40 transition-opacity duration-300 group-hover:opacity-100`} />
 

src/templates/threejs/ProjectCard.tsx

@@ -1,30 +1,127 @@
+import { useRef, useState } from 'react'
 import type { Project } from '../../types/contentTypes'
+import CardShape, { SHAPE_KEYS } from './CardShape'
+
+const PREVIEW_COLORS = [
+  { hex: '#3b82f6', bar: 'from-blue-500 to-cyan-400', glow: 'from-blue-500' },
+  { hex: '#8b5cf6', bar: 'from-purple-500 to-pink-400', glow: 'from-purple-500' },
+  { hex: '#06b6d4', bar: 'from-cyan-500 to-blue-400', glow: 'from-cyan-500' },
+  { hex: '#10b981', bar: 'from-emerald-500 to-teal-400', glow: 'from-emerald-500' },
+  { hex: '#f59e0b', bar: 'from-amber-500 to-orange-400', glow: 'from-amber-500' },
+  { hex: '#ec4899', bar: 'from-pink-500 to-rose-400', glow: 'from-pink-500' },
+]
+const MAX_VISIBLE_LINKS = 2
+const VALID_HOSTNAME_PATTERN = /^[a-z0-9.-]+$/i
+
+function hashTitle(title: string): number {
+  let hash = 0
+  // 31 is a common prime multiplier for lightweight deterministic string hashing.
+  for (let i = 0; i < title.length; i += 1) hash = (hash * 31 + title.charCodeAt(i)) >>> 0
+  return hash
+}
+
+function fallbackLinkText(url: string): string {
+  try {
+    const { hostname, pathname } = new URL(url)
+    const cleanHost = hostname.replace(/^www\./, '')
+    const cleanPath = pathname === '/' ? '' : pathname
+    return `${cleanHost}${cleanPath}`
+  } catch {
+    return url
+  }
+}
 
 export default function ProjectCard({ project }: { project: Project }) {
+  const seed = hashTitle(project.title || project.id)
+  const color = PREVIEW_COLORS[seed % PREVIEW_COLORS.length]
+  const previewLink = project.links?.find((link) => link.url)?.url
+  const host = previewLink
+    ? (() => {
+        try {
+          const hostname = new URL(previewLink).hostname.replace(/^www\./, '')
+          return VALID_HOSTNAME_PATTERN.test(hostname) ? hostname : null
+        } catch {
+          // Ignore invalid URLs from user content and continue without hostname text.
+          return null
+        }
+      })()
+    : null
+
+  const cardRef = useRef<HTMLDivElement>(null)
+  const [tilt, setTilt] = useState({ x: 0, y: 0 })
+  const [hovered, setHovered] = useState(false)
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    const el = cardRef.current
+    if (!el) return
+    const rect = el.getBoundingClientRect()
+    const px = (e.clientX - rect.left) / rect.width
+    const py = (e.clientY - rect.top) / rect.height
+    setTilt({ x: (py - 0.5) * -6, y: (px - 0.5) * 6 })
+  }
+
   return (
-    <article className="flex flex-col rounded-xl border border-blue-900/40 bg-gradient-to-b from-[#0d1220] to-[#080c18] p-5 transition hover:-translate-y-0.5 hover:border-blue-500/50 hover:shadow-[0_0_30px_rgba(59,130,246,0.15)]">
-      <h3 className="text-sm font-semibold text-slate-100">{project.title || 'Untitled'}</h3>
-      {project.description && (
-        <p className="mt-2 line-clamp-3 text-[13px] text-slate-400">{project.description}</p>
-      )}
-      {project.links && project.links.length > 0 && (
-        <div className="mt-3 flex flex-wrap gap-3">
-          {project.links.map((link, i) =>
-            link.url ? (
-              <a
-                key={i}
-                href={link.url}
-                target="_blank"
-                rel="noreferrer"
-                className="inline-flex items-center gap-1 text-xs font-medium text-blue-400 hover:text-blue-300 hover:underline"
-              >
-                {link.label || link.url}
-                <span aria-hidden="true">↗</span>
-              </a>
-            ) : null,
+    <div
+      ref={cardRef}
+      className="h-full"
+      onMouseEnter={() => setHovered(true)}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={() => {
+        setHovered(false)
+        setTilt({ x: 0, y: 0 })
+      }}
+      style={{
+        transform: `perspective(700px) rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`,
+        transition: hovered ? 'transform 0.08s linear' : 'transform 0.35s ease-out',
+        willChange: 'transform',
+      }}
+    >
+      <article className="group relative flex h-full min-h-[320px] flex-col overflow-hidden rounded-xl border border-blue-900/40 bg-gradient-to-b from-[#0d1220] to-[#080c18] transition-shadow duration-300 hover:border-blue-500/50 hover:shadow-[0_0_30px_rgba(59,130,246,0.2)]">
+        <div className={`absolute inset-x-0 top-0 h-px bg-gradient-to-r ${color.bar} opacity-50 transition-opacity duration-300 group-hover:opacity-100`} />
+        <div className={`pointer-events-none absolute -right-6 -top-6 h-20 w-20 rounded-full bg-gradient-to-br ${color.glow} to-transparent opacity-0 blur-2xl transition-opacity duration-500 group-hover:opacity-20`} />
+
+        <div className="relative h-36 overflow-hidden border-b border-blue-900/30 bg-[#070b16]">
+          <div className={`absolute inset-0 bg-gradient-to-br ${color.bar} opacity-10`} />
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_18%,rgba(255,255,255,0.18),transparent_46%),radial-gradient(circle_at_85%_78%,rgba(255,255,255,0.12),transparent_42%)]" />
+          <div className="absolute left-3 top-3 rounded-full border border-blue-300/25 bg-[#070b16]/75 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.2em] text-blue-200/85 backdrop-blur-sm">
+            Preview
+          </div>
+          <div className="absolute right-2 top-2 opacity-75 transition-opacity group-hover:opacity-100">
+            <CardShape index={seed % SHAPE_KEYS.length} color={color.hex} size={64} isHovered={hovered} />
+          </div>
+          <div className="absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-[#080c18] to-transparent" />
+          <h3 className="absolute bottom-3 left-3 right-3 line-clamp-2 text-sm font-semibold leading-snug text-slate-100">
+            {project.title || 'Untitled'}
+          </h3>
+        </div>
+
+        <div className="flex flex-1 flex-col p-4">
+          {project.description && (
+            <p className="line-clamp-3 text-[13px] leading-relaxed text-slate-400 transition-colors group-hover:text-slate-300">
+              {project.description}
+            </p>
+          )}
+          {project.links && project.links.length > 0 && (
+            <div className="mt-auto flex flex-wrap gap-2 pt-4">
+              {project.links.slice(0, MAX_VISIBLE_LINKS).map((link, i) =>
+                link.url ? (
+                  <a
+                    key={i}
+                    href={link.url}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="inline-flex items-center gap-1 rounded-full border border-blue-500/25 bg-blue-500/10 px-2.5 py-1 text-[11px] font-medium text-blue-300 transition hover:border-blue-400/40 hover:bg-blue-500/20"
+                  >
+                    {link.label || fallbackLinkText(link.url)}
+                    <span aria-hidden="true">↗</span>
+                  </a>
+                ) : null,
+              )}
+            </div>
           )}
+          {host && <p className="mt-3 text-[11px] uppercase tracking-[0.16em] text-slate-500">{host}</p>}
         </div>
-      )}
-    </article>
+      </article>
+    </div>
   )
 }

src/templates/threejs/VideoCard.tsx

@@ -35,6 +35,7 @@ export default function VideoCard({ video }: { video: Video }) {
   return (
     <div
       ref={cardRef}
+      className="h-full"
       onMouseEnter={() => setHovered(true)}
       onMouseMove={handleMouseMove}
       onMouseLeave={() => { setHovered(false); setTilt({ x: 0, y: 0 }) }}
@@ -44,7 +45,7 @@ export default function VideoCard({ video }: { video: Video }) {
         willChange: 'transform',
       }}
     >
-      <article className="group relative flex flex-col overflow-hidden rounded-xl border border-blue-900/40 bg-gradient-to-b from-[#0d1220] to-[#080c18] transition-shadow duration-300 hover:border-blue-500/50 hover:shadow-[0_0_30px_rgba(59,130,246,0.2)]">
+      <article className="group relative flex h-full min-h-[320px] flex-col overflow-hidden rounded-xl border border-blue-900/40 bg-gradient-to-b from-[#0d1220] to-[#080c18] transition-shadow duration-300 hover:border-blue-500/50 hover:shadow-[0_0_30px_rgba(59,130,246,0.2)]">
         {/* Animated top-bar accent */}
         <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-blue-500 to-cyan-400 opacity-40 transition-opacity duration-300 group-hover:opacity-100" />
 
@@ -75,6 +76,24 @@ export default function VideoCard({ video }: { video: Video }) {
             <div className="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-[#080c18] to-transparent opacity-80" />
           </a>
         )}
+        {!thumbnail && (
+          <a
+            href={video.videoUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="relative block aspect-video w-full shrink-0 overflow-hidden bg-[#070b16]"
+          >
+            <div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 via-cyan-500/10 to-transparent" />
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_15%,rgba(255,255,255,0.2),transparent_45%),radial-gradient(circle_at_80%_78%,rgba(59,130,246,0.22),transparent_40%)]" />
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-blue-500/80 ring-2 ring-white/20 shadow-[0_0_24px_rgba(59,130,246,0.5)] backdrop-blur-sm">
+                <svg className="ml-0.5 h-5 w-5 fill-white" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M8 5v14l11-7z" />
+                </svg>
+              </div>
+            </div>
+          </a>
+        )}
 
         <div className="flex flex-1 flex-col p-4">
           <h3 className="text-sm font-semibold text-slate-100 leading-snug">