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

224
app/components/Hero.tsx
View File

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { ArrowDown, Code, Zap, Rocket } from 'lucide-react';
import Image from 'next/image';
import { LiquidHeading } from '@/components/LiquidHeading';
const Hero = () => {
const [mounted, setMounted] = useState(false);
@@ -23,153 +24,116 @@ const Hero = () => {
}
return (
<section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20 pb-8">
{/* Animated Background */}
<div className="absolute inset-0 animated-bg"></div>
<section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20 pb-8 bg-transparent">
{/* Floating Elements */}
<div className="absolute inset-0 overflow-hidden">
<motion.div
className="absolute top-20 left-20 w-32 h-32 bg-blue-500/10 rounded-full blur-xl"
initial={{ scale: 1, opacity: 0.3 }}
animate={{
scale: [1, 1.2, 1],
opacity: [0.3, 0.6, 0.3],
}}
transition={{
duration: 4,
repeat: Infinity,
ease: "easeInOut",
}}
/>
<motion.div
className="absolute top-40 right-32 w-24 h-24 bg-purple-500/10 rounded-full blur-xl"
initial={{ scale: 1.2, opacity: 0.6 }}
animate={{
scale: [1.2, 1, 1.2],
opacity: [0.6, 0.3, 0.6],
}}
transition={{
duration: 5,
repeat: Infinity,
ease: "easeInOut",
}}
/>
<motion.div
className="absolute bottom-32 left-1/3 w-40 h-40 bg-cyan-500/10 rounded-full blur-xl"
initial={{ scale: 1, opacity: 0.4 }}
animate={{
scale: [1, 1.3, 1],
opacity: [0.4, 0.7, 0.4],
}}
transition={{
duration: 6,
repeat: Infinity,
ease: "easeInOut",
}}
/>
</div>
<div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
{/* Domain - über dem Profilbild */}
<div className="relative z-10 text-center px-4 max-w-5xl mx-auto">
{/* Domain Badge */}
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.5 }}
className="mb-8"
className="mb-8 inline-block"
>
<div className="domain-text text-white/95 text-center">
dk<span className="text-red-500">0</span>.dev
<div className="px-6 py-2 rounded-full glass-panel text-stone-600 font-mono text-sm tracking-wider uppercase">
dk<span className="text-liquid-rose font-bold">0</span>.dev
</div>
</motion.div>
{/* Profile Image */}
{/* Profile Image with Organic Blob Mask */}
<motion.div
initial={{ opacity: 0, scale: 0.8, rotateY: -15 }}
animate={{ opacity: 1, scale: 1, rotateY: 0 }}
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 1, delay: 0.7, ease: "easeOut" }}
className="mb-8 flex justify-center"
className="mb-10 flex justify-center relative z-20"
>
<div className="relative group">
{/* Profile image container */}
<div className="relative bg-gray-900 rounded-full p-1">
<motion.div
whileHover={{ scale: 1.05, rotateY: 5 }}
transition={{ duration: 0.3 }}
className="relative w-40 h-40 md:w-48 md:h-48 lg:w-56 lg:h-56 rounded-full overflow-hidden border-4 border-gray-800"
>
<div className="relative w-64 h-64 md:w-80 md:h-80 flex items-center justify-center">
{/* Large Rotating Liquid Blobs behind image */}
<motion.div
className="absolute w-[140%] h-[140%] bg-gradient-to-tr from-liquid-mint via-liquid-blue to-liquid-lavender opacity-60 blur-3xl -z-10"
animate={{
borderRadius: ["60% 40% 30% 70%/60% 30% 70% 40%", "30% 60% 70% 40%/50% 60% 30% 60%", "60% 40% 30% 70%/60% 30% 70% 40%"],
rotate: [0, 180, 360],
scale: [1, 1.1, 1]
}}
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
/>
<motion.div
className="absolute w-[120%] h-[120%] bg-gradient-to-bl from-liquid-rose via-purple-200 to-liquid-mint opacity-40 blur-2xl -z-10"
animate={{
borderRadius: ["40% 60% 70% 30%/40% 50% 60% 50%", "60% 30% 40% 70%/60% 40% 70% 30%", "40% 60% 70% 30%/40% 50% 60% 50%"],
rotate: [360, 180, 0],
scale: [1, 0.9, 1]
}}
transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
/>
{/* The Image Container with Organic Border Radius - No hard border, just shadow and glass */}
<motion.div
className="absolute inset-0 overflow-hidden shadow-2xl bg-stone-100"
style={{ filter: "drop-shadow(0 20px 40px rgba(0,0,0,0.15))" }}
animate={{
borderRadius: ["60% 40% 30% 70%/60% 30% 70% 40%", "30% 60% 70% 40%/50% 60% 30% 60%", "60% 40% 30% 70%/60% 30% 70% 40%"]
}}
transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
>
<Image
src="/images/me.jpg"
alt="Dennis Konkol - Software Engineer"
alt="Dennis Konkol"
fill
className="object-cover"
className="object-cover scale-105 hover:scale-110 transition-transform duration-700"
priority
/>
{/* Hover overlay effect */}
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</motion.div>
</div>
{/* Floating tech badges around the image */}
<motion.div
initial={{ opacity: 0, scale: 0 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 1.5 }}
className="absolute -top-3 -right-3 w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center shadow-lg"
>
<Code className="w-5 h-5 text-white" />
{/* Glossy Overlay for Liquid Feel */}
<div className="absolute inset-0 bg-gradient-to-tr from-white/30 via-transparent to-transparent opacity-50 pointer-events-none z-10" />
{/* Inner Border/Highlight */}
<div className="absolute inset-0 border-[3px] border-white/20 rounded-[inherit] pointer-events-none z-20" />
</motion.div>
{/* Floating Badges */}
<motion.div
initial={{ opacity: 0, scale: 0 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 1.7 }}
className="absolute -bottom-3 -left-3 w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center shadow-lg"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ delay: 1.5, type: "spring" }}
className="absolute -top-4 right-0 md:-right-4 p-3 bg-white/90 backdrop-blur-md shadow-lg rounded-full text-stone-700 z-30"
>
<Zap className="w-5 h-5 text-white" />
<Code size={24} />
</motion.div>
<motion.div
initial={{ opacity: 0, scale: 0 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 1.9 }}
className="absolute -top-3 -left-3 w-10 h-10 bg-cyan-500 rounded-full flex items-center justify-center shadow-lg"
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ delay: 1.7, type: "spring" }}
className="absolute bottom-4 -left-4 md:-left-8 p-3 bg-white/90 backdrop-blur-md shadow-lg rounded-full text-stone-700 z-30"
>
<Rocket className="w-5 h-5 text-white" />
<Zap size={24} />
</motion.div>
</div>
</motion.div>
{/* Main Title */}
<motion.h1
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.8 }}
className="text-5xl md:text-7xl font-bold mb-4"
>
<span className="gradient-text">Dennis Konkol</span>
</motion.h1>
<div className="mb-6 flex flex-col items-center justify-center relative">
<LiquidHeading
text="Dennis Konkol"
level={1}
className="text-5xl md:text-8xl font-bold tracking-tighter text-stone-800"
/>
<LiquidHeading
text="Software Engineer"
level={2}
className="text-2xl md:text-4xl font-light tracking-wide text-stone-500 mt-2"
/>
</div>
{/* Subtitle */}
<motion.p
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 1.1 }}
className="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto"
>
Student & Software Engineer based in Osnabrück, Germany
</motion.p>
{/* Description */}
<motion.p
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 1.2 }}
className="text-lg text-gray-400 mb-12 max-w-3xl mx-auto leading-relaxed"
className="text-lg md:text-xl text-stone-600 mb-12 max-w-2xl mx-auto leading-relaxed"
>
Passionate about technology, coding, and solving real-world problems.
I create innovative solutions that make a difference.
I craft digital experiences with a focus on <span className="text-stone-900 font-semibold decoration-liquid-mint decoration-2 underline underline-offset-2">design</span>, <span className="text-stone-900 font-semibold decoration-liquid-lavender decoration-2 underline underline-offset-2">performance</span>, and <span className="text-stone-900 font-semibold decoration-liquid-rose decoration-2 underline underline-offset-2">user experience</span>.
</motion.p>
{/* Features */}
@@ -177,7 +141,7 @@ const Hero = () => {
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 1.4 }}
className="flex flex-wrap justify-center gap-6 mb-12"
className="flex flex-wrap justify-center gap-4 mb-12"
>
{features.map((feature, index) => (
<motion.div
@@ -185,11 +149,11 @@ const Hero = () => {
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 1.6 + index * 0.1 }}
whileHover={{ scale: 1.05, y: -5 }}
className="flex items-center space-x-2 px-4 py-2 rounded-full glass-card"
whileHover={{ scale: 1.05, y: -2 }}
className="flex items-center space-x-2 px-5 py-2.5 rounded-full bg-white/60 border border-white/80 shadow-sm backdrop-blur-sm liquid-hover"
>
<feature.icon className="w-5 h-5 text-blue-400" />
<span className="text-gray-300 font-medium">{feature.text}</span>
<feature.icon className="w-4 h-4 text-stone-700" />
<span className="text-stone-700 font-medium text-sm">{feature.text}</span>
</motion.div>
))}
</motion.div>
@@ -199,45 +163,27 @@ const Hero = () => {
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 1.8 }}
className="flex flex-col sm:flex-row gap-4 justify-center items-center"
className="flex flex-col sm:flex-row gap-5 justify-center items-center"
>
<motion.a
href="#projects"
whileHover={{ scale: 1.05, y: -2 }}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="btn-primary px-8 py-4 text-lg font-semibold inline-flex items-center space-x-2"
className="px-8 py-4 bg-stone-900 text-cream rounded-full font-medium shadow-lg hover:shadow-xl hover:bg-black transition-all flex items-center gap-2 liquid-hover"
>
<span>View My Work</span>
<ArrowDown className="w-5 h-5" />
<ArrowDown size={18} />
</motion.a>
<motion.a
href="#contact"
whileHover={{ scale: 1.05, y: -2 }}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="btn-secondary px-8 py-4 text-lg font-semibold inline-flex items-center space-x-2"
className="px-8 py-4 bg-white text-stone-900 border border-stone-200 rounded-full font-medium shadow-sm hover:shadow-md transition-all liquid-hover"
>
<span>Contact Me</span>
</motion.a>
</motion.div>
{/* Scroll Indicator */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 2 }}
className="mt-12 md:mt-16 text-center relative z-20"
>
<motion.a
href="#about"
animate={{ y: [0, 10, 0] }}
transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
className="inline-flex flex-col items-center text-white/90 bg-black/30 backdrop-blur-md px-6 py-3 rounded-full border border-white/20 shadow-lg hover:bg-black/50 hover:border-white/30 transition-all cursor-pointer group"
>
<span className="text-sm md:text-base mb-2 font-medium group-hover:text-white transition-colors">Scroll Down</span>
<ArrowDown className="w-5 h-5 md:w-6 md:h-6 group-hover:translate-y-1 transition-transform" />
</motion.a>
</motion.div>
</div>
</section>
);