chore: create initial project snapshot

Capture the portfolio source, design references, and production assets with repository-specific ignore rules.

src/components/ProjectsSection.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import React, { useState, useRef } from 'react';
+import Image from 'next/image';
+import { ArrowLeft, ArrowRight, ArrowUpRight } from 'lucide-react';
+import { projects } from '@/data/projects';
+import styles from './ProjectsSection.module.css';
+
+export const ProjectsSection: React.FC = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const trackRef = useRef<HTMLDivElement>(null);
+
+  const totalCards = projects.length;
+  // Step by 1 card, up to totalCards - 3
+  const maxIndex = Math.max(0, totalCards - 3);
+
+  const handlePrev = () => {
+    setCurrentIndex((prev) => Math.max(0, prev - 1));
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prev) => Math.min(maxIndex, prev + 1));
+  };
+
+  // Card width (360px) + gap (24px) = 384px
+  const translateX = currentIndex * 384;
+
+  const progressPercent = maxIndex > 0 ? (currentIndex / maxIndex) * 100 : 0;
+
+  return (
+    <section id="projects" className={styles.projectsSection}>
+      <div className="content-container">
+        {/* Section Header with Controls */}
+        <div className={styles.headerRow}>
+          <div className="section-header" style={{ marginBottom: 0 }}>
+            <span className="section-eyebrow">PROJECTS</span>
+            <div className="section-title-wrap">
+              <h2 className="section-title">Products I&apos;ve Brought to Life</h2>
+              <div className="section-underline" />
+            </div>
+          </div>
+
+          {/* Pagination Counter & Navigation Arrows */}
+          <div className={styles.controls}>
+            <span className={styles.counter}>
+              <strong className={styles.counterActive}>{currentIndex + 1}</strong>
+              <span className={styles.counterDivider}> / </span>
+              {totalCards}
+            </span>
+
+            <div className={styles.arrowButtons}>
+              <button
+                onClick={handlePrev}
+                disabled={currentIndex === 0}
+                className={styles.navButton}
+                aria-label="Previous Project"
+              >
+                <ArrowLeft size={20} />
+              </button>
+
+              <button
+                onClick={handleNext}
+                disabled={currentIndex >= maxIndex}
+                className={styles.navButton}
+                aria-label="Next Project"
+              >
+                <ArrowRight size={20} />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Carousel Viewport */}
+        <div className={styles.carouselViewport}>
+          <div
+            ref={trackRef}
+            className={styles.carouselTrack}
+            style={{ transform: `translateX(-${translateX}px)` }}
+          >
+            {projects.map((p) => (
+              <div key={p.id} className={styles.card}>
+                {/* Project Image Media */}
+                <div className={styles.mediaContainer}>
+                  <Image
+                    src={p.image}
+                    alt={p.title}
+                    fill
+                    className={styles.projectImage}
+                  />
+                </div>
+
+                {/* Project Details */}
+                <div className={styles.cardBody}>
+                  <div className={styles.cardTitleRow}>
+                    <h3 className={styles.cardTitle}>{p.title}</h3>
+                    <ArrowUpRight size={18} className={styles.linkIcon} />
+                  </div>
+
+                  <div className={styles.cardDate}>{p.date}</div>
+
+                  <p className={styles.cardDesc}>{p.description}</p>
+
+                  {/* Tech Tags */}
+                  <div className={styles.tagList}>
+                    {p.tags.map((tag) => (
+                      <span key={tag} className={styles.tagBadge}>
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+
+                  {/* Case Study Action */}
+                  <div className={styles.cardFooter}>
+                    <a href={p.link || '#'} className={styles.caseStudyLink}>
+                      <span>View case study</span>
+                      <span className={styles.arrowIcon}>→</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Progress Bar Track */}
+        <div className={styles.progressTrackWrapper}>
+          <div className={styles.progressTrack}>
+            <div
+              className={styles.progressBar}
+              style={{
+                width: '45%',
+                transform: `translateX(${progressPercent * 1.2}%)`,
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};