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

full upgrade

Browse Source
This commit is contained in:
denshooter
2026-01-07 23:13:25 +01:00
parent 4cd3f60c98
commit c5efd28383
23 changed files with 693 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
app/components/About.tsx
View File

@@ -2,7 +2,7 @@
import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { Globe, Server, Wrench, Shield, Gamepad2, Code } from "lucide-react";
import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb } from "lucide-react";
// Smooth animation configuration
const smoothTransition = {
@@ -60,10 +60,11 @@ const About = () => {
},
];
const hobbies = [
const hobbies: Array<{ icon: typeof Code; text: string }> = [
{ icon: Code, text: "Self-Hosting & DevOps" },
{ icon: Gamepad2, text: "Gaming" },
{ icon: Server, text: "Setting up Game Servers" },
{ icon: Activity, text: "Jogging to clear my mind and stay active" },
];
if (!mounted) return null;
@@ -113,11 +114,24 @@ const About = () => {
experimenting with new tech like game servers or automation
workflows with <strong>n8n</strong>.
</p>
<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
variants={fadeInUp}
className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-lavender/15 border-2 border-liquid-mint/30 rounded-xl p-5 backdrop-blur-sm"
>
<div className="flex items-start gap-3">
<Lightbulb size={20} className="text-stone-600 flex-shrink-0 mt-0.5" />
<div>
<p className="text-sm font-semibold text-stone-800 mb-1">
Fun Fact
</p>
<p className="text-sm text-stone-700 leading-relaxed">
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>
</div>
</div>
</motion.div>
</motion.div>
</motion.div>
@@ -209,7 +223,9 @@ const About = () => {
? "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"
: idx === 2
? "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"
: "bg-gradient-to-r from-liquid-lime/10 to-liquid-teal/10 border-liquid-lime/30 hover:border-liquid-lime/50 hover:from-liquid-lime/15 hover:to-liquid-teal/15"
}`}
>
<hobby.icon size={20} className="text-stone-600" />
@@ -218,19 +234,6 @@ const About = () => {
</span>
</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>