feat: add activity feed and background effects
- Implemented ActivityFeed component to display real-time user activity including coding, music, and chat interactions. - Added GooFilter and BackgroundBlobs components for enhanced visual effects. - Updated layout to include new components and ensure proper stacking context. - Enhanced Tailwind CSS configuration with new color and font settings. - Created API route to mock activity data from n8n. - Refactored main page structure to streamline component rendering.
This commit is contained in:
@@ -2,8 +2,10 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ExternalLink, Github, Calendar } from 'lucide-react';
|
||||
import { ExternalLink, Github, Calendar, Layers, ArrowRight } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { LiquidHeading } from '@/components/LiquidHeading';
|
||||
import Image from 'next/image';
|
||||
|
||||
interface Project {
|
||||
id: number;
|
||||
@@ -16,188 +18,139 @@ interface Project {
|
||||
date: string;
|
||||
github?: string;
|
||||
live?: string;
|
||||
imageUrl?: string;
|
||||
}
|
||||
|
||||
const Projects = () => {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
|
||||
// Load projects from API
|
||||
useEffect(() => {
|
||||
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 || []);
|
||||
} else {
|
||||
console.error('Failed to fetch projects from API');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading projects:', error);
|
||||
}
|
||||
};
|
||||
|
||||
loadProjects();
|
||||
}, []);
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<section id="projects" className="py-20 px-4 relative">
|
||||
<section id="projects" className="py-24 px-4 relative bg-stone-50/50">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6 gradient-text">
|
||||
Featured Projects
|
||||
</h2>
|
||||
<p className="text-xl text-gray-400 max-w-2xl mx-auto">
|
||||
Here are some of my recent projects that showcase my skills and passion for creating innovative solutions.
|
||||
<div className="text-center mb-20">
|
||||
<LiquidHeading
|
||||
text="Selected Works"
|
||||
level={2}
|
||||
className="text-4xl md:text-6xl font-bold mb-6 text-stone-900"
|
||||
/>
|
||||
<p className="text-lg text-stone-500 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>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{projects.map((project, index) => (
|
||||
<motion.div
|
||||
key={project.id}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
whileHover={{ y: -12, scale: 1.02 }}
|
||||
className={`group relative overflow-hidden rounded-2xl glass-card card-hover border border-gray-800/50 hover:border-gray-700/50 transition-all ${
|
||||
project.featured ? 'ring-2 ring-blue-500/30 shadow-lg shadow-blue-500/10' : ''
|
||||
}`}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
whileHover={{ y: -8 }}
|
||||
className="group relative flex flex-col bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-stone-100"
|
||||
>
|
||||
<div className="relative h-48 overflow-hidden bg-gradient-to-br from-gray-900 to-gray-800">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10" />
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center p-4">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
className="w-20 h-20 bg-gradient-to-br from-blue-500 to-purple-500 rounded-2xl flex items-center justify-center mb-3 shadow-lg"
|
||||
>
|
||||
<span className="text-2xl font-bold text-white">
|
||||
{project.title.split(' ').map(word => word[0]).join('').toUpperCase().slice(0, 2)}
|
||||
</span>
|
||||
</motion.div>
|
||||
<span className="text-sm font-semibold text-gray-300 text-center leading-tight px-2">
|
||||
{project.title}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{project.featured && (
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
className="absolute top-4 right-4 px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 text-white text-xs font-semibold rounded-full shadow-lg"
|
||||
>
|
||||
⭐ Featured
|
||||
</motion.div>
|
||||
{/* Project Cover / Header */}
|
||||
<div className="relative aspect-[4/3] overflow-hidden bg-stone-100">
|
||||
{project.imageUrl ? (
|
||||
<Image
|
||||
src={project.imageUrl}
|
||||
alt={project.title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
) : (
|
||||
<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">
|
||||
<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>
|
||||
)}
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-4 space-x-3">
|
||||
{project.github && project.github.trim() !== '' && project.github !== '#' && (
|
||||
<motion.a
|
||||
href={project.github}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
whileHover={{ scale: 1.15, y: -2 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="p-3 bg-gray-800/90 backdrop-blur-sm rounded-xl text-white hover:bg-gray-700/90 transition-all shadow-lg border border-gray-700/50"
|
||||
aria-label="View on GitHub"
|
||||
>
|
||||
<Github size={20} />
|
||||
</motion.a>
|
||||
)}
|
||||
{project.live && project.live.trim() !== '' && project.live !== '#' && (
|
||||
<motion.a
|
||||
href={project.live}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
whileHover={{ scale: 1.15, y: -2 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="p-3 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl text-white hover:from-blue-500 hover:to-purple-500 transition-all shadow-lg"
|
||||
aria-label="View live site"
|
||||
>
|
||||
<ExternalLink size={20} />
|
||||
</motion.a>
|
||||
)}
|
||||
|
||||
{/* Overlay Links */}
|
||||
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-4 backdrop-blur-[2px]">
|
||||
{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-transform" 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-transform" aria-label="Live Demo">
|
||||
<ExternalLink size={20} />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<h3 className="text-xl font-bold text-white group-hover:text-blue-400 transition-colors flex-1 pr-2">
|
||||
{/* 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-600 transition-colors">
|
||||
{project.title}
|
||||
</h3>
|
||||
<div className="flex items-center space-x-1.5 text-gray-400 flex-shrink-0">
|
||||
<Calendar size={14} />
|
||||
<span className="text-xs">{new Date(project.date).getFullYear()}</span>
|
||||
</div>
|
||||
<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-gray-300 mb-4 leading-relaxed line-clamp-3">
|
||||
<p className="text-stone-600 text-sm leading-relaxed mb-6 line-clamp-3 flex-1">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-5">
|
||||
{project.tags.slice(0, 4).map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-3 py-1 bg-gray-800/60 backdrop-blur-sm text-gray-300 text-xs rounded-lg border border-gray-700/50 hover:border-gray-600 transition-colors"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
{project.tags.length > 4 && (
|
||||
<span className="px-3 py-1 bg-gray-800/60 backdrop-blur-sm text-gray-400 text-xs rounded-lg border border-gray-700/50">
|
||||
+{project.tags.length - 4}
|
||||
</span>
|
||||
)}
|
||||
<div className="space-y-4 mt-auto">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.tags.slice(0, 3).map(tag => (
|
||||
<span key={tag} className="text-xs px-2.5 py-1 bg-stone-50 border border-stone-100 rounded-md text-stone-500 font-medium">
|
||||
{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-2 transition-all group/link"
|
||||
>
|
||||
Read more <ArrowRight size={16} className="ml-1 transition-transform group-hover/link:translate-x-1" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
|
||||
className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-all font-semibold group/link"
|
||||
>
|
||||
<span>View Details</span>
|
||||
<ExternalLink size={16} className="group-hover/link:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="text-center mt-12"
|
||||
>
|
||||
<div className="mt-16 text-center">
|
||||
<Link
|
||||
href="/projects"
|
||||
className="btn-primary px-8 py-4 text-lg font-semibold inline-flex items-center space-x-2"
|
||||
className="inline-flex items-center gap-2 px-6 py-3 bg-white border border-stone-200 rounded-full text-stone-600 font-medium hover:bg-stone-50 hover:border-stone-300 transition-all shadow-sm"
|
||||
>
|
||||
<span>View All Projects</span>
|
||||
<ExternalLink size={20} />
|
||||
Archive <ArrowRight size={16} />
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Projects;
|
||||
export default Projects;
|
||||
Reference in New Issue
Block a user