feat: improve projects carousel interaction
Use native horizontal scrolling with drag, wheel, arrow, and slider controls while aligning cards with the portfolio design.
This commit is contained in:
@@ -1,138 +1,214 @@
|
||||
'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 trackRef = useRef<HTMLDivElement>(null);
|
||||
const viewportRef = 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;
|
||||
// Step by 1 card, up to totalCards - 3
|
||||
const maxIndex = Math.max(0, totalCards - 3);
|
||||
const syncScrollState = () => {
|
||||
const viewport = viewportRef.current;
|
||||
if (!viewport) return;
|
||||
|
||||
const handlePrev = () => {
|
||||
setCurrentIndex((prev) => Math.max(0, prev - 1));
|
||||
const maxScroll = Math.max(0, viewport.scrollWidth - viewport.clientWidth);
|
||||
const progress = maxScroll > 0 ? (viewport.scrollLeft / maxScroll) * 100 : 0;
|
||||
|
||||
setScrollProgress(progress);
|
||||
setCanScrollPrev(viewport.scrollLeft > 1);
|
||||
setCanScrollNext(viewport.scrollLeft < maxScroll - 1);
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
setCurrentIndex((prev) => Math.min(maxIndex, prev + 1));
|
||||
useEffect(() => {
|
||||
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 translateX = currentIndex * 384;
|
||||
const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
|
||||
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've Brought to Life</h2>
|
||||
<h2 id="projects-title" className="section-title">
|
||||
Products I'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
|
||||
type="button"
|
||||
onClick={() => scrollByCard(-1)}
|
||||
disabled={!canScrollPrev}
|
||||
className={`${styles.navButton} ${styles.navButtonPrevious}`}
|
||||
aria-label="Previous projects"
|
||||
>
|
||||
<ArrowLeft size={28} strokeWidth={2.4} />
|
||||
</button>
|
||||
|
||||
<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>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => scrollByCard(1)}
|
||||
disabled={!canScrollNext}
|
||||
className={`${styles.navButton} ${styles.navButtonNext}`}
|
||||
aria-label="Next projects"
|
||||
>
|
||||
<ArrowRight size={28} strokeWidth={2.4} />
|
||||
</button>
|
||||
</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
|
||||
ref={viewportRef}
|
||||
className={`${styles.carouselViewport} ${isDragging ? styles.dragging : ''}`}
|
||||
onScroll={syncScrollState}
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerMove={handlePointerMove}
|
||||
onPointerUp={stopDragging}
|
||||
onPointerCancel={stopDragging}
|
||||
onClickCapture={handleClickCapture}
|
||||
tabIndex={0}
|
||||
aria-label="Scrollable project cards"
|
||||
>
|
||||
<div className={styles.carouselTrack}>
|
||||
{projects.map((project) => (
|
||||
<article key={project.id} className={styles.card}>
|
||||
<div className={styles.mediaContainer}>
|
||||
<Image
|
||||
src={p.image}
|
||||
alt={p.title}
|
||||
src={project.image}
|
||||
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>
|
||||
<ArrowUpRight size={18} className={styles.linkIcon} />
|
||||
<h3 className={styles.cardTitle}>{project.title}</h3>
|
||||
<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.progressTrackWrapper}>
|
||||
<div className={styles.progressTrack}>
|
||||
<div
|
||||
className={styles.progressBar}
|
||||
style={{
|
||||
width: '45%',
|
||||
transform: `translateX(${progressPercent * 1.2}%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.scrollbarWrapper}>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
step="0.1"
|
||||
value={scrollProgress}
|
||||
onChange={handleScrollbarChange}
|
||||
className={styles.scrollbar}
|
||||
aria-label="Project carousel position"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user