denshooter
519ca43168
- Modify Dockerfile to install curl without recommended packages for a leaner image. - Update Next.js configuration to set outputFileTracingRoot for better Docker compatibility. - Revise contact components to improve messaging and clarity, changing "Get In Touch" to "Contact Me" and enhancing descriptions for collaboration opportunities. - Clean up Prisma schema by removing unnecessary comments and restructuring the Project model for clarity.
245 lines
8.7 KiB
TypeScript
245 lines
8.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { ArrowDown, Code, Zap, Rocket } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
|
|
const Hero = () => {
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
const features = [
|
|
{ icon: Code, text: 'Full-Stack Development' },
|
|
{ icon: Zap, text: 'Modern Technologies' },
|
|
{ icon: Rocket, text: 'Innovative Solutions' },
|
|
];
|
|
|
|
if (!mounted) {
|
|
return null;
|
|
}
|
|
|
|
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>
|
|
|
|
{/* 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 */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.5 }}
|
|
className="mb-8"
|
|
>
|
|
<div className="domain-text text-white/95 text-center">
|
|
dk<span className="text-red-500">0</span>.dev
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Profile Image */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8, rotateY: -15 }}
|
|
animate={{ opacity: 1, scale: 1, rotateY: 0 }}
|
|
transition={{ duration: 1, delay: 0.7, ease: "easeOut" }}
|
|
className="mb-8 flex justify-center"
|
|
>
|
|
<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"
|
|
>
|
|
<Image
|
|
src="/images/me.jpg"
|
|
alt="Dennis Konkol - Software Engineer"
|
|
fill={true}
|
|
className="object-cover"
|
|
priority={true}
|
|
/>
|
|
|
|
{/* 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" />
|
|
</motion.div>
|
|
|
|
<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"
|
|
>
|
|
<Zap className="w-5 h-5 text-white" />
|
|
</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"
|
|
>
|
|
<Rocket className="w-5 h-5 text-white" />
|
|
</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>
|
|
|
|
{/* 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"
|
|
>
|
|
Passionate about technology, coding, and solving real-world problems.
|
|
I create innovative solutions that make a difference.
|
|
</motion.p>
|
|
|
|
{/* Features */}
|
|
<motion.div
|
|
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"
|
|
>
|
|
{features.map((feature, index) => (
|
|
<motion.div
|
|
key={feature.text}
|
|
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"
|
|
>
|
|
<feature.icon className="w-5 h-5 text-blue-400" />
|
|
<span className="text-gray-300 font-medium">{feature.text}</span>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
|
|
{/* CTA Buttons */}
|
|
<motion.div
|
|
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"
|
|
>
|
|
<motion.a
|
|
href="#projects"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="btn-primary px-8 py-4 text-lg font-semibold"
|
|
>
|
|
View My Work
|
|
</motion.a>
|
|
|
|
<motion.a
|
|
href="#contact"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="px-8 py-4 text-lg font-semibold border-2 border-gray-600 text-gray-300 hover:text-white hover:border-gray-500 rounded-lg transition-all duration-200"
|
|
>
|
|
Contact Me
|
|
</motion.a>
|
|
</motion.div>
|
|
|
|
{/* Scroll Indicator */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 1, delay: 1.5 }}
|
|
className="mt-12 md:mt-16 text-center relative z-20"
|
|
>
|
|
<motion.div
|
|
animate={{ y: [0, 10, 0] }}
|
|
transition={{ duration: 2, repeat: Infinity }}
|
|
className="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"
|
|
>
|
|
<span className="text-sm md:text-base mb-2 font-medium">Scroll Down</span>
|
|
<ArrowDown className="w-5 h-5 md:w-6 md:h-6" />
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|