full upgrade to dev
This commit is contained in:
@@ -1,10 +1,9 @@
|
||||
"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';
|
||||
import { LiquidHeading } from '@/components/LiquidHeading';
|
||||
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);
|
||||
@@ -14,97 +13,136 @@ const Hero = () => {
|
||||
}, []);
|
||||
|
||||
const features = [
|
||||
{ icon: Code, text: 'Full-Stack Development' },
|
||||
{ icon: Zap, text: 'Modern Technologies' },
|
||||
{ icon: Rocket, text: 'Innovative Solutions' },
|
||||
{ icon: Code, text: "Next.js & Flutter" },
|
||||
{ icon: Zap, text: "Docker Swarm & CI/CD" },
|
||||
{ icon: Rocket, text: "Self-Hosted Infrastructure" },
|
||||
];
|
||||
|
||||
// Smooth scroll configuration
|
||||
const smoothTransition = {
|
||||
type: "spring",
|
||||
damping: 30,
|
||||
stiffness: 50,
|
||||
mass: 1,
|
||||
};
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20 pb-8 bg-transparent">
|
||||
|
||||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-32 pb-16 bg-gradient-to-br from-liquid-mint/10 via-liquid-lavender/10 to-liquid-rose/10">
|
||||
<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 inline-block"
|
||||
>
|
||||
<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 with Organic Blob Mask */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 1, delay: 0.7, ease: "easeOut" }}
|
||||
className="mb-10 flex justify-center relative z-20"
|
||||
transition={{ duration: 1.2, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
|
||||
className="mb-12 flex justify-center relative z-20"
|
||||
>
|
||||
<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 */}
|
||||
{/* Large Rotating Liquid Blobs behind image - Very slow and smooth */}
|
||||
<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" }}
|
||||
className="absolute w-[150%] h-[150%] bg-gradient-to-tr from-liquid-mint/40 via-liquid-blue/30 to-liquid-lavender/40 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, 120, 0],
|
||||
scale: [1, 1.08, 1],
|
||||
}}
|
||||
transition={{
|
||||
duration: 35,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
repeatType: "reverse",
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute w-[130%] h-[130%] bg-gradient-to-bl from-liquid-rose/35 via-purple-200/25 to-liquid-mint/35 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: [0, -90, 0],
|
||||
scale: [1, 1.05, 1],
|
||||
}}
|
||||
transition={{
|
||||
duration: 40,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
repeatType: "reverse",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* The Image Container with Organic Border Radius */}
|
||||
<motion.div
|
||||
className="absolute inset-0 overflow-hidden bg-stone-100"
|
||||
style={{
|
||||
filter: "drop-shadow(0 20px 40px rgba(0,0,0,0.1))",
|
||||
willChange: "border-radius",
|
||||
}}
|
||||
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: 12,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
repeatType: "reverse",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/images/me.jpg"
|
||||
alt="Dennis Konkol"
|
||||
fill
|
||||
className="object-cover scale-105 hover:scale-110 transition-transform duration-700"
|
||||
priority
|
||||
/>
|
||||
|
||||
{/* 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" />
|
||||
<Image
|
||||
src="/images/me.jpg"
|
||||
alt="Dennis Konkol"
|
||||
fill
|
||||
className="object-cover scale-105 hover:scale-[1.08] transition-transform duration-1000 ease-out"
|
||||
priority
|
||||
/>
|
||||
|
||||
{/* Glossy Overlay for Liquid Feel */}
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-white/25 via-transparent to-white/10 opacity-60 pointer-events-none z-10" />
|
||||
|
||||
{/* Inner Border/Highlight */}
|
||||
<div className="absolute inset-0 border-[2px] border-white/30 rounded-[inherit] pointer-events-none z-20" />
|
||||
</motion.div>
|
||||
|
||||
{/* Floating Badges */}
|
||||
|
||||
{/* Domain Badge - repositioned below image */}
|
||||
<motion.div
|
||||
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"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.8, ease: "easeOut" }}
|
||||
className="absolute -bottom-8 left-1/2 -translate-x-1/2 z-30"
|
||||
>
|
||||
<div className="px-6 py-2.5 rounded-full glass-panel text-stone-700 font-mono text-sm tracking-wider shadow-lg backdrop-blur-xl border border-white/50">
|
||||
dk<span className="text-liquid-rose font-bold">0</span>.dev
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Floating Badges - subtle animations */}
|
||||
<motion.div
|
||||
initial={{ scale: 0, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: 1.2, duration: 0.8, ease: "easeOut" }}
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
className="absolute -top-4 right-0 md:-right-4 p-3 bg-white/95 backdrop-blur-md shadow-lg rounded-full text-stone-700 z-30"
|
||||
>
|
||||
<Code size={24} />
|
||||
</motion.div>
|
||||
<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"
|
||||
<motion.div
|
||||
initial={{ scale: 0, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: 1.4, duration: 0.8, ease: "easeOut" }}
|
||||
whileHover={{ scale: 1.1, rotate: -5 }}
|
||||
className="absolute bottom-4 -left-4 md:-left-8 p-3 bg-white/95 backdrop-blur-md shadow-lg rounded-full text-stone-700 z-30"
|
||||
>
|
||||
<Zap size={24} />
|
||||
</motion.div>
|
||||
@@ -112,74 +150,95 @@ const Hero = () => {
|
||||
</motion.div>
|
||||
|
||||
{/* Main Title */}
|
||||
<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>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.6, ease: [0.25, 0.1, 0.25, 1] }}
|
||||
className="mb-8 flex flex-col items-center justify-center relative"
|
||||
>
|
||||
<h1 className="text-5xl md:text-8xl font-bold tracking-tighter text-stone-900 mb-2">
|
||||
Dennis Konkol
|
||||
</h1>
|
||||
<h2 className="text-2xl md:text-4xl font-light tracking-wide text-stone-600 mt-2">
|
||||
Software Engineer
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
{/* Description */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 1.2 }}
|
||||
className="text-lg md:text-xl text-stone-600 mb-12 max-w-2xl mx-auto leading-relaxed"
|
||||
transition={{ duration: 1, delay: 0.9, ease: [0.25, 0.1, 0.25, 1] }}
|
||||
className="text-lg md:text-xl text-stone-700 mb-12 max-w-2xl mx-auto leading-relaxed"
|
||||
>
|
||||
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>.
|
||||
Student and passionate{" "}
|
||||
<span className="text-stone-900 font-semibold decoration-liquid-mint decoration-2 underline underline-offset-4">
|
||||
self-hoster
|
||||
</span>{" "}
|
||||
building full-stack web apps and mobile solutions. I run my own{" "}
|
||||
<span className="text-stone-900 font-semibold decoration-liquid-lavender decoration-2 underline underline-offset-4">
|
||||
infrastructure
|
||||
</span>{" "}
|
||||
and love exploring{" "}
|
||||
<span className="text-stone-900 font-semibold decoration-liquid-rose decoration-2 underline underline-offset-4">
|
||||
DevOps
|
||||
</span>
|
||||
.
|
||||
</motion.p>
|
||||
|
||||
{/* Features */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 1.4 }}
|
||||
transition={{ duration: 1, delay: 1.1, ease: [0.25, 0.1, 0.25, 1] }}
|
||||
className="flex flex-wrap justify-center gap-4 mb-12"
|
||||
>
|
||||
{features.map((feature, index) => (
|
||||
<motion.div
|
||||
key={feature.text}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 1.6 + index * 0.1 }}
|
||||
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"
|
||||
transition={{
|
||||
duration: 0.8,
|
||||
delay: 1.3 + index * 0.15,
|
||||
ease: [0.25, 0.1, 0.25, 1],
|
||||
}}
|
||||
whileHover={{ scale: 1.03, y: -3 }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
className="flex items-center space-x-2 px-5 py-2.5 rounded-full bg-white/70 border border-white/90 shadow-sm backdrop-blur-sm"
|
||||
>
|
||||
<feature.icon className="w-4 h-4 text-stone-700" />
|
||||
<span className="text-stone-700 font-medium text-sm">{feature.text}</span>
|
||||
<span className="text-stone-700 font-medium text-sm">
|
||||
{feature.text}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 1.8 }}
|
||||
transition={{ duration: 1, delay: 1.6, ease: [0.25, 0.1, 0.25, 1] }}
|
||||
className="flex flex-col sm:flex-row gap-5 justify-center items-center"
|
||||
>
|
||||
<motion.a
|
||||
href="#projects"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
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"
|
||||
whileHover={{ scale: 1.03, y: -2 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
className="px-8 py-4 bg-stone-900 text-cream rounded-full font-medium shadow-lg hover:shadow-xl hover:bg-stone-950 transition-all duration-500 flex items-center gap-2"
|
||||
>
|
||||
<span>View My Work</span>
|
||||
<ArrowDown size={18} />
|
||||
</motion.a>
|
||||
|
||||
|
||||
<motion.a
|
||||
href="#contact"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
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"
|
||||
whileHover={{ scale: 1.03, y: -2 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
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 duration-500"
|
||||
>
|
||||
<span>Contact Me</span>
|
||||
</motion.a>
|
||||
|
||||
Reference in New Issue
Block a user