feat(projects): improve app preview showcase

src/App.css

@@ -494,6 +494,88 @@ h3 {
   z-index: 1;
 }
 
+.project-preview {
+  align-items: center;
+  background:
+    radial-gradient(circle at 22% 18%, rgba(128, 255, 204, 0.20), transparent 30%),
+    radial-gradient(circle at 82% 20%, rgba(255, 107, 69, 0.18), transparent 30%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(66, 217, 255, 0.04)),
+    #050d14;
+  border: 1px solid rgba(139, 213, 255, 0.26);
+  border-radius: 8px;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
+    0 18px 48px rgba(0, 0, 0, 0.22);
+  display: flex;
+  height: clamp(350px, 34vw, 460px);
+  justify-content: center;
+  margin-bottom: 24px;
+  overflow: hidden;
+  padding: 22px;
+  position: relative;
+  isolation: isolate;
+}
+
+.project-preview::before {
+  background-position: center;
+  background-size: cover;
+  content: "";
+  filter: blur(18px) saturate(1.12);
+  inset: -24px;
+  opacity: 0.34;
+  position: absolute;
+  transform: scale(1.08);
+  z-index: -2;
+}
+
+.project-preview::after {
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.10), transparent 16% 84%, rgba(255, 255, 255, 0.06)),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%);
+  border: 1px solid rgba(157, 242, 255, 0.20);
+  border-radius: 8px;
+  content: "";
+  inset: 30px;
+  opacity: 0.54;
+  position: absolute;
+  transform: rotate(-2deg);
+  z-index: -1;
+}
+
+.project-preview-1::before {
+  background-image: url("/aitalkmate-preview.png");
+}
+
+.project-preview-2::before {
+  background-image: url("/tracking-calo-preview.png");
+}
+
+.project-preview img {
+  border-radius: 18px;
+  box-shadow:
+    0 28px 70px rgba(0, 0, 0, 0.48),
+    0 0 0 1px rgba(255, 255, 255, 0.14);
+  display: block;
+  max-height: calc(100% - 4px);
+  max-width: 100%;
+  object-fit: contain;
+  transform: rotate(-1.8deg) scale(1.04);
+  transition: filter 320ms ease, transform 320ms ease, box-shadow 320ms ease;
+}
+
+.project-preview-2 img {
+  border-radius: 26px;
+  transform: rotate(2deg) scale(1.03);
+}
+
+.project-card:hover .project-preview img {
+  filter: saturate(1.08) contrast(1.04);
+  box-shadow:
+    0 34px 84px rgba(0, 0, 0, 0.52),
+    0 0 0 1px rgba(255, 255, 255, 0.18);
+  transform: translateY(-6px) rotate(0deg) scale(1.08);
+}
+
 .project-index {
   color: rgba(157, 242, 255, 0.16);
   font-family: Georgia, "Times New Roman", serif;

src/App.tsx

@@ -28,6 +28,7 @@ const projects = [
     name: 'AITALKMATE',
     type: 'React Native App',
     time: 'Jul 2025 - Feb 2026',
+    preview: '/aitalkmate-preview.png',
     description:
       'Cross-platform mobile app for English speaking practice. Designed UI/UX in Figma, implemented front-end features with React Native, and integrated Firebase realtime database and authentication.',
     links: [
@@ -40,6 +41,7 @@ const projects = [
     name: 'TrackingCaloApp',
     type: 'Android Java App',
     time: 'Dec 2025',
+    preview: '/tracking-calo-preview.png',
     description:
       'Mobile app for tracking daily calories and nutrition. Applied MVVM architecture and Room Database for local offline storage.',
     links: [{ label: 'Repository', href: 'https://github.com/Anroiy123/TrackingCaloApp' }],
@@ -239,6 +241,12 @@ function App() {
           {projects.map((project, index) => (
             <article className="project-card 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}`}
+                aria-label={`${project.name} app preview`}
+              >
+                <img src={project.preview} alt={`${project.name} mobile app preview`} loading="lazy" />
+              </div>
               <div className="project-meta">
                 <span>{project.type}</span>
                 <span>{project.time}</span>