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:
@@ -43,36 +43,29 @@ const Header = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="particles">
|
||||
{[...Array(20)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="particle"
|
||||
style={{
|
||||
left: `${(i * 5.5) % 100}%`,
|
||||
animationDelay: `${(i * 0.8) % 20}s`,
|
||||
animationDuration: `${20 + (i * 0.4) % 10}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.header
|
||||
initial={{ y: -100 }}
|
||||
animate={{ y: 0 }}
|
||||
initial={{ y: -100, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
||||
scrolled ? 'glass' : 'bg-transparent'
|
||||
}`}
|
||||
className="fixed top-6 left-0 right-0 z-50 flex justify-center px-4 pointer-events-none"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<div className={`pointer-events-auto transition-all duration-500 ease-out ${
|
||||
scrolled ? 'w-full max-w-5xl' : 'w-full max-w-7xl'
|
||||
}`}>
|
||||
<div className={`
|
||||
backdrop-blur-xl transition-all duration-500
|
||||
${scrolled
|
||||
? 'bg-white/95 border border-stone-300 shadow-[0_8px_30px_rgba(0,0,0,0.12)] rounded-full px-6 py-3'
|
||||
: 'bg-white/85 border border-stone-200 shadow-[0_4px_24px_rgba(0,0,0,0.08)] px-4 py-4 rounded-full'
|
||||
}
|
||||
flex justify-between items-center
|
||||
`}>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Link href="/" className="text-2xl font-bold font-mono text-white">
|
||||
dk<span className="text-red-500">0</span>
|
||||
<Link href="/" className="text-2xl font-bold font-mono text-stone-800 tracking-tighter liquid-hover">
|
||||
dk<span className="text-liquid-rose">0</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
@@ -85,7 +78,7 @@ const Header = () => {
|
||||
>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-gray-300 hover:text-white transition-colors duration-200 font-medium relative group px-2 py-1"
|
||||
className="text-stone-600 hover:text-stone-900 transition-colors duration-200 font-medium relative group px-2 py-1 liquid-hover"
|
||||
onClick={(e) => {
|
||||
if (item.href.startsWith('#')) {
|
||||
e.preventDefault();
|
||||
@@ -97,24 +90,24 @@ const Header = () => {
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
<span className="absolute -bottom-1 left-2 right-2 h-0.5 bg-gradient-to-r from-blue-500 to-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
|
||||
<span className="absolute -bottom-1 left-0 right-0 h-0.5 bg-gradient-to-r from-liquid-mint to-liquid-lavender transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-center rounded-full"></span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="hidden md:flex items-center space-x-4">
|
||||
<div className="hidden md:flex items-center space-x-3">
|
||||
{socialLinks.map((social) => (
|
||||
<motion.a
|
||||
key={social.label}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
whileHover={{ scale: 1.1, y: -2 }}
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="p-2 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 transition-colors duration-200 text-gray-300 hover:text-white"
|
||||
className="p-2 rounded-full bg-white/40 hover:bg-white/80 border border-white/50 text-stone-600 hover:text-stone-900 transition-all shadow-sm liquid-hover"
|
||||
>
|
||||
<social.icon size={20} />
|
||||
<social.icon size={18} />
|
||||
</motion.a>
|
||||
))}
|
||||
</div>
|
||||
@@ -122,7 +115,7 @@ const Header = () => {
|
||||
<motion.button
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="md:hidden p-2 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 transition-colors duration-200 text-gray-300 hover:text-white"
|
||||
className="md:hidden p-2 rounded-full bg-white/40 hover:bg-white/60 text-stone-800 transition-colors liquid-hover"
|
||||
>
|
||||
{isOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</motion.button>
|
||||
@@ -137,17 +130,17 @@ const Header = () => {
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="fixed inset-0 bg-black/50 backdrop-blur-sm z-40 md:hidden"
|
||||
className="fixed inset-0 bg-stone-900/20 backdrop-blur-sm z-40 md:hidden pointer-events-auto"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="md:hidden glass border-t border-gray-800/50 z-50 relative"
|
||||
initial={{ opacity: 0, scale: 0.95, y: -20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: -20 }}
|
||||
transition={{ duration: 0.3, type: "spring" }}
|
||||
className="absolute top-24 left-4 right-4 bg-cream/95 backdrop-blur-xl border border-stone-200 shadow-xl rounded-3xl z-50 p-6 pointer-events-auto"
|
||||
>
|
||||
<div className="px-4 py-6 space-y-2">
|
||||
<div className="space-y-2">
|
||||
{navItems.map((item, index) => (
|
||||
<motion.div
|
||||
key={item.name}
|
||||
@@ -170,16 +163,15 @@ const Header = () => {
|
||||
}, 100);
|
||||
}
|
||||
}}
|
||||
className="block text-gray-300 hover:text-white transition-all duration-200 font-medium py-3 px-4 rounded-lg hover:bg-gray-800/50 border-l-2 border-transparent hover:border-blue-500"
|
||||
className="block text-stone-600 hover:text-stone-900 hover:bg-white/50 transition-all font-medium py-3 px-4 rounded-xl"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
<div className="pt-4 mt-4 border-t border-gray-700/50">
|
||||
<p className="text-xs text-gray-500 mb-3 px-4">Connect with me</p>
|
||||
<div className="flex space-x-3 px-4">
|
||||
<div className="pt-6 mt-4 border-t border-stone-200">
|
||||
<div className="flex justify-center space-x-4">
|
||||
{socialLinks.map((social, index) => (
|
||||
<motion.a
|
||||
key={social.label}
|
||||
@@ -189,9 +181,8 @@ const Header = () => {
|
||||
initial={{ scale: 0, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: (navItems.length + index) * 0.05 }}
|
||||
whileHover={{ scale: 1.1, y: -2 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="p-3 rounded-xl bg-gray-800/50 hover:bg-gray-700/50 transition-all duration-200 text-gray-300 hover:text-white"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
className="p-3 rounded-full bg-white/60 text-stone-600 shadow-sm"
|
||||
aria-label={social.label}
|
||||
>
|
||||
<social.icon size={20} />
|
||||
|
||||
Reference in New Issue
Block a user