denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add activity feed and background effects

Browse Source 
- 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:
denshooter
2026-01-06 20:10:00 +01:00
parent e74f85da41
commit 4dc727fcd6
16 changed files with 801 additions and 1172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/components/Footer.tsx
View File

@@ -25,7 +25,7 @@ const Footer = () => {
}
return (
<footer className="relative py-12 px-4 bg-black/95 backdrop-blur-sm border-t border-gray-800/50">
<footer className="relative py-12 px-4 bg-white border-t border-stone-200">
<div className="max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
{/* Brand */}
@@ -39,15 +39,15 @@ const Footer = () => {
<motion.div
whileHover={{ rotate: 360, scale: 1.1 }}
transition={{ duration: 0.5 }}
className="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-xl flex items-center justify-center shadow-lg"
className="w-12 h-12 bg-gradient-to-br from-liquid-mint to-liquid-lavender rounded-xl flex items-center justify-center shadow-md"
>
<Code className="w-6 h-6 text-white" />
<Code className="w-6 h-6 text-stone-800" />
</motion.div>
<div>
<Link href="/" className="text-xl font-bold font-mono text-white hover:text-blue-400 transition-colors">
dk<span className="text-red-500">0</span>
<Link href="/" className="text-xl font-bold font-mono text-stone-800 hover:text-liquid-blue transition-colors">
dk<span className="text-liquid-rose">0</span>
</Link>
<p className="text-xs text-gray-500">Software Engineer</p>
<p className="text-xs text-stone-500">Software Engineer</p>
</div>
</motion.div>
@@ -67,7 +67,7 @@ const Footer = () => {
rel="noopener noreferrer"
whileHover={{ scale: 1.15, y: -3 }}
whileTap={{ scale: 0.95 }}
className="p-3 bg-gray-800/60 backdrop-blur-sm hover:bg-gray-700/60 rounded-xl text-gray-300 hover:text-white transition-all duration-200 border border-gray-700/50 hover:border-gray-600 shadow-lg"
className="p-3 bg-stone-50 hover:bg-white rounded-xl text-stone-600 hover:text-stone-900 transition-all duration-200 border border-stone-200 hover:border-stone-300 shadow-sm"
aria-label={social.label}
>
<social.icon size={18} />
@@ -81,14 +81,14 @@ const Footer = () => {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 }}
className="flex items-center space-x-2 text-gray-400 text-sm"
className="flex items-center space-x-2 text-stone-400 text-sm"
>
<span>© {currentYear}</span>
<motion.div
animate={{ scale: [1, 1.2, 1] }}
transition={{ duration: 1.5, repeat: Infinity }}
>
<Heart size={14} className="text-red-500" />
<Heart size={14} className="text-liquid-rose fill-liquid-rose" />
</motion.div>
<span>Made in Germany</span>
</motion.div>
@@ -100,30 +100,30 @@ const Footer = () => {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.3 }}
className="mt-8 pt-6 border-t border-gray-800/50 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"
className="mt-8 pt-6 border-t border-stone-100 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"
>
<div className="flex space-x-6 text-sm">
<Link
href="/legal-notice"
className="text-gray-500 hover:text-gray-300 transition-colors duration-200"
className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
>
Impressum
</Link>
<Link
href="/privacy-policy"
className="text-gray-500 hover:text-gray-300 transition-colors duration-200"
className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
>
Privacy Policy
</Link>
</div>
<div className="text-xs text-gray-500 flex items-center space-x-1">
<div className="text-xs text-stone-400 flex items-center space-x-1">
<span>Built with</span>
<span className="text-blue-400 font-semibold">Next.js</span>
<span className="text-gray-600">•</span>
<span className="text-blue-400 font-semibold">TypeScript</span>
<span className="text-gray-600">•</span>
<span className="text-blue-400 font-semibold">Tailwind CSS</span>
<span className="text-stone-600 font-semibold">Next.js</span>
<span className="text-stone-300">•</span>
<span className="text-stone-600 font-semibold">TypeScript</span>
<span className="text-stone-300">•</span>
<span className="text-stone-600 font-semibold">Tailwind CSS</span>
</div>
</motion.div>
</div>