feat: improve projects carousel interaction

Use native horizontal scrolling with drag, wheel, arrow, and slider controls while aligning cards with the portfolio design.

src/components/ProjectsSection.module.css

@@ -7,35 +7,15 @@
 
 .headerRow {
   display: flex;
+  align-items: flex-start;
   justify-content: space-between;
-  align-items: flex-end;
+  margin-bottom: 44px;
-  margin-bottom: 40px;
-}
-
-.controls {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-.counter {
-  font-size: var(--font-size-body-large);
-  font-weight: 500;
-  color: var(--text-muted);
-}
-
-.counterActive {
-  font-weight: 700;
-  color: var(--text-primary);
-}
-
-.counterDivider {
-  margin: 0 4px;
 }
 
 .arrowButtons {
   display: flex;
   gap: 12px;
+  padding-top: 2px;
 }
 
 .navButton {
@@ -44,55 +24,116 @@
   justify-content: center;
   width: var(--size-icon-button);
   height: var(--size-icon-button);
+  padding: 0;
+  border: 2px solid var(--color-blue-600);
   border-radius: 50%;
-  border: 1px solid var(--border-default);
-  background: var(--bg-surface);
-  color: var(--text-primary);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
+}
+
+.navButtonPrevious {
+  background: transparent;
+  color: var(--color-blue-600);
+}
+
+.navButtonNext {
+  background: var(--color-blue-600);
+  color: var(--color-blue-white);
 }
 
 .navButton:hover:not(:disabled) {
-  border-color: var(--accent-default);
+  transform: translateY(-1px);
-  background: var(--bg-subtle);
+}
-  transform: scale(1.05);
+
+.navButtonPrevious:hover:not(:disabled) {
+  background: var(--color-blue-200);
+}
+
+.navButtonNext:hover:not(:disabled) {
+  border-color: var(--color-blue-700);
+  background: var(--color-blue-700);
+}
+
+.navButton:focus-visible {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 3px;
 }
 
 .navButton:disabled {
-  opacity: 0.35;
+  cursor: default;
-  cursor: not-allowed;
+}
+
+[data-theme="dark"] .navButtonPrevious {
+  border-color: var(--color-blue-white);
+  color: var(--color-blue-white);
+}
+
+[data-theme="dark"] .navButtonPrevious:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+[data-theme="dark"] .navButtonNext {
+  border-color: var(--color-blue-white);
+  background: var(--color-blue-white);
+  color: var(--color-blue-950);
+}
+
+[data-theme="dark"] .navButtonNext:hover:not(:disabled) {
+  background: var(--color-blue-200);
 }
 
 .carouselViewport {
-  width: 1320px;
-  overflow: visible;
   position: relative;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  cursor: grab;
+  scrollbar-width: none;
+  overscroll-behavior-inline: contain;
+  touch-action: pan-y;
+  user-select: none;
+}
+
+.carouselViewport::-webkit-scrollbar {
+  display: none;
+}
+
+.carouselViewport:focus-visible {
+  border-radius: var(--radius-lg);
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 4px;
+}
+
+.dragging {
+  cursor: grabbing;
 }
 
 .carouselTrack {
   display: flex;
+  align-items: stretch;
+  width: max-content;
   gap: 24px;
-  transition: transform 0.4s cubic-bezier(0.2, 0, 0.2, 1);
+  padding: 4px 0 8px;
-  will-change: transform;
 }
 
 .card {
-  flex: 0 0 360px;
+  display: flex;
-  width: 360px;
+  flex: 0 0 var(--size-project-width);
-  background-color: var(--bg-surface);
+  flex-direction: column;
+  width: var(--size-project-width);
+  min-height: 480px;
+  overflow: hidden;
   border: 1px solid var(--border-default);
   border-radius: var(--radius-lg);
-  overflow: hidden;
+  background: var(--bg-surface);
-  display: flex;
+  scroll-snap-align: start;
-  flex-direction: column;
+  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
-  box-shadow: 0 4px 16px var(--shadow-color);
-  transition: all 0.25s ease;
 }
 
 .card:hover {
-  border-color: var(--accent-default);
+  border-color: var(--border-strong);
-  transform: translateY(-4px);
+  box-shadow: 0 10px 24px var(--shadow-color);
-  box-shadow: 0 12px 28px var(--shadow-color);
+  transform: translateY(-2px);
 }
 
 .mediaContainer {
@@ -100,62 +141,69 @@
   width: 100%;
   height: var(--size-project-media-height);
   overflow: hidden;
-  background-color: #0c1a3a;
+  background: var(--color-blue-900);
 }
 
 .projectImage {
   object-fit: cover;
+  pointer-events: none;
   transition: transform 0.3s ease;
 }
 
 .card:hover .projectImage {
-  transform: scale(1.03);
+  transform: scale(1.02);
 }
 
 .cardBody {
-  padding: 24px;
   display: flex;
+  flex: 1;
   flex-direction: column;
-  flex-grow: 1;
+  padding: 24px;
 }
 
 .cardTitleRow {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 7px;
   margin-bottom: 6px;
 }
 
 .cardTitle {
-  font-size: var(--font-size-h3);
-  line-height: var(--line-height-h3);
-  font-weight: 700;
   color: var(--text-primary);
+  font-size: var(--font-size-h3);
+  font-weight: 700;
+  line-height: var(--line-height-h3);
 }
 
-.linkIcon {
+.titleLinkIcon {
+  flex: 0 0 auto;
+  color: var(--color-blue-500);
+}
+
+[data-theme="dark"] .titleLinkIcon {
   color: var(--accent-default);
 }
 
 .cardDate {
-  font-size: var(--font-size-label-small);
-  line-height: var(--line-height-label-small);
-  font-weight: 700;
-  letter-spacing: var(--letter-spacing-eyebrow);
-  color: var(--text-muted);
-  text-transform: uppercase;
   margin-bottom: 14px;
+  color: var(--text-muted);
+  font-size: var(--font-size-label-small);
+  font-weight: 700;
+  line-height: var(--line-height-label-small);
+  letter-spacing: var(--letter-spacing-eyebrow);
+  text-transform: uppercase;
 }
 
 .cardDesc {
-  font-size: var(--font-size-body-small);
-  line-height: var(--line-height-body-small);
-  color: var(--text-secondary);
-  margin-bottom: 20px;
   display: -webkit-box;
-  -webkit-line-clamp: 4;
+  margin-bottom: 20px;
-  -webkit-box-orient: vertical;
   overflow: hidden;
+  color: var(--text-primary);
+  font-size: var(--font-size-body-small);
+  font-weight: 400;
+  line-height: var(--line-height-body-small);
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
 }
 
 .tagList {
@@ -166,14 +214,19 @@
 }
 
 .tagBadge {
-  padding: 4px 12px;
+  padding: 5px 12px;
+  border: 0;
   border-radius: var(--radius-pill);
-  background-color: var(--bg-subtle);
+  background: var(--color-blue-200);
-  color: var(--action-link);
+  color: var(--color-blue-700);
   font-size: var(--font-size-label-small);
+  font-weight: 500;
   line-height: var(--line-height-label-small);
-  font-weight: 600;
+}
-  border: 1px solid var(--border-default);
+
+[data-theme="dark"] .tagBadge {
+  background: var(--color-blue-800);
+  color: var(--color-blue-100);
 }
 
 .cardFooter {
@@ -183,40 +236,96 @@
 .caseStudyLink {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
+  color: var(--color-blue-500);
   font-size: var(--font-size-body-small);
   font-weight: 600;
-  color: var(--action-link);
+  transition: color 0.2s ease, gap 0.2s ease;
-  transition: gap 0.2s ease;
 }
 
 .caseStudyLink:hover {
-  gap: 12px;
+  gap: 14px;
+  color: var(--color-blue-700);
 }
 
-.arrowIcon {
+.caseStudyLink:focus-visible {
-  font-size: 16px;
+  border-radius: 2px;
-  transition: transform 0.2s ease;
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 4px;
 }
 
-.progressTrackWrapper {
+[data-theme="dark"] .caseStudyLink {
+  color: var(--accent-default);
+}
+
+[data-theme="dark"] .caseStudyLink:hover {
+  color: var(--color-blue-100);
+}
+
+.scrollbarWrapper {
   display: flex;
   justify-content: center;
-  margin-top: 48px;
+  margin-top: 40px;
 }
 
-.progressTrack {
+.scrollbar {
   width: 480px;
-  height: 4px;
+  height: 20px;
-  background-color: var(--border-default);
+  margin: 0;
-  border-radius: var(--radius-pill);
+  appearance: none;
-  overflow: hidden;
+  background: transparent;
-  position: relative;
+  cursor: pointer;
 }
 
-.progressBar {
+.scrollbar::-webkit-slider-runnable-track {
-  height: 100%;
+  height: 6px;
-  background-color: var(--accent-default);
   border-radius: var(--radius-pill);
-  transition: transform 0.3s ease;
+  background: var(--color-blue-200);
+}
+
+.scrollbar::-webkit-slider-thumb {
+  width: 216px;
+  height: 6px;
+  margin-top: 0;
+  appearance: none;
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: var(--color-blue-400);
+}
+
+.scrollbar::-moz-range-track {
+  height: 6px;
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: var(--color-blue-200);
+}
+
+.scrollbar::-moz-range-thumb {
+  width: 216px;
+  height: 6px;
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: var(--color-blue-400);
+}
+
+.scrollbar:focus-visible {
+  border-radius: var(--radius-pill);
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 3px;
+}
+
+[data-theme="dark"] .scrollbar::-webkit-slider-runnable-track {
+  background: var(--color-blue-800);
+}
+
+[data-theme="dark"] .scrollbar::-webkit-slider-thumb {
+  background: var(--color-blue-300);
+}
+
+[data-theme="dark"] .scrollbar::-moz-range-track {
+  background: var(--color-blue-800);
+}
+
+[data-theme="dark"] .scrollbar::-moz-range-thumb {
+  background: var(--color-blue-300);
 }

src/components/ProjectsSection.tsx

@@ -1,140 +1,216 @@
 'use client';
 
-import React, { useState, useRef } from 'react';
+import React, { useEffect, useRef, useState } 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';
 
+const CARD_STEP = 384;
+
 export const ProjectsSection: React.FC = () => {
-  const [currentIndex, setCurrentIndex] = useState(0);
+  const viewportRef = useRef<HTMLDivElement>(null);
-  const trackRef = useRef<HTMLDivElement>(null);
+  const dragState = useRef({
+    active: false,
+    moved: false,
+    startX: 0,
+    startScrollLeft: 0,
+  });
+  const [isDragging, setIsDragging] = useState(false);
+  const [scrollProgress, setScrollProgress] = useState(0);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(true);
 
-  const totalCards = projects.length;
+  const syncScrollState = () => {
-  // Step by 1 card, up to totalCards - 3
+    const viewport = viewportRef.current;
-  const maxIndex = Math.max(0, totalCards - 3);
+    if (!viewport) return;
 
-  const handlePrev = () => {
+    const maxScroll = Math.max(0, viewport.scrollWidth - viewport.clientWidth);
-    setCurrentIndex((prev) => Math.max(0, prev - 1));
+    const progress = maxScroll > 0 ? (viewport.scrollLeft / maxScroll) * 100 : 0;
+
+    setScrollProgress(progress);
+    setCanScrollPrev(viewport.scrollLeft > 1);
+    setCanScrollNext(viewport.scrollLeft < maxScroll - 1);
   };
 
-  const handleNext = () => {
+  useEffect(() => {
-    setCurrentIndex((prev) => Math.min(maxIndex, prev + 1));
+    syncScrollState();
+    window.addEventListener('resize', syncScrollState);
+    return () => window.removeEventListener('resize', syncScrollState);
+  }, []);
+
+  const scrollByCard = (direction: -1 | 1) => {
+    viewportRef.current?.scrollBy({
+      left: direction * CARD_STEP,
+      behavior: 'smooth',
+    });
   };
 
-  // Card width (360px) + gap (24px) = 384px
+  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
-  const translateX = currentIndex * 384;
+    if (event.button !== 0) return;
 
-  const progressPercent = maxIndex > 0 ? (currentIndex / maxIndex) * 100 : 0;
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+
+    dragState.current = {
+      active: true,
+      moved: false,
+      startX: event.clientX,
+      startScrollLeft: viewport.scrollLeft,
+    };
+    viewport.setPointerCapture(event.pointerId);
+    setIsDragging(true);
+  };
+
+  const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+    const viewport = viewportRef.current;
+    if (!viewport || !dragState.current.active) return;
+
+    const distance = event.clientX - dragState.current.startX;
+    if (Math.abs(distance) > 3) dragState.current.moved = true;
+    viewport.scrollLeft = dragState.current.startScrollLeft - distance;
+  };
+
+  const stopDragging = (event: React.PointerEvent<HTMLDivElement>) => {
+    const viewport = viewportRef.current;
+    if (!viewport || !dragState.current.active) return;
+
+    dragState.current.active = false;
+    if (viewport.hasPointerCapture(event.pointerId)) {
+      viewport.releasePointerCapture(event.pointerId);
+    }
+    setIsDragging(false);
+  };
+
+  const handleClickCapture = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!dragState.current.moved) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+    dragState.current.moved = false;
+  };
+
+  const handleScrollbarChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+
+    const maxScroll = Math.max(0, viewport.scrollWidth - viewport.clientWidth);
+    viewport.scrollLeft = (Number(event.target.value) / 100) * maxScroll;
+  };
 
   return (
-    <section id="projects" className={styles.projectsSection}>
+    <section
+      id="projects"
+      className={styles.projectsSection}
+      aria-labelledby="projects-title"
+    >
       <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>
+              <h2 id="projects-title" 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}
+              type="button"
-                disabled={currentIndex === 0}
+              onClick={() => scrollByCard(-1)}
-                className={styles.navButton}
+              disabled={!canScrollPrev}
-                aria-label="Previous Project"
+              className={`${styles.navButton} ${styles.navButtonPrevious}`}
+              aria-label="Previous projects"
             >
-                <ArrowLeft size={20} />
+              <ArrowLeft size={28} strokeWidth={2.4} />
             </button>
 
             <button
-                onClick={handleNext}
+              type="button"
-                disabled={currentIndex >= maxIndex}
+              onClick={() => scrollByCard(1)}
-                className={styles.navButton}
+              disabled={!canScrollNext}
-                aria-label="Next Project"
+              className={`${styles.navButton} ${styles.navButtonNext}`}
+              aria-label="Next projects"
             >
-                <ArrowRight size={20} />
+              <ArrowRight size={28} strokeWidth={2.4} />
             </button>
           </div>
         </div>
-        </div>
 
-        {/* Carousel Viewport */}
-        <div className={styles.carouselViewport}>
         <div
-            ref={trackRef}
+          ref={viewportRef}
-            className={styles.carouselTrack}
+          className={`${styles.carouselViewport} ${isDragging ? styles.dragging : ''}`}
-            style={{ transform: `translateX(-${translateX}px)` }}
+          onScroll={syncScrollState}
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={stopDragging}
+          onPointerCancel={stopDragging}
+          onClickCapture={handleClickCapture}
+          tabIndex={0}
+          aria-label="Scrollable project cards"
         >
-            {projects.map((p) => (
+          <div className={styles.carouselTrack}>
-              <div key={p.id} className={styles.card}>
+            {projects.map((project) => (
-                {/* Project Image Media */}
+              <article key={project.id} className={styles.card}>
                 <div className={styles.mediaContainer}>
                   <Image
-                    src={p.image}
+                    src={project.image}
-                    alt={p.title}
+                    alt={project.title}
                     fill
+                    draggable={false}
                     className={styles.projectImage}
                   />
                 </div>
 
-                {/* Project Details */}
                 <div className={styles.cardBody}>
                   <div className={styles.cardTitleRow}>
-                    <h3 className={styles.cardTitle}>{p.title}</h3>
+                    <h3 className={styles.cardTitle}>{project.title}</h3>
-                    <ArrowUpRight size={18} className={styles.linkIcon} />
+                    <ArrowUpRight
+                      size={19}
+                      strokeWidth={2.5}
+                      className={styles.titleLinkIcon}
+                      aria-hidden="true"
+                    />
                   </div>
 
-                  <div className={styles.cardDate}>{p.date}</div>
+                  <div className={styles.cardDate}>{project.date}</div>
+                  <p className={styles.cardDesc}>{project.description}</p>
 
-                  <p className={styles.cardDesc}>{p.description}</p>
-
-                  {/* Tech Tags */}
                   <div className={styles.tagList}>
-                    {p.tags.map((tag) => (
+                    {project.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}>
+                    <a href={project.link || '#'} className={styles.caseStudyLink}>
                       <span>View case study</span>
-                      <span className={styles.arrowIcon}>→</span>
+                      <ArrowRight size={18} strokeWidth={2.25} aria-hidden="true" />
                     </a>
                   </div>
                 </div>
-              </div>
+              </article>
             ))}
           </div>
         </div>
 
-        {/* Progress Bar Track */}
+        <div className={styles.scrollbarWrapper}>
-        <div className={styles.progressTrackWrapper}>
+          <input
-          <div className={styles.progressTrack}>
+            type="range"
-            <div
+            min="0"
-              className={styles.progressBar}
+            max="100"
-              style={{
+            step="0.1"
-                width: '45%',
+            value={scrollProgress}
-                transform: `translateX(${progressPercent * 1.2}%)`,
+            onChange={handleScrollbarChange}
-              }}
+            className={styles.scrollbar}
+            aria-label="Project carousel position"
           />
         </div>
       </div>
-      </div>
     </section>
   );
 };