denshooter
e2c2585468
refactor: modify layout to use ClientOnly and BackgroundBlobsClient components fix: correct import statement for ActivityFeed in the main page fix: enhance sitemap fetching logic with error handling and mock support refactor: convert BackgroundBlobs to default export for consistency refactor: simplify ErrorBoundary component and improve error handling UI chore: update framer-motion to version 12.24.10 in package.json and package-lock.json test: add minimal Prisma Client mock for testing purposes feat: create BackgroundBlobsClient for dynamic import of BackgroundBlobs feat: implement ClientOnly component to handle client-side rendering feat: add custom error handling components for better user experience
230 lines
8.3 KiB
TypeScript
230 lines
8.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { motion, Variants } from "framer-motion";
|
|
import {
|
|
ExternalLink,
|
|
Github,
|
|
Calendar,
|
|
Layers,
|
|
ArrowRight,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
const fadeInUp: Variants = {
|
|
hidden: { opacity: 0, y: 40 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.8,
|
|
ease: [0.25, 0.1, 0.25, 1],
|
|
},
|
|
},
|
|
};
|
|
|
|
const staggerContainer: Variants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.2,
|
|
delayChildren: 0.1,
|
|
},
|
|
},
|
|
};
|
|
|
|
interface Project {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
content: string;
|
|
tags: string[];
|
|
featured: boolean;
|
|
category: string;
|
|
date: string;
|
|
github?: string;
|
|
live?: string;
|
|
imageUrl?: string;
|
|
}
|
|
|
|
const Projects = () => {
|
|
const [mounted, setMounted] = useState(false);
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
const loadProjects = async () => {
|
|
try {
|
|
const response = await fetch(
|
|
"/api/projects?featured=true&published=true&limit=6",
|
|
);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setProjects(data.projects || []);
|
|
}
|
|
} catch (error) {
|
|
if (process.env.NODE_ENV === 'development') {
|
|
console.error("Error loading projects:", error);
|
|
}
|
|
}
|
|
};
|
|
loadProjects();
|
|
}, []);
|
|
|
|
if (!mounted) return null;
|
|
|
|
return (
|
|
<section
|
|
id="projects"
|
|
className="py-24 px-4 relative bg-gradient-to-br from-liquid-peach/15 via-liquid-yellow/10 to-liquid-coral/15 overflow-hidden"
|
|
>
|
|
<div className="max-w-7xl mx-auto">
|
|
<motion.div
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
variants={fadeInUp}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl md:text-6xl font-bold mb-6 text-stone-900">
|
|
Selected Works
|
|
</h2>
|
|
<p className="text-lg text-stone-600 max-w-2xl mx-auto mt-4 font-light">
|
|
A collection of projects I've worked on, ranging from web
|
|
applications to experiments.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
variants={staggerContainer}
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{projects.map((project, index) => (
|
|
<motion.div
|
|
key={project.id}
|
|
variants={fadeInUp}
|
|
whileHover={{
|
|
y: -12,
|
|
transition: { duration: 0.5, ease: "easeOut" },
|
|
}}
|
|
className="group relative flex flex-col bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-700 ease-out border border-stone-100 hover:border-stone-200"
|
|
>
|
|
{/* Project Cover / Header */}
|
|
<div className="relative aspect-[4/3] overflow-hidden bg-gradient-to-br from-stone-50 to-stone-100">
|
|
{project.imageUrl ? (
|
|
<Image
|
|
src={project.imageUrl}
|
|
alt={project.title}
|
|
fill
|
|
className="object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
|
|
/>
|
|
) : (
|
|
<div className="absolute inset-0 bg-gradient-to-br from-stone-100 to-stone-200 flex items-center justify-center p-8 group-hover:from-stone-50 group-hover:to-stone-100 transition-colors duration-700 ease-out">
|
|
<div className="w-full h-full border-2 border-dashed border-stone-300 rounded-xl flex items-center justify-center">
|
|
<Layers className="text-stone-300 w-12 h-12" />
|
|
</div>
|
|
<div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint/10 via-transparent to-liquid-rose/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Overlay Links */}
|
|
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-700 ease-out flex items-center justify-center gap-4 backdrop-blur-sm">
|
|
{project.github && (
|
|
<a
|
|
href={project.github}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="p-3 bg-white rounded-full text-stone-900 hover:scale-110 transition-all duration-500 ease-out hover:shadow-lg"
|
|
aria-label="GitHub"
|
|
>
|
|
<Github size={20} />
|
|
</a>
|
|
)}
|
|
{project.live && (
|
|
<a
|
|
href={project.live}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="p-3 bg-white rounded-full text-stone-900 hover:scale-110 transition-all duration-500 ease-out hover:shadow-lg"
|
|
aria-label="Live Demo"
|
|
>
|
|
<ExternalLink size={20} />
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex flex-col flex-1 p-6">
|
|
<div className="flex justify-between items-start mb-3">
|
|
<h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-700 transition-colors duration-500">
|
|
{project.title}
|
|
</h3>
|
|
<span className="text-xs font-mono text-stone-400 bg-stone-100 px-2 py-1 rounded">
|
|
{new Date(project.date).getFullYear()}
|
|
</span>
|
|
</div>
|
|
|
|
<p className="text-stone-700 text-sm leading-relaxed mb-6 line-clamp-3 flex-1">
|
|
{project.description}
|
|
</p>
|
|
|
|
<div className="space-y-4 mt-auto">
|
|
<div className="flex flex-wrap gap-2">
|
|
{project.tags.slice(0, 3).map((tag, tIdx) => (
|
|
<span
|
|
key={`${project.id}-${tag}-${tIdx}`}
|
|
className="text-xs px-2.5 py-1 bg-stone-50 border border-stone-100 rounded-md text-stone-600 font-medium hover:bg-stone-100 hover:border-stone-200 transition-all duration-400 ease-out"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
{project.tags.length > 3 && (
|
|
<span className="text-xs px-2 py-1 text-stone-400">
|
|
+ {project.tags.length - 3}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<Link
|
|
href={`/projects/${project.title.toLowerCase().replace(/\s+/g, "-")}`}
|
|
className="inline-flex items-center text-sm font-semibold text-stone-900 hover:gap-3 transition-all duration-500 ease-out group/link"
|
|
>
|
|
Read more{" "}
|
|
<ArrowRight
|
|
size={16}
|
|
className="ml-1 transition-transform duration-500 ease-out group-hover/link:translate-x-2"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
|
|
className="mt-16 text-center"
|
|
>
|
|
<Link
|
|
href="/projects"
|
|
className="inline-flex items-center gap-2 px-8 py-4 bg-white border border-stone-200 rounded-full text-stone-700 font-medium hover:bg-stone-50 hover:border-stone-300 hover:gap-3 transition-all duration-500 ease-out shadow-sm hover:shadow-md"
|
|
>
|
|
View All Projects <ArrowRight size={16} />
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Projects;
|