518 lines
19 KiB
TypeScript
518 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef, useEffect, useCallback } from "react";
|
|
import { motion, useMotionValue, animate as motionAnimate } from "framer-motion";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import ProjectModal from "@/components/ui/ProjectModal";
|
|
import { SiGitea } from "react-icons/si";
|
|
import {
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
ExternalLink,
|
|
Download,
|
|
ShoppingCart,
|
|
ShieldCheck,
|
|
Server,
|
|
Smartphone,
|
|
BarChart3,
|
|
Building,
|
|
} from "lucide-react";
|
|
import GlassCard from "@/components/ui/GlassCard";
|
|
import { fadeUp, stagger, viewportConfig } from "@/lib/animations";
|
|
import type { Dictionary, Locale } from "@/lib/dictionaries";
|
|
|
|
const projectIcons: Record<string, typeof ShoppingCart> = {
|
|
"security-consultancy": ShieldCheck,
|
|
"ecommerce-platform": ShoppingCart,
|
|
"infra-dashboard": Server,
|
|
"mobile-companion": Smartphone,
|
|
"analytics-service": BarChart3,
|
|
"business-landing": Building,
|
|
"etf-oglasi": Smartphone,
|
|
};
|
|
|
|
const projectColors: Record<string, string> = {
|
|
"security-consultancy": "from-blue-500/20 to-blue-600/5 text-blue-300",
|
|
"ecommerce-platform": "from-emerald-500/20 to-emerald-600/5 text-emerald-300",
|
|
"infra-dashboard": "from-purple-500/20 to-purple-600/5 text-purple-300",
|
|
"mobile-companion": "from-rose-500/20 to-rose-600/5 text-rose-300",
|
|
"analytics-service": "from-amber-500/20 to-amber-600/5 text-amber-300",
|
|
"business-landing": "from-slate-400/20 to-slate-500/5 text-slate-300",
|
|
"etf-oglasi": "from-violet-500/20 to-violet-600/5 text-violet-300",
|
|
};
|
|
|
|
function useCardsToShow() {
|
|
const [count, setCount] = useState(3);
|
|
useEffect(() => {
|
|
function update() {
|
|
if (window.innerWidth < 640) setCount(1);
|
|
else if (window.innerWidth < 1024) setCount(2);
|
|
else setCount(3);
|
|
}
|
|
update();
|
|
window.addEventListener("resize", update);
|
|
return () => window.removeEventListener("resize", update);
|
|
}, []);
|
|
return count;
|
|
}
|
|
|
|
interface ProjectsCarouselProps {
|
|
locale: Locale;
|
|
dict: Dictionary;
|
|
featured?: boolean;
|
|
}
|
|
|
|
export default function ProjectsCarousel({
|
|
locale,
|
|
dict,
|
|
featured = false,
|
|
}: ProjectsCarouselProps) {
|
|
const projects = dict.projects.items
|
|
.filter((p) => p.inCarousel)
|
|
.sort((a, b) => a.carouselOrder - b.carouselOrder);
|
|
|
|
const cardsToShow = useCardsToShow();
|
|
const [index, setIndex] = useState(0);
|
|
const maxIndex = Math.max(0, projects.length - cardsToShow);
|
|
|
|
// Clamp index when viewport resize shrinks maxIndex
|
|
useEffect(() => {
|
|
if (index > maxIndex) {
|
|
setIndex(maxIndex);
|
|
}
|
|
}, [index, maxIndex]);
|
|
|
|
// ─── PIXEL-BASED MOTION VALUE ─────────────────────────────────
|
|
const trackRef = useRef<HTMLDivElement>(null);
|
|
const x = useMotionValue(0);
|
|
const gapPx = 16;
|
|
|
|
// stride = distance in px between card positions
|
|
function getStridePx(): number {
|
|
const container = trackRef.current?.parentElement;
|
|
if (!container) return 300;
|
|
return (container.offsetWidth + gapPx) / cardsToShow;
|
|
}
|
|
|
|
function animateToIndex(idx: number) {
|
|
motionAnimate(x, -(idx * getStridePx()), {
|
|
type: "spring",
|
|
stiffness: 260,
|
|
damping: 30,
|
|
mass: 0.8,
|
|
});
|
|
}
|
|
|
|
// Animate whenever index or cardsToShow changes (handles resize too)
|
|
useEffect(() => {
|
|
animateToIndex(index);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [index, cardsToShow]);
|
|
|
|
// ─── LEAK-SAFE TIMER SYSTEM ───────────────────────────────────
|
|
const interacting = useRef(false);
|
|
const mountedRef = useRef(true);
|
|
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
|
const pendingTimeouts = useRef<Set<ReturnType<typeof setTimeout>>>(new Set());
|
|
|
|
const goNext = useCallback(() => {
|
|
setIndex((prev) => (prev >= maxIndex ? 0 : prev + 1));
|
|
}, [maxIndex]);
|
|
|
|
const goNextRef = useRef(goNext);
|
|
useEffect(() => { goNextRef.current = goNext; }, [goNext]);
|
|
|
|
function goPrev() {
|
|
setIndex((prev) => (prev <= 0 ? maxIndex : prev - 1));
|
|
}
|
|
|
|
function clearAllTimers() {
|
|
if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; }
|
|
pendingTimeouts.current.forEach((id) => clearTimeout(id));
|
|
pendingTimeouts.current.clear();
|
|
}
|
|
|
|
function startAutoScroll() {
|
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
timerRef.current = setInterval(() => {
|
|
if (!interacting.current && mountedRef.current) goNextRef.current();
|
|
}, 15000);
|
|
}
|
|
|
|
function pauseAuto() {
|
|
interacting.current = true;
|
|
if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; }
|
|
}
|
|
|
|
function resumeAuto() {
|
|
if (!mountedRef.current) return;
|
|
interacting.current = false;
|
|
startAutoScroll();
|
|
}
|
|
|
|
function safeTimeout(fn: () => void, ms: number) {
|
|
const id = setTimeout(() => {
|
|
pendingTimeouts.current.delete(id);
|
|
if (mountedRef.current) fn();
|
|
}, ms);
|
|
pendingTimeouts.current.add(id);
|
|
}
|
|
|
|
function handlePrev() { pauseAuto(); goPrev(); safeTimeout(resumeAuto, 1200); }
|
|
function handleNext() { pauseAuto(); goNext(); safeTimeout(resumeAuto, 1200); }
|
|
function handleDot(i: number) { pauseAuto(); setIndex(i); safeTimeout(resumeAuto, 1200); }
|
|
|
|
useEffect(() => {
|
|
mountedRef.current = true;
|
|
startAutoScroll();
|
|
return () => { mountedRef.current = false; clearAllTimers(); };
|
|
}, []);
|
|
|
|
// ─── MODAL ───────────────────────────────────────────────────
|
|
type Project = (typeof projects)[number];
|
|
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
|
|
|
|
// ─── DRAG SYSTEM ─────────────────────────────────────────────
|
|
// Pointer capture is deliberately NOT taken on pointerdown — doing so
|
|
// retargets the synthesized `click` event to this container, which would
|
|
// swallow clicks on the cards/buttons inside. We only capture once an
|
|
// actual drag begins (threshold crossed), so taps/clicks pass through.
|
|
const DRAG_THRESHOLD = 6;
|
|
const isPointerDown = useRef(false);
|
|
const isDragging = useRef(false);
|
|
const didDrag = useRef(false); // true if this gesture became a drag
|
|
const pointerStartX = useRef(0);
|
|
const xOnDragStart = useRef(0);
|
|
const [grabbing, setGrabbing] = useState(false);
|
|
|
|
function onPointerDown(e: React.PointerEvent) {
|
|
pointerStartX.current = e.clientX;
|
|
xOnDragStart.current = x.get();
|
|
isPointerDown.current = true;
|
|
isDragging.current = false;
|
|
didDrag.current = false;
|
|
pauseAuto();
|
|
}
|
|
|
|
function onPointerMove(e: React.PointerEvent) {
|
|
if (!isPointerDown.current) return;
|
|
const delta = e.clientX - pointerStartX.current;
|
|
|
|
if (!isDragging.current && Math.abs(delta) > DRAG_THRESHOLD) {
|
|
isDragging.current = true;
|
|
didDrag.current = true;
|
|
setGrabbing(true);
|
|
(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
|
|
}
|
|
|
|
if (isDragging.current) {
|
|
x.set(xOnDragStart.current + delta);
|
|
}
|
|
}
|
|
|
|
function onPointerUp(e: React.PointerEvent) {
|
|
if (!isPointerDown.current) return;
|
|
isPointerDown.current = false;
|
|
const wasDragging = isDragging.current;
|
|
isDragging.current = false;
|
|
setGrabbing(false);
|
|
|
|
const el = e.currentTarget as HTMLElement;
|
|
if (el.hasPointerCapture?.(e.pointerId)) el.releasePointerCapture(e.pointerId);
|
|
|
|
// A plain tap/click — let the card/button onClick handlers run normally.
|
|
if (!wasDragging) {
|
|
safeTimeout(resumeAuto, 1200);
|
|
return;
|
|
}
|
|
|
|
const delta = e.clientX - pointerStartX.current;
|
|
const stride = getStridePx();
|
|
const threshold = stride * 0.15;
|
|
|
|
let newIndex = index;
|
|
if (delta < -threshold) {
|
|
newIndex = Math.min(maxIndex, index + Math.max(1, Math.round(-delta / stride)));
|
|
} else if (delta > threshold) {
|
|
newIndex = Math.max(0, index - Math.max(1, Math.round(delta / stride)));
|
|
}
|
|
|
|
if (newIndex !== index) {
|
|
setIndex(newIndex);
|
|
// useEffect above handles the spring animation
|
|
} else {
|
|
animateToIndex(index); // snap back
|
|
}
|
|
|
|
safeTimeout(resumeAuto, 1200);
|
|
}
|
|
|
|
// Suppress the click that fires at the end of a drag-release so it doesn't
|
|
// open the modal or follow a link.
|
|
function onClickCapture(e: React.MouseEvent) {
|
|
if (didDrag.current) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
}
|
|
|
|
// ─── RENDER ──────────────────────────────────────────────────
|
|
const cardPercent = 100 / cardsToShow;
|
|
|
|
return (
|
|
<section id="projects" className="relative w-full py-24 sm:py-32">
|
|
<div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
|
|
{/* Header */}
|
|
<motion.div
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={viewportConfig}
|
|
variants={stagger(0.06)}
|
|
className="mb-12 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end"
|
|
>
|
|
<div>
|
|
<motion.span
|
|
variants={fadeUp}
|
|
className="mb-4 inline-flex items-center gap-2 rounded-full border border-purple-400/30 bg-purple-500/10 px-3.5 py-1.5 font-mono text-xs tracking-tight text-purple-300 backdrop-blur-md"
|
|
>
|
|
{dict.projects.badge}
|
|
</motion.span>
|
|
<motion.h2
|
|
variants={fadeUp}
|
|
className="font-display text-display-lg font-medium tracking-tight text-gradient-fade"
|
|
>
|
|
{dict.projects.title}
|
|
</motion.h2>
|
|
</div>
|
|
|
|
<motion.div variants={fadeUp} className="flex items-center gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={handlePrev}
|
|
className="flex h-10 w-10 items-center justify-center rounded-xl border border-border/60 bg-surface/40 text-text-secondary transition-all hover:border-purple-400/40 hover:bg-purple-500/10 hover:text-purple-300"
|
|
aria-label="Previous"
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleNext}
|
|
className="flex h-10 w-10 items-center justify-center rounded-xl border border-border/60 bg-surface/40 text-text-secondary transition-all hover:border-purple-400/40 hover:bg-purple-500/10 hover:text-purple-300"
|
|
aria-label="Next"
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</button>
|
|
{featured && (
|
|
<Link
|
|
href={`/${locale}/projects`}
|
|
className="group ml-2 inline-flex items-center gap-2 font-mono text-sm text-purple-300 transition-colors hover:text-purple-200"
|
|
>
|
|
{dict.projects.viewAll}
|
|
<span className="transition-transform group-hover:translate-x-0.5">→</span>
|
|
</Link>
|
|
)}
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Carousel track */}
|
|
<div
|
|
className="relative overflow-hidden rounded-2xl"
|
|
onMouseEnter={pauseAuto}
|
|
onMouseLeave={() => { if (!isDragging.current) resumeAuto(); }}
|
|
onPointerDown={onPointerDown}
|
|
onPointerMove={onPointerMove}
|
|
onPointerUp={onPointerUp}
|
|
onPointerCancel={onPointerUp}
|
|
onClickCapture={onClickCapture}
|
|
style={{ cursor: grabbing ? "grabbing" : "grab", touchAction: "pan-y" }}
|
|
>
|
|
<motion.div
|
|
ref={trackRef}
|
|
className="flex"
|
|
style={{ gap: `${gapPx}px`, x }}
|
|
>
|
|
{projects.map((project) => {
|
|
const Icon = projectIcons[project.slug] || Building;
|
|
const colorClass =
|
|
projectColors[project.slug] ||
|
|
"from-purple-500/20 to-purple-600/5 text-purple-300";
|
|
const gradientClasses = colorClass.split(" ").slice(0, 2).join(" ");
|
|
const iconColor = colorClass.split(" ").slice(2).join(" ");
|
|
|
|
return (
|
|
<div
|
|
key={project.slug}
|
|
className="shrink-0 select-none"
|
|
style={{
|
|
width: `calc(${cardPercent}% - ${(gapPx * (cardsToShow - 1)) / cardsToShow}px)`,
|
|
}}
|
|
>
|
|
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
|
|
<div
|
|
className="group h-full"
|
|
style={{ cursor: "pointer" }}
|
|
onClick={() => setSelectedProject(project)}
|
|
>
|
|
<GlassCard className="flex h-full flex-col overflow-hidden p-0">
|
|
{project.screenshots[0] ? (
|
|
<div className="relative h-44 w-full overflow-hidden">
|
|
<Image
|
|
src={project.screenshots[0]}
|
|
alt={project.title}
|
|
fill
|
|
className="object-cover transition-transform duration-500 group-hover:scale-105"
|
|
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
|
draggable={false}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div
|
|
className={`flex h-36 items-center justify-center bg-gradient-to-br ${gradientClasses}`}
|
|
>
|
|
<Icon
|
|
className={`h-10 w-10 ${iconColor} transition-transform duration-500 group-hover:scale-110`}
|
|
strokeWidth={1.2}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="flex flex-1 flex-col p-5">
|
|
<div className="mb-3 flex items-center gap-2">
|
|
<span
|
|
className={`rounded-md px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider ${project.type === "client"
|
|
? "border border-purple-400/30 bg-purple-500/15 text-purple-300"
|
|
: "border border-border/50 bg-white/5 text-text-secondary"
|
|
}`}
|
|
>
|
|
{project.type === "client"
|
|
? dict.projects.clientWork
|
|
: dict.projects.personal}
|
|
</span>
|
|
{project.live && <LiveDot />}
|
|
{project.inProgress && <InProgressBadge label={dict.projects.inProgress} />}
|
|
</div>
|
|
<h3 className="mb-2 text-base font-medium text-text-primary">
|
|
{project.title}
|
|
</h3>
|
|
<p className="mb-4 line-clamp-2 text-sm leading-relaxed text-text-secondary">
|
|
{project.description}
|
|
</p>
|
|
<div className="mb-4 flex flex-wrap gap-1.5">
|
|
{project.tags.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="rounded-md bg-surface/60 px-2 py-0.5 font-mono text-[11px] text-text-secondary"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<div onClick={(e) => e.stopPropagation()} className="mt-auto">
|
|
<ProjectLinks project={project} dict={dict} />
|
|
</div>
|
|
</div>
|
|
</GlassCard>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
|
|
<div className="pointer-events-none absolute inset-y-0 left-0 w-3 bg-gradient-to-r from-background/40 to-transparent" />
|
|
<div className="pointer-events-none absolute inset-y-0 right-0 w-3 bg-gradient-to-l from-background/40 to-transparent" />
|
|
</div>
|
|
|
|
{/* Dots */}
|
|
<div className="mt-6 flex items-center justify-center gap-1.5">
|
|
{Array.from({ length: maxIndex + 1 }).map((_, i) => (
|
|
<button
|
|
key={i}
|
|
type="button"
|
|
onClick={() => handleDot(i)}
|
|
className={`h-1.5 rounded-full transition-all duration-300 ${i === index
|
|
? "w-6 bg-purple-400"
|
|
: "w-1.5 bg-border hover:bg-text-secondary"
|
|
}`}
|
|
aria-label={`Slide ${i + 1}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<ProjectModal
|
|
project={selectedProject}
|
|
dict={dict}
|
|
onClose={() => setSelectedProject(null)}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// ---- Shared sub-components ----
|
|
|
|
export function LiveDot() {
|
|
return (
|
|
<span className="inline-flex items-center gap-1.5 rounded-md border border-emerald-400/30 bg-emerald-500/10 px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider text-emerald-300">
|
|
<span className="relative flex h-2 w-2">
|
|
<span className="absolute inset-0 animate-ping rounded-full bg-emerald-400 opacity-75" />
|
|
<span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.6)]" />
|
|
</span>
|
|
Live
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function InProgressBadge({ label }: { label: string }) {
|
|
return (
|
|
<span className="inline-flex items-center rounded-md border border-amber-400/30 bg-amber-500/10 px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider text-amber-300">
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function ProjectLinks({
|
|
project,
|
|
dict,
|
|
}: {
|
|
project: { live: boolean; url?: string; github?: string; download?: string; slug: string };
|
|
dict: Dictionary;
|
|
}) {
|
|
return (
|
|
<div className="flex gap-2">
|
|
{project.live && project.url && (
|
|
<a
|
|
href={project.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 rounded-lg border border-emerald-400/30 bg-emerald-500/10 px-3 py-1.5 text-xs font-medium text-emerald-300 transition-all hover:bg-emerald-500/20 hover:shadow-[0_0_12px_rgba(52,211,153,0.15)]"
|
|
>
|
|
<ExternalLink className="h-3 w-3" />
|
|
{dict.projects.viewProject}
|
|
</a>
|
|
)}
|
|
{project.github && (
|
|
<a
|
|
href={project.github}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 rounded-lg border border-border/50 bg-white/5 px-3 py-1.5 text-xs text-text-secondary transition-all hover:border-purple-400/30 hover:bg-white/10 hover:text-text-primary"
|
|
>
|
|
<SiGitea className="h-3 w-3" />
|
|
{dict.projects.source}
|
|
</a>
|
|
)}
|
|
{project.download && (
|
|
<a
|
|
href={project.download}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 rounded-lg border border-border/50 bg-white/5 px-3 py-1.5 text-xs text-text-secondary transition-all hover:border-purple-400/30 hover:bg-white/10 hover:text-text-primary"
|
|
>
|
|
<Download className="h-3 w-3" />
|
|
{dict.projects.download}
|
|
</a>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|