full upgrade to dev
This commit is contained in:
@@ -1,9 +1,34 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Code, Terminal, Cpu, Globe } from 'lucide-react';
|
||||
import { LiquidHeading } from '@/components/LiquidHeading';
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Globe, Server, Wrench, Shield, Gamepad2, Code } from "lucide-react";
|
||||
|
||||
// Smooth animation configuration
|
||||
const smoothTransition = {
|
||||
duration: 1,
|
||||
ease: [0.25, 0.1, 0.25, 1],
|
||||
};
|
||||
|
||||
const staggerContainer = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.15,
|
||||
delayChildren: 0.2,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const fadeInUp = {
|
||||
hidden: { opacity: 0, y: 30 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: smoothTransition,
|
||||
},
|
||||
};
|
||||
|
||||
const About = () => {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
@@ -14,81 +39,205 @@ const About = () => {
|
||||
|
||||
const techStack = [
|
||||
{
|
||||
category: 'Frontend',
|
||||
category: "Frontend & Mobile",
|
||||
icon: Globe,
|
||||
items: ['React', 'TypeScript', 'Tailwind', 'Next.js']
|
||||
items: ["Next.js", "Tailwind CSS", "Flutter"],
|
||||
},
|
||||
{
|
||||
category: 'Backend',
|
||||
icon: Terminal,
|
||||
items: ['Node.js', 'PostgreSQL', 'Prisma', 'API Design']
|
||||
category: "Backend & DevOps",
|
||||
icon: Server,
|
||||
items: ["Docker Swarm", "Traefik", "Nginx Proxy Manager", "Redis"],
|
||||
},
|
||||
{
|
||||
category: 'Tools',
|
||||
icon: Cpu,
|
||||
items: ['Git', 'Docker', 'VS Code', 'Figma']
|
||||
}
|
||||
category: "Tools & Automation",
|
||||
icon: Wrench,
|
||||
items: ["Git", "CI/CD", "n8n", "Self-hosted Services"],
|
||||
},
|
||||
{
|
||||
category: "Security & Admin",
|
||||
icon: Shield,
|
||||
items: ["CrowdSec", "Suricata", "Mailcow"],
|
||||
},
|
||||
];
|
||||
|
||||
const hobbies = [
|
||||
{ icon: Code, text: "Self-Hosting & DevOps" },
|
||||
{ icon: Gamepad2, text: "Gaming" },
|
||||
{ icon: Server, text: "Setting up Game Servers" },
|
||||
];
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<section id="about" className="py-24 px-4 bg-white relative overflow-hidden">
|
||||
<section
|
||||
id="about"
|
||||
className="py-24 px-4 bg-gradient-to-br from-liquid-sky/15 via-liquid-lavender/10 to-liquid-pink/15 relative overflow-hidden"
|
||||
>
|
||||
<div className="max-w-6xl mx-auto relative z-10">
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
|
||||
{/* Text Content */}
|
||||
<div className="space-y-8">
|
||||
<LiquidHeading
|
||||
text="About Me"
|
||||
level={2}
|
||||
className="text-4xl md:text-5xl font-bold text-stone-900"
|
||||
/>
|
||||
<div className="prose prose-stone prose-lg text-stone-600">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
variants={staggerContainer}
|
||||
className="space-y-8"
|
||||
>
|
||||
<motion.h2
|
||||
variants={fadeInUp}
|
||||
className="text-4xl md:text-5xl font-bold text-stone-900"
|
||||
>
|
||||
About Me
|
||||
</motion.h2>
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
className="prose prose-stone prose-lg text-stone-700 space-y-4"
|
||||
>
|
||||
<p>
|
||||
Hi, I'm Dennis. I'm a software engineer who likes building things that work well and look good.
|
||||
Hi, I'm Dennis – a student and passionate self-hoster based
|
||||
in Osnabrück, Germany.
|
||||
</p>
|
||||
<p>
|
||||
I'm currently based in Osnabrück, Germany. My journey in tech is driven by curiosity—I love figuring out how things work and how to make them better.
|
||||
I love building full-stack web applications with{" "}
|
||||
<strong>Next.js</strong> and mobile apps with{" "}
|
||||
<strong>Flutter</strong>. But what really excites me is{" "}
|
||||
<strong>DevOps</strong>: I run my own infrastructure on{" "}
|
||||
<strong>IONOS</strong> and <strong>OVHcloud</strong>, managing
|
||||
everything with <strong>Docker Swarm</strong>,{" "}
|
||||
<strong>Traefik</strong>, and automated CI/CD pipelines with my
|
||||
own runners.
|
||||
</p>
|
||||
<p>
|
||||
When I'm not in front of a screen, you can find me listening to music, exploring new ideas, or just relaxing.
|
||||
When I'm not coding or tinkering with servers, you'll
|
||||
find me <strong>gaming</strong>, <strong>jogging</strong>, or
|
||||
experimenting with new tech like game servers or automation
|
||||
workflows with <strong>n8n</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm italic text-stone-500 bg-stone-50 p-4 rounded-lg border-l-4 border-liquid-mint">
|
||||
💡 Fun fact: Even though I automate a lot, I still use pen and
|
||||
paper for my calendar and notes – it helps me clear my head and
|
||||
stay focused.
|
||||
</p>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Simplified Skills / Tech Stack */}
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
<h3 className="text-xl font-bold text-stone-900 mb-2">My Toolbox</h3>
|
||||
{techStack.map((stack, idx) => (
|
||||
<motion.div
|
||||
key={stack.category}
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: idx * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="p-6 rounded-xl bg-stone-50 border border-stone-100 hover:border-stone-200 transition-colors"
|
||||
{/* Tech Stack & Hobbies */}
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
variants={staggerContainer}
|
||||
className="space-y-8"
|
||||
>
|
||||
<div>
|
||||
<motion.h3
|
||||
variants={fadeInUp}
|
||||
className="text-2xl font-bold text-stone-900 mb-6"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-2 bg-white rounded-lg shadow-sm text-stone-700">
|
||||
<stack.icon size={20} />
|
||||
</div>
|
||||
<h4 className="font-semibold text-stone-800">{stack.category}</h4>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{stack.items.map(item => (
|
||||
<span key={item} className="px-3 py-1 bg-white rounded-md border border-stone-200 text-sm text-stone-600">
|
||||
{item}
|
||||
My Tech Stack
|
||||
</motion.h3>
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{techStack.map((stack, idx) => (
|
||||
<motion.div
|
||||
key={`${stack.category}-${idx}`}
|
||||
variants={fadeInUp}
|
||||
whileHover={{
|
||||
scale: 1.02,
|
||||
transition: { duration: 0.4, ease: "easeOut" },
|
||||
}}
|
||||
className={`p-5 rounded-xl border-2 transition-all duration-500 ease-out ${
|
||||
idx === 0
|
||||
? "bg-gradient-to-br from-liquid-sky/10 to-liquid-mint/10 border-liquid-sky/30 hover:border-liquid-sky/50 hover:from-liquid-sky/15 hover:to-liquid-mint/15"
|
||||
: idx === 1
|
||||
? "bg-gradient-to-br from-liquid-peach/10 to-liquid-coral/10 border-liquid-peach/30 hover:border-liquid-peach/50 hover:from-liquid-peach/15 hover:to-liquid-coral/15"
|
||||
: idx === 2
|
||||
? "bg-gradient-to-br from-liquid-lavender/10 to-liquid-pink/10 border-liquid-lavender/30 hover:border-liquid-lavender/50 hover:from-liquid-lavender/15 hover:to-liquid-pink/15"
|
||||
: "bg-gradient-to-br from-liquid-teal/10 to-liquid-lime/10 border-liquid-teal/30 hover:border-liquid-teal/50 hover:from-liquid-teal/15 hover:to-liquid-lime/15"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="p-2 bg-white rounded-lg shadow-sm text-stone-700">
|
||||
<stack.icon size={18} />
|
||||
</div>
|
||||
<h4 className="font-semibold text-stone-800">
|
||||
{stack.category}
|
||||
</h4>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{stack.items.map((item, itemIdx) => (
|
||||
<span
|
||||
key={`${stack.category}-${item}-${itemIdx}`}
|
||||
className={`px-3 py-1.5 rounded-lg border-2 text-sm text-stone-700 font-medium transition-all duration-400 ease-out ${
|
||||
itemIdx % 4 === 0
|
||||
? "bg-liquid-mint/10 border-liquid-mint/30 hover:bg-liquid-mint/20 hover:border-liquid-mint/50"
|
||||
: 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-liquid-sky/10 border-liquid-sky/30 hover:bg-liquid-sky/20 hover:border-liquid-sky/50"
|
||||
}`}
|
||||
>
|
||||
{item}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hobbies */}
|
||||
<div>
|
||||
<motion.h3
|
||||
variants={fadeInUp}
|
||||
className="text-xl font-bold text-stone-900 mb-4"
|
||||
>
|
||||
When I'm Not Coding
|
||||
</motion.h3>
|
||||
<div className="space-y-3">
|
||||
{hobbies.map((hobby, idx) => (
|
||||
<motion.div
|
||||
key={`hobby-${hobby.text}-${idx}`}
|
||||
variants={fadeInUp}
|
||||
whileHover={{
|
||||
x: 8,
|
||||
scale: 1.02,
|
||||
transition: { duration: 0.4, ease: "easeOut" },
|
||||
}}
|
||||
className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-all duration-500 ease-out ${
|
||||
idx === 0
|
||||
? "bg-gradient-to-r from-liquid-mint/10 to-liquid-sky/10 border-liquid-mint/30 hover:border-liquid-mint/50 hover:from-liquid-mint/15 hover:to-liquid-sky/15"
|
||||
: idx === 1
|
||||
? "bg-gradient-to-r from-liquid-coral/10 to-liquid-peach/10 border-liquid-coral/30 hover:border-liquid-coral/50 hover:from-liquid-coral/15 hover:to-liquid-peach/15"
|
||||
: "bg-gradient-to-r from-liquid-lavender/10 to-liquid-pink/10 border-liquid-lavender/30 hover:border-liquid-lavender/50 hover:from-liquid-lavender/15 hover:to-liquid-pink/15"
|
||||
}`}
|
||||
>
|
||||
<hobby.icon size={20} className="text-stone-600" />
|
||||
<span className="text-stone-700 font-medium">
|
||||
{hobby.text}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
whileHover={{
|
||||
x: 8,
|
||||
scale: 1.02,
|
||||
transition: { duration: 0.4, ease: "easeOut" },
|
||||
}}
|
||||
className="p-4 rounded-xl bg-gradient-to-r from-liquid-lime/15 to-liquid-teal/15 border-2 border-liquid-lime/40 hover:border-liquid-lime/60 hover:from-liquid-lime/20 hover:to-liquid-teal/20 transition-all duration-500 ease-out"
|
||||
>
|
||||
<p className="text-sm text-stone-600">
|
||||
🏃 Jogging to clear my mind and stay active
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
export default About;
|
||||
|
||||
Reference in New Issue
Block a user