246 lines
9.7 KiB
TypeScript
246 lines
9.7 KiB
TypeScript
"use client";
|
|
|
|
import { motion, Variants } from "framer-motion";
|
|
import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
import type { JSONContent } from "@tiptap/react";
|
|
import RichTextClient from "./RichTextClient";
|
|
|
|
const staggerContainer: Variants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.15,
|
|
delayChildren: 0.2,
|
|
},
|
|
},
|
|
};
|
|
|
|
const fadeInUp: Variants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.5,
|
|
ease: [0.25, 0.1, 0.25, 1],
|
|
},
|
|
},
|
|
};
|
|
|
|
const About = () => {
|
|
const locale = useLocale();
|
|
const t = useTranslations("home.about");
|
|
const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
const res = await fetch(
|
|
`/api/content/page?key=${encodeURIComponent("home-about")}&locale=${encodeURIComponent(locale)}`,
|
|
);
|
|
const data = await res.json();
|
|
if (data?.content?.content) {
|
|
setCmsDoc(data.content.content as JSONContent);
|
|
}
|
|
} catch {
|
|
// ignore; fallback to static
|
|
}
|
|
})();
|
|
}, [locale]);
|
|
|
|
const techStack = [
|
|
{
|
|
category: "Frontend & Mobile",
|
|
icon: Globe,
|
|
items: ["Next.js", "Tailwind CSS", "Flutter"],
|
|
},
|
|
{
|
|
category: "Backend & DevOps",
|
|
icon: Server,
|
|
items: ["Docker Swarm", "Traefik", "Nginx Proxy Manager", "Redis"],
|
|
},
|
|
{
|
|
category: "Tools & Automation",
|
|
icon: Wrench,
|
|
items: ["Git", "CI/CD", "n8n", "Self-hosted Services"],
|
|
},
|
|
{
|
|
category: "Security & Admin",
|
|
icon: Shield,
|
|
items: ["CrowdSec", "Suricata", "Mailcow"],
|
|
},
|
|
];
|
|
|
|
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" },
|
|
];
|
|
|
|
return (
|
|
<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-start">
|
|
{/* Text Content */}
|
|
<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"
|
|
>
|
|
{t("title")}
|
|
</motion.h2>
|
|
<motion.div
|
|
variants={fadeInUp}
|
|
className="prose prose-stone prose-lg text-stone-700 space-y-4"
|
|
>
|
|
{cmsDoc ? (
|
|
<RichTextClient doc={cmsDoc} className="prose prose-stone max-w-none" />
|
|
) : (
|
|
<>
|
|
<p>{t("p1")}</p>
|
|
<p>{t("p2")}</p>
|
|
<p>{t("p3")}</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">
|
|
{t("funFactTitle")}
|
|
</p>
|
|
<p className="text-sm text-stone-700 leading-relaxed">
|
|
{t("funFactBody")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* 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"
|
|
>
|
|
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"
|
|
: 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" />
|
|
<span className="text-stone-700 font-medium">
|
|
{hobby.text}
|
|
</span>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default About;
|