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.

app/components/About.tsx

@@ -2,7 +2,8 @@
 
 import { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
-import { Code, Database, Cloud, Smartphone, Globe, Zap, Brain, Rocket } from 'lucide-react';
+import { Code, Terminal, Cpu, Globe } from 'lucide-react';
+import { LiquidHeading } from '@/components/LiquidHeading';
 
 const About = () => {
   const [mounted, setMounted] = useState(false);
@@ -11,180 +12,83 @@ const About = () => {
     setMounted(true);
   }, []);
 
-  const skills = [
+  const techStack = [
     {
       category: 'Frontend',
-      icon: Code,
-      technologies: ['React', 'Next.js', 'TypeScript', 'Tailwind CSS', 'Framer Motion'],
-      color: 'from-blue-500 to-cyan-500'
+      icon: Globe,
+      items: ['React', 'TypeScript', 'Tailwind', 'Next.js']
     },
     {
       category: 'Backend',
-      icon: Database,
-      technologies: ['Node.js', 'PostgreSQL', 'Prisma', 'REST APIs', 'GraphQL'],
-      color: 'from-purple-500 to-pink-500'
+      icon: Terminal,
+      items: ['Node.js', 'PostgreSQL', 'Prisma', 'API Design']
     },
     {
-      category: 'DevOps',
-      icon: Cloud,
-      technologies: ['Docker', 'CI/CD', 'Nginx', 'Redis', 'AWS'],
-      color: 'from-green-500 to-emerald-500'
-    },
-    {
-      category: 'Mobile',
-      icon: Smartphone,
-      technologies: ['React Native', 'Expo', 'iOS', 'Android'],
-      color: 'from-orange-500 to-red-500'
-    },
+      category: 'Tools',
+      icon: Cpu,
+      items: ['Git', 'Docker', 'VS Code', 'Figma']
+    }
   ];
 
-  const values = [
-    {
-      icon: Brain,
-      title: 'Problem Solving',
-      description: 'I love tackling complex challenges and finding elegant solutions.'
-    },
-    {
-      icon: Zap,
-      title: 'Performance',
-      description: 'Building fast, efficient applications that scale with your needs.'
-    },
-    {
-      icon: Rocket,
-      title: 'Innovation',
-      description: 'Always exploring new technologies and best practices.'
-    },
-    {
-      icon: Globe,
-      title: 'User Experience',
-      description: 'Creating intuitive interfaces that users love to interact with.'
-    },
-  ];
-
-  if (!mounted) {
-    return null;
-  }
+  if (!mounted) return null;
 
   return (
-    <section id="about" className="py-20 px-4 relative overflow-hidden">
-      <div className="max-w-7xl mx-auto">
-        {/* Section Header */}
-        <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">
-            About Me
-          </h2>
-          <p className="text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed">
-            I&apos;m a passionate software engineer with a love for creating beautiful, 
-            functional applications. I enjoy working with modern technologies and 
-            turning ideas into reality.
-          </p>
-        </motion.div>
-
-        {/* About Content */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-20">
-          <motion.div
-            initial={{ opacity: 0, x: -30 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="space-y-6"
-          >
-            <h3 className="text-3xl font-bold text-white mb-4">My Journey</h3>
-            <p className="text-gray-300 leading-relaxed text-lg">
-              I&apos;m a student and software engineer based in Osnabrück, Germany. 
-              My passion for technology started early, and I&apos;ve been building 
-              applications ever since.
-            </p>
-            <p className="text-gray-300 leading-relaxed text-lg">
-              I specialize in full-stack development, with a focus on creating 
-              modern, performant web applications. I&apos;m always learning new 
-              technologies and improving my skills.
-            </p>
-            <p className="text-gray-300 leading-relaxed text-lg">
-              When I&apos;m not coding, I enjoy exploring new technologies, contributing 
-              to open-source projects, and sharing knowledge with the developer community.
-            </p>
-          </motion.div>
-
-          <motion.div
-            initial={{ opacity: 0, x: 30 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="space-y-6"
-          >
-            <h3 className="text-3xl font-bold text-white mb-4">What I Do</h3>
-            <div className="grid grid-cols-2 gap-4">
-              {values.map((value, index) => (
-                <motion.div
-                  key={value.title}
-                  initial={{ opacity: 0, scale: 0.9 }}
-                  whileInView={{ opacity: 1, scale: 1 }}
-                  viewport={{ once: true }}
-                  transition={{ duration: 0.5, delay: index * 0.1 }}
-                  whileHover={{ y: -5, scale: 1.02 }}
-                  className="p-6 rounded-xl glass-card"
-                >
-                  <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg flex items-center justify-center mb-4">
-                    <value.icon className="w-6 h-6 text-white" />
-                  </div>
-                  <h4 className="text-lg font-semibold text-white mb-2">{value.title}</h4>
-                  <p className="text-sm text-gray-400 leading-relaxed">{value.description}</p>
-                </motion.div>
-              ))}
+    <section id="about" className="py-24 px-4 bg-white relative overflow-hidden">
+      <div className="max-w-6xl mx-auto relative z-10">
+        
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          {/* Text Content */}
+          <div className="space-y-8">
+             <LiquidHeading 
+                text="About Me" 
+                level={2} 
+                className="text-4xl md:text-5xl font-bold text-stone-900"
+              />
+            <div className="prose prose-stone prose-lg text-stone-600">
+              <p>
+                Hi, I&apos;m Dennis. I&apos;m a software engineer who likes building things that work well and look good.
+              </p>
+              <p>
+                I&apos;m currently based in Osnabrück, Germany. My journey in tech is driven by curiosity—I love figuring out how things work and how to make them better.
+              </p>
+              <p>
+                When I&apos;m not in front of a screen, you can find me listening to music, exploring new ideas, or just relaxing.
+              </p>
             </div>
-          </motion.div>
-        </div>
+          </div>
 
-        {/* Skills Section */}
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.8 }}
-          className="mb-16"
-        >
-          <h3 className="text-3xl font-bold text-white mb-8 text-center">Skills & Technologies</h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {skills.map((skill, index) => (
+          {/* Simplified Skills / Tech Stack */}
+          <div className="grid grid-cols-1 gap-6">
+            <h3 className="text-xl font-bold text-stone-900 mb-2">My Toolbox</h3>
+            {techStack.map((stack, idx) => (
               <motion.div
-                key={skill.category}
-                initial={{ opacity: 0, y: 30 }}
-                whileInView={{ opacity: 1, y: 0 }}
+                key={stack.category}
+                initial={{ opacity: 0, x: 20 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                transition={{ delay: idx * 0.1 }}
                 viewport={{ once: true }}
-                transition={{ duration: 0.6, delay: index * 0.1 }}
-                whileHover={{ y: -8, scale: 1.02 }}
-                className="glass-card p-6 rounded-2xl"
+                className="p-6 rounded-xl bg-stone-50 border border-stone-100 hover:border-stone-200 transition-colors"
               >
-                <div className={`w-14 h-14 bg-gradient-to-br ${skill.color} rounded-xl flex items-center justify-center mb-4`}>
-                  <skill.icon className="w-7 h-7 text-white" />
+                <div className="flex items-center gap-3 mb-4">
+                  <div className="p-2 bg-white rounded-lg shadow-sm text-stone-700">
+                    <stack.icon size={20} />
+                  </div>
+                  <h4 className="font-semibold text-stone-800">{stack.category}</h4>
                 </div>
-                <h4 className="text-xl font-bold text-white mb-4">{skill.category}</h4>
-                <div className="space-y-2">
-                  {skill.technologies.map((tech) => (
-                    <div
-                      key={tech}
-                      className="px-3 py-1.5 bg-gray-800/50 rounded-lg text-sm text-gray-300 border border-gray-700/50"
-                    >
-                      {tech}
-                    </div>
+                <div className="flex flex-wrap gap-2">
+                  {stack.items.map(item => (
+                    <span key={item} className="px-3 py-1 bg-white rounded-md border border-stone-200 text-sm text-stone-600">
+                      {item}
+                    </span>
                   ))}
                 </div>
               </motion.div>
             ))}
           </div>
-        </motion.div>
+        </div>
       </div>
     </section>
   );
 };
 
-export default About;
-
-
+export default About;