feat(projects): add tracking calorie preview stack

src/App.css

@@ -563,6 +563,41 @@ h3 {
   transition: filter 320ms ease, transform 320ms ease, box-shadow 320ms ease;
 }
 
+.project-preview-count-3 {
+  height: clamp(370px, 35vw, 480px);
+  padding: 20px;
+}
+
+.project-preview-count-3::after {
+  inset: 42px 74px;
+  transform: rotate(2deg);
+}
+
+.project-preview-count-3 img {
+  border-radius: 24px;
+  max-height: 88%;
+  max-width: 38%;
+  position: absolute;
+  top: 50%;
+}
+
+.project-preview-count-3 img:nth-child(1) {
+  opacity: 0.86;
+  transform: translate(-78%, -48%) rotate(-8deg) scale(0.9);
+  z-index: 1;
+}
+
+.project-preview-count-3 img:nth-child(2) {
+  transform: translate(-2%, -52%) rotate(0deg) scale(1.06);
+  z-index: 3;
+}
+
+.project-preview-count-3 img:nth-child(3) {
+  opacity: 0.92;
+  transform: translate(70%, -48%) rotate(8deg) scale(0.9);
+  z-index: 2;
+}
+
 .project-preview-2 img {
   border-radius: 26px;
   transform: rotate(2deg) scale(1.03);
@@ -576,6 +611,18 @@ h3 {
   transform: translateY(-6px) rotate(0deg) scale(1.08);
 }
 
+.project-card:hover .project-preview-count-3 img:nth-child(1) {
+  transform: translate(-84%, -50%) rotate(-10deg) scale(0.94);
+}
+
+.project-card:hover .project-preview-count-3 img:nth-child(2) {
+  transform: translate(-2%, -56%) rotate(0deg) scale(1.1);
+}
+
+.project-card:hover .project-preview-count-3 img:nth-child(3) {
+  transform: translate(76%, -50%) rotate(10deg) scale(0.94);
+}
+
 .project-index {
   color: rgba(157, 242, 255, 0.16);
   font-family: Georgia, "Times New Roman", serif;

src/App.tsx

@@ -29,6 +29,7 @@ const projects = [
     type: 'React Native App',
     time: 'Jul 2025 - Feb 2026',
     preview: '/aitalkmate-preview.png',
+    previews: ['/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: [
@@ -42,6 +43,11 @@ const projects = [
     type: 'Android Java App',
     time: 'Dec 2025',
     preview: '/tracking-calo-preview.png',
+    previews: [
+      '/tracking-calo-preview.png',
+      '/tracking-calo-food-modal.png',
+      '/tracking-calo-diary-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' }],
@@ -242,10 +248,17 @@ function App() {
             <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}`}
+                className={`project-preview project-preview-${index + 1} project-preview-count-${project.previews?.length ?? 1}`}
                 aria-label={`${project.name} app preview`}
               >
-                <img src={project.preview} alt={`${project.name} mobile app preview`} loading="lazy" />
+                {(project.previews ?? [project.preview]).map((preview, previewIndex) => (
+                  <img
+                    src={preview}
+                    alt={`${project.name} mobile app preview ${previewIndex + 1}`}
+                    loading="lazy"
+                    key={preview}
+                  />
+                ))}
               </div>
               <div className="project-meta">
                 <span>{project.type}</span>