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

style: final UI polish, remove pink accents, improve project card interactivity

Browse Source
This commit is contained in:
denshooter
2026-01-10 01:19:12 +01:00
parent 632302fb54
commit dda3257a03
7 changed files with 105 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/About.tsx
View File

@@ -175,7 +175,7 @@ const About = () => {
: itemIdx % 4 === 1
? "bg-liquid-lavender/10 border-liquid-lavender/30 hover:bg-liquid-lavender/20 hover:border-liquid-lavender/50"
: itemIdx % 4 === 2
? "bg-liquid-rose/10 border-liquid-rose/30 hover:bg-liquid-rose/20 hover:border-liquid-rose/50"
? "bg-stone-100 border-stone-200 hover:bg-stone-200 hover:border-stone-300 shadow-sm"
: "bg-liquid-sky/10 border-liquid-sky/30 hover:bg-liquid-sky/20 hover:border-liquid-sky/50"
}`}
>

8
app/components/Contact.tsx
View File

@@ -243,7 +243,7 @@ const Contact = () => {
htmlFor="name"
className="block text-sm font-medium text-stone-600 mb-2"
>
Name <span className="text-liquid-rose">*</span>
Name <span className="text-red-500">*</span>
</label>
<input
type="text"
@@ -278,7 +278,7 @@ const Contact = () => {
htmlFor="email"
className="block text-sm font-medium text-stone-600 mb-2"
>
Email <span className="text-liquid-rose">*</span>
Email <span className="text-red-500">*</span>
</label>
<input
type="email"
@@ -314,7 +314,7 @@ const Contact = () => {
htmlFor="subject"
className="block text-sm font-medium text-stone-600 mb-2"
>
Subject <span className="text-liquid-rose">*</span>
Subject <span className="text-red-500">*</span>
</label>
<input
type="text"
@@ -351,7 +351,7 @@ const Contact = () => {
htmlFor="message"
className="block text-sm font-medium text-stone-600 mb-2"
>
Message <span className="text-liquid-rose">*</span>
Message <span className="text-red-500">*</span>
</label>
<textarea
id="message"

16
app/components/Footer.tsx
View File

@@ -39,15 +39,15 @@ const Footer = () => {
<motion.div
whileHover={{ rotate: 360, scale: 1.1 }}
transition={{ duration: 0.5 }}
className="w-12 h-12 bg-gradient-to-br from-liquid-mint to-liquid-lavender rounded-xl flex items-center justify-center shadow-md"
className="w-12 h-12 bg-stone-100 rounded-xl flex items-center justify-center border border-stone-200 shadow-sm"
>
<Code className="w-6 h-6 text-stone-800" />
</motion.div>
<div>
<Link href="/" className="text-xl font-bold font-mono text-stone-800 hover:text-liquid-blue transition-colors">
dk<span className="text-liquid-rose">0</span>
<Link href="/" className="text-xl font-black font-sans text-stone-900 tracking-tighter transition-colors flex items-center">
dk<span className="text-red-500">0</span>
</Link>
<p className="text-xs text-stone-500">Software Engineer</p>
<p className="text-[10px] font-bold text-stone-400 uppercase tracking-widest">Software Engineer</p>
</div>
</motion.div>
@@ -67,7 +67,7 @@ const Footer = () => {
rel="noopener noreferrer"
whileHover={{ scale: 1.15, y: -3 }}
whileTap={{ scale: 0.95 }}
className="p-3 bg-stone-50 hover:bg-white rounded-xl text-stone-600 hover:text-stone-900 transition-all duration-200 border border-stone-200 hover:border-stone-300 shadow-sm"
className="p-3 bg-white hover:bg-stone-50 rounded-xl text-stone-600 hover:text-stone-900 transition-all duration-200 border border-stone-200 hover:border-stone-300 shadow-sm"
aria-label={social.label}
>
<social.icon size={18} />
@@ -83,14 +83,14 @@ const Footer = () => {
transition={{ duration: 0.4, delay: 0.1 }}
className="flex items-center space-x-2 text-stone-400 text-sm"
>
<span>© {currentYear}</span>
<span className="font-medium">© {currentYear}</span>
<motion.div
animate={{ scale: [1, 1.2, 1] }}
transition={{ duration: 1.5, repeat: Infinity }}
>
<Heart size={14} className="text-liquid-rose fill-liquid-rose" />
<Heart size={14} className="text-red-500 fill-red-500" />
</motion.div>
<span>Made in Germany</span>
<span className="font-medium text-stone-500">Made in Germany</span>
</motion.div>
</div>

14
app/components/Hero.tsx
View File

@@ -12,7 +12,7 @@ const Hero = () => {
];
return (
<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">
<section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-32 pb-16 bg-gradient-to-br from-liquid-peach/10 via-amber-50/10 to-stone-100/10">
<div className="relative z-10 text-center px-4 max-w-5xl mx-auto">
{/* Profile Image with Organic Blob Mask */}
<motion.div
@@ -24,7 +24,7 @@ const Hero = () => {
<div className="relative w-64 h-64 md:w-80 md:h-80 flex items-center justify-center">
{/* Large Rotating Liquid Blobs behind image - Very slow and smooth */}
<motion.div
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"
className="absolute w-[150%] h-[150%] bg-gradient-to-tr from-stone-200/40 via-amber-100/30 to-peach-100/40 blur-3xl -z-10"
animate={{
borderRadius: [
"60% 40% 30% 70%/60% 30% 70% 40%",
@@ -42,7 +42,7 @@ const Hero = () => {
}}
/>
<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"
className="absolute w-[130%] h-[130%] bg-gradient-to-bl from-red-100/35 via-orange-100/25 to-stone-200/35 blur-2xl -z-10"
animate={{
borderRadius: [
"40% 60% 70% 30%/40% 50% 60% 50%",
@@ -137,7 +137,7 @@ const Hero = () => {
transition={{ duration: 0.6, delay: 0.2, 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">
<h1 className="text-5xl md:text-8xl font-black 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">
@@ -153,15 +153,15 @@ const Hero = () => {
className="text-lg md:text-xl text-stone-700 mb-12 max-w-2xl mx-auto leading-relaxed"
>
Student and passionate{" "}
<span className="text-stone-900 font-semibold decoration-liquid-mint decoration-2 underline underline-offset-4">
<span className="text-stone-900 font-semibold decoration-stone-300 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">
<span className="text-stone-900 font-semibold decoration-stone-300 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">
<span className="text-stone-900 font-semibold decoration-red-400 decoration-2 underline underline-offset-4">
DevOps
</span>
.

80
app/components/Projects.tsx
View File

@@ -98,14 +98,15 @@ const Projects = () => {
<motion.div
key={project.id}
variants={fadeInUp}
whileHover={{
y: -8,
transition: { duration: 0.4, ease: "easeOut" },
}}
className="group relative flex flex-col bg-white/40 backdrop-blur-xl backdrop-saturate-150 rounded-2xl overflow-hidden shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500 ease-out border border-white/50 ring-1 ring-white/30"
>
<Link
href={`/projects/${project.title.toLowerCase().replace(/\s+/g, "-")}`}
className="absolute inset-0 z-0"
/>
{/* Project Cover / Image Area */}
<div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
<div className="relative aspect-[16/10] overflow-hidden bg-stone-100 pointer-events-none">
{project.imageUrl ? (
<>
<Image
@@ -141,41 +142,16 @@ const Projects = () => {
{/* Featured Badge */}
{project.featured && (
<div className="absolute top-3 left-3 z-20">
<div className="px-3 py-1 bg-red-500 text-white text-[10px] font-black uppercase tracking-widest rounded-full shadow-lg border border-red-400/50">
<div className="px-3 py-1.5 bg-white/90 backdrop-blur-md text-stone-800 text-[10px] font-bold uppercase tracking-widest rounded-full shadow-lg border border-white/50 flex items-center gap-1.5">
<span className="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse" />
Featured
</div>
</div>
)}
{/* Overlay Links */}
<div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-10">
{project.github && (
<a
href={project.github}
target="_blank"
rel="noopener noreferrer"
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
aria-label="GitHub"
>
<Github size={20} />
</a>
)}
{project.live && (
<a
href={project.live}
target="_blank"
rel="noopener noreferrer"
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
aria-label="Live Demo"
>
<ExternalLink size={20} />
</a>
)}
</div>
</div>
{/* Content */}
<div className="flex flex-col flex-1 p-6">
<div className="flex flex-col flex-1 p-6 relative z-10 pointer-events-none">
<div className="flex justify-between items-start mb-3">
<h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-700 transition-colors duration-300 tracking-tight">
{project.title}
@@ -194,7 +170,7 @@ const Projects = () => {
{project.tags.slice(0, 3).map((tag, tIdx) => (
<span
key={`${project.id}-${tag}-${tIdx}`}
className="text-xs px-2.5 py-1 bg-white/50 border border-white/60 rounded-md text-stone-700 font-medium hover:bg-white/80 hover:border-white transition-all duration-300 ease-out shadow-sm"
className="text-xs px-2.5 py-1 bg-white/50 border border-white/60 rounded-md text-stone-700 font-medium transition-all duration-300 ease-out shadow-sm"
>
{tag}
</span>
@@ -206,20 +182,46 @@ const Projects = () => {
)}
</div>
<Link
href={`/projects/${project.title.toLowerCase().replace(/\s+/g, "-")}`}
className="inline-flex items-center text-sm font-bold text-stone-800 hover:gap-3 transition-all duration-300 ease-out group/link"
>
<div className="inline-flex items-center text-sm font-bold text-stone-800 group-hover:gap-3 transition-all duration-300 ease-out group/link">
Read more{" "}
<ArrowRight
size={16}
className="ml-1 transition-transform duration-300 ease-out group-hover/link:translate-x-1"
/>
</Link>
</div>
</div>
</div>
{/* External Overlay Links - positioned above the main Link */}
<div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-20 pointer-events-none group-hover:pointer-events-auto">
{project.github && (
<a
href={project.github}
target="_blank"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
aria-label="GitHub"
>
<Github size={20} />
</a>
)}
{project.live && (
<a
href={project.live}
target="_blank"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
aria-label="Live Demo"
>
<ExternalLink size={20} />
</a>
)}
</div>
</motion.div>
))}
))}
</motion.div>
<motion.div

82
app/projects/page.tsx
View File

@@ -148,11 +148,15 @@ const ProjectsPage = () => {
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: index * 0.1 }}
whileHover={{ y: -8 }}
className="group flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500"
className="group relative flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500"
>
<Link
href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
className="absolute inset-0 z-0"
/>
{/* Image / Fallback / Cover Area */}
<div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
<div className="relative aspect-[16/10] overflow-hidden bg-stone-100 pointer-events-none">
{project.imageUrl ? (
<>
<img
@@ -184,40 +188,15 @@ const ProjectsPage = () => {
{project.featured && (
<div className="absolute top-3 left-3 z-20">
<div className="px-3 py-1 bg-red-500 text-white text-[10px] font-black uppercase tracking-widest rounded-full shadow-lg border border-red-400/50">
<div className="px-3 py-1.5 bg-white/90 backdrop-blur-md text-stone-800 text-[10px] font-bold uppercase tracking-widest rounded-full shadow-lg border border-white/50 flex items-center gap-1.5">
<span className="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse" />
Featured
</div>
</div>
)}
{/* Overlay Links */}
<div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-10">
{project.github && (
<a
href={project.github}
target="_blank"
rel="noopener noreferrer"
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
aria-label="GitHub"
>
<Github size={20} />
</a>
)}
{project.live && (
<a
href={project.live}
target="_blank"
rel="noopener noreferrer"
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
aria-label="Live Demo"
>
<ExternalLink size={20} />
</a>
)}
</div>
</div>
<div className="p-6 flex flex-col flex-1">
<div className="p-6 flex flex-col flex-1 relative z-10 pointer-events-none">
<div className="flex items-center justify-between mb-3">
<h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-600 transition-colors">
{project.title}
@@ -247,28 +226,53 @@ const ProjectsPage = () => {
</div>
<div className="mt-auto pt-4 border-t border-stone-100 flex items-center justify-between">
<div className="flex gap-3">
<div className="flex gap-3 pointer-events-auto">
{project.github && (
<a href={project.github} target="_blank" rel="noopener noreferrer" className="text-stone-400 hover:text-stone-900 transition-colors">
<a href={project.github} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} className="text-stone-400 hover:text-stone-900 transition-colors">
<Github size={18} />
</a>
)}
{project.live && (
<a href={project.live} target="_blank" rel="noopener noreferrer" className="text-stone-400 hover:text-stone-900 transition-colors">
<a href={project.live} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} className="text-stone-400 hover:text-stone-900 transition-colors">
<ExternalLink size={18} />
</a>
)}
</div>
<Link
href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
className="inline-flex items-center space-x-1 text-sm font-bold text-stone-800 hover:gap-2 transition-all"
>
<div className="inline-flex items-center space-x-1 text-sm font-bold text-stone-800 hover:gap-2 transition-all">
<span>Read More</span>
<ArrowLeft size={16} className="rotate-180" />
</Link>
</div>
</div>
</div>
{/* External Overlay Links for full width on hover if you want to keep that style */}
<div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-20 pointer-events-none group-hover:pointer-events-auto">
{project.github && (
<a
href={project.github}
target="_blank"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
aria-label="GitHub"
>
<Github size={20} />
</a>
)}
{project.live && (
<a
href={project.live}
target="_blank"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50"
aria-label="Live Demo"
>
<ExternalLink size={20} />
</a>
)}
</div>
</motion.div>
))}
</div>

2
components/BackgroundBlobs.tsx
View File

@@ -84,7 +84,7 @@ const BackgroundBlobs = () => {
{/* Rose blob - bottom left */}
<motion.div
className="absolute bottom-[-5%] left-[15%] w-[45vw] h-[45vw] bg-liquid-rose/35 rounded-full blur-[100px] mix-blend-multiply"
className="absolute bottom-[-5%] left-[15%] w-[45vw] h-[45vw] bg-amber-100/35 rounded-full blur-[100px] mix-blend-multiply"
style={{ x: x3, y: y3 }}
animate={{
scale: [1, 1.2, 1],