feat(ui): add project card image backdrops

src/App.css

@@ -476,6 +476,7 @@ h3 {
 }
 
 .project-card {
+  isolation: isolate;
   min-height: 330px;
   overflow: hidden;
   padding: clamp(22px, 3vw, 34px);
@@ -490,6 +491,34 @@ h3 {
   opacity: 0;
   position: absolute;
   transition: opacity 220ms ease;
+  z-index: 0;
+}
+
+.project-card::after {
+  background-position: center top;
+  background-size: cover;
+  content: "";
+  filter: blur(28px) saturate(1.12);
+  inset: -46px -34px auto -34px;
+  min-height: 42%;
+  opacity: 0.10;
+  pointer-events: none;
+  position: absolute;
+  transform: scale(1.05);
+  transition: opacity 220ms ease, transform 220ms ease;
+  z-index: 0;
+}
+
+.project-card-1::after {
+  background-image:
+    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.88)),
+    url("/aitalkmate-preview.png");
+}
+
+.project-card-2::after {
+  background-image:
+    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.88)),
+    url("/tracking-calo-preview.png");
 }
 
 .project-card:hover {
@@ -502,6 +531,11 @@ h3 {
   opacity: 1;
 }
 
+.project-card:hover::after {
+  opacity: 0.16;
+  transform: scale(1.08);
+}
+
 .project-card > * {
   position: relative;
   z-index: 1;
@@ -678,14 +712,17 @@ h3 {
 }
 
 .project-index {
-  color: rgba(8, 126, 164, 0.10);
+  color: rgba(8, 126, 164, 0.22);
   font-family: Georgia, "Times New Roman", serif;
   font-size: 106px;
   font-weight: 900;
   line-height: 0.8;
+  pointer-events: none;
   position: absolute;
   right: 24px;
   top: 22px;
+  text-shadow: 0 12px 34px rgba(255, 255, 255, 0.76);
+  z-index: 2;
 }
 
 .project-meta {

src/App.tsx

@@ -246,7 +246,11 @@ function App() {
 
         <div className="project-grid">
           {projects.map((project, index) => (
-            <article className="project-card reveal" key={project.name} style={{ '--delay': `${index * 110}ms` } as CSSProperties}>
+            <article
+              className={`project-card project-card-${index + 1} reveal`}
+              key={project.name}
+              style={{ '--delay': `${index * 110}ms` } as CSSProperties}
+            >
               <div className="project-index">0{index + 1}</div>
               <div
                 className={`project-preview project-preview-${index + 1} project-preview-count-${project.previews?.length ?? 1}`}