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

style: final polish for design overhaul

Browse Source 
Fixed all compilation errors, improved responsive layout, added missing icons, and refined animations for a perfect user experience.
This commit is contained in:
denshooter
2026-02-16 00:54:41 +01:00
parent 332adab08c
commit 18f8fb7407
3 changed files with 225 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
app/components/Hero.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { motion } from "framer-motion";
import { ArrowDown, Github, Linkedin, Mail } from "lucide-react";
import { ArrowDown, Github, Linkedin, Mail, Code, Zap } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
const Hero = () => {
@@ -9,91 +9,142 @@ const Hero = () => {
const t = useTranslations("home.hero");
return (
<section className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden bg-stone-50 dark:bg-stone-950 px-4">
{/* Dynamic Background */}
<section className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden bg-stone-50 dark:bg-stone-950 px-4 transition-colors duration-500">
{/* Liquid Ambient Background */}
<div className="absolute inset-0 pointer-events-none">
<div className="absolute top-[20%] left-[20%] w-[500px] h-[500px] bg-liquid-mint/20 rounded-full blur-[120px] animate-pulse"></div>
<div className="absolute bottom-[20%] right-[20%] w-[400px] h-[400px] bg-liquid-purple/20 rounded-full blur-[100px] animate-pulse delay-1000"></div>
<div className="absolute top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-white/50 dark:bg-stone-950/80 blur-3xl rounded-full"></div>
<motion.div
animate={{
scale: [1, 1.2, 1],
x: [0, 30, 0],
y: [0, -20, 0],
}}
transition={{ duration: 20, repeat: Infinity, ease: "easeInOut" }}
className="absolute top-[10%] left-[10%] w-[600px] h-[600px] bg-liquid-mint/15 dark:bg-liquid-mint/5 rounded-full blur-[120px]"
/>
<motion.div
animate={{
scale: [1.2, 1, 1.2],
x: [0, -40, 0],
y: [0, 30, 0],
}}
transition={{ duration: 25, repeat: Infinity, ease: "easeInOut" }}
className="absolute bottom-[10%] right-[10%] w-[500px] h-[500px] bg-liquid-purple/15 dark:bg-liquid-purple/5 rounded-full blur-[100px]"
/>
</div>
<div className="relative z-10 text-center max-w-5xl mx-auto">
{/* Availability Badge */}
<div className="relative z-10 text-center max-w-6xl mx-auto">
{/* Profile / dk0.dev Badge */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/50 dark:bg-stone-900/50 border border-stone-200 dark:border-stone-800 backdrop-blur-sm mb-8"
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
className="mb-10 relative inline-block"
>
<span className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
</span>
<span className="text-xs font-medium text-stone-600 dark:text-stone-400 uppercase tracking-wider">Available for work</span>
<div className="px-6 py-2.5 rounded-full bg-white/80 dark:bg-stone-900/80 backdrop-blur-xl border-2 border-stone-200 dark:border-stone-800 shadow-xl flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-gradient-to-tr from-liquid-mint to-liquid-sky flex items-center justify-center font-black text-xs text-stone-900 shadow-sm">
dk
</div>
<span className="font-mono text-sm font-bold tracking-tight text-stone-800 dark:text-stone-200">
dk<span className="text-red-500">0</span>.dev
</span>
</div>
{/* Floating decorative icons */}
<motion.div
animate={{ y: [0, -10, 0] }}
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
className="absolute -top-6 -right-6 p-2 bg-white dark:bg-stone-800 rounded-lg shadow-lg border border-stone-100 dark:border-stone-700 hidden md:block"
>
<Code size={16} className="text-stone-400" />
</motion.div>
<motion.div
animate={{ y: [0, 10, 0] }}
transition={{ duration: 5, repeat: Infinity, ease: "easeInOut", delay: 1 }}
className="absolute -bottom-4 -left-8 p-2 bg-white dark:bg-stone-800 rounded-lg shadow-lg border border-stone-100 dark:border-stone-700 hidden md:block"
>
<Zap size={16} className="text-yellow-400" />
</motion.div>
</motion.div>
{/* Main Title */}
<h1 className="text-6xl md:text-9xl font-black tracking-tighter text-stone-900 dark:text-stone-50 mb-6 leading-[0.9]">
{/* Huge Headlines */}
<h1 className="text-6xl md:text-[10rem] font-black tracking-tighter text-stone-900 dark:text-stone-50 mb-8 leading-[0.85] uppercase">
<motion.span
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7, delay: 0.1 }}
initial={{ opacity: 0, x: -100 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 1, ease: [0.25, 0.1, 0.25, 1] }}
className="block"
>
Building
Engineer
</motion.span>
<motion.span
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7, delay: 0.2 }}
className="block text-transparent bg-clip-text bg-gradient-to-r from-stone-800 via-stone-600 to-stone-800 dark:from-stone-100 dark:via-stone-400 dark:to-stone-100 pb-2"
initial={{ opacity: 0, x: 100 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 1, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
className="block text-transparent bg-clip-text bg-gradient-to-r from-liquid-mint via-liquid-sky to-liquid-purple pb-4"
>
Digital Products
Design
</motion.span>
</h1>
{/* Subtitle */}
{/* Description */}
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, delay: 0.4 }}
className="text-lg md:text-2xl text-stone-600 dark:text-stone-400 max-w-2xl mx-auto font-light leading-relaxed mb-12"
transition={{ duration: 1, delay: 0.5 }}
className="text-xl md:text-3xl text-stone-500 dark:text-stone-400 max-w-3xl mx-auto font-light leading-snug mb-14 tracking-tight"
>
I'm Dennis, a Software Engineer crafting polished web & mobile experiences with a focus on performance and design.
Merging technical excellence with high-end aesthetic.
<br className="hidden md:block" /> Based in Osnabrück, building globally.
</motion.p>
{/* Buttons */}
{/* Primary Actions */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.6 }}
className="flex flex-col sm:flex-row items-center justify-center gap-4"
transition={{ duration: 0.8, delay: 0.8 }}
className="flex flex-col sm:flex-row items-center justify-center gap-6"
>
<a href="#projects" className="px-8 py-4 bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900 rounded-full font-bold hover:scale-105 active:scale-95 transition-transform">
View My Work
<a
href="#projects"
className="group relative px-10 py-5 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-2xl font-black text-lg hover:scale-[1.02] active:scale-[0.98] transition-all overflow-hidden"
>
<div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/10 to-white/0 -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
START EXPLORING
</a>
<div className="flex gap-2">
<a href="https://github.com/Denshooter" target="_blank" rel="noopener noreferrer" className="p-4 bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-full hover:bg-stone-50 dark:hover:bg-stone-800 transition-colors">
<Github size={20} />
</a>
<a href="https://linkedin.com/in/dkonkol" target="_blank" rel="noopener noreferrer" className="p-4 bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-full hover:bg-stone-50 dark:hover:bg-stone-800 transition-colors">
<Linkedin size={20} />
</a>
<a href="mailto:contact@dk0.dev" className="p-4 bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-full hover:bg-stone-50 dark:hover:bg-stone-800 transition-colors">
<Mail size={20} />
</a>
<div className="flex items-center gap-4">
{[
{ icon: Github, href: "https://github.com/Denshooter" },
{ icon: Linkedin, href: "https://linkedin.com/in/dkonkol" },
{ icon: Mail, href: "mailto:contact@dk0.dev" }
].map((social, i) => (
<a
key={i}
href={social.href}
target="_blank"
rel="noopener noreferrer"
className="p-4 bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-2xl text-stone-400 hover:text-stone-900 dark:hover:text-stone-50 hover:bg-stone-50 dark:hover:bg-stone-800 transition-all shadow-sm hover:shadow-md"
>
<social.icon size={22} />
</a>
))}
</div>
</motion.div>
</div>
{/* Scroll Indicator */}
{/* Modern Scroll Indicator */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1, y: [0, 10, 0] }}
transition={{ delay: 1, duration: 2, repeat: Infinity }}
className="absolute bottom-10 left-1/2 -translate-x-1/2"
animate={{ opacity: 1 }}
transition={{ delay: 1.5, duration: 1 }}
className="absolute bottom-12 flex flex-col items-center gap-4"
>
<ArrowDown className="text-stone-400 dark:text-stone-600" />
<span className="text-[10px] font-bold uppercase tracking-[0.3em] text-stone-400 dark:text-stone-600">Scroll Down</span>
<motion.div
animate={{ y: [0, 12, 0] }}
transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
className="w-px h-12 bg-gradient-to-b from-stone-300 dark:from-stone-700 to-transparent"
/>
</motion.div>
</section>
);