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

update

Browse Source
This commit is contained in:
Dennis Konkol
2025-09-02 23:46:36 +00:00
parent ded873e6b4
commit 203a332306
22 changed files with 3886 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
app/components/Hero.tsx
View File

@@ -3,6 +3,7 @@
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);
@@ -70,11 +71,72 @@ const Hero = () => {
</div>
<div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
{/* Profile Image */}
<motion.div
initial={{ opacity: 0, scale: 0.8, rotateY: -15 }}
animate={{ opacity: 1, scale: 1, rotateY: 0 }}
transition={{ duration: 1, delay: 0.1, ease: "easeOut" }}
className="mb-8 flex justify-center"
>
<div className="relative group">
{/* Glowing border effect */}
<div className="absolute -inset-1 bg-gradient-to-r from-blue-600 via-purple-600 to-cyan-600 rounded-full blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-pulse"></div>
{/* 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
className="object-cover"
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" />
</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.2 }}
transition={{ duration: 0.8, delay: 0.8 }}
className="text-5xl md:text-7xl font-bold mb-6"
>
<span className="gradient-text">Dennis Konkol</span>
@@ -84,7 +146,7 @@ const Hero = () => {
<motion.p
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
transition={{ duration: 0.8, delay: 1.0 }}
className="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto"
>
Student & Software Engineer based in Osnabrück, Germany
@@ -94,7 +156,7 @@ const Hero = () => {
<motion.p
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
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.
@@ -105,7 +167,7 @@ const Hero = () => {
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.8 }}
transition={{ duration: 0.8, delay: 1.4 }}
className="flex flex-wrap justify-center gap-6 mb-12"
>
{features.map((feature, index) => (
@@ -113,7 +175,7 @@ const Hero = () => {
key={feature.text}
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 1 + index * 0.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"
>
@@ -127,7 +189,7 @@ const Hero = () => {
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 1.2 }}
transition={{ duration: 0.8, delay: 1.8 }}
className="flex flex-col sm:flex-row gap-4 justify-center items-center"
>
<motion.a