122 lines
4.3 KiB
TypeScript
122 lines
4.3 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
|
|
const focusAreas = [
|
|
{
|
|
category: 'Sprachen',
|
|
items: [
|
|
{ name: 'Python', detail: 'Haupt-Sprache für KI und Automatisierung' },
|
|
{ name: 'Rust', detail: 'Für performante Systemtools' },
|
|
{ name: 'Shell/Bash', detail: 'Tägliches Werkzeug' },
|
|
],
|
|
},
|
|
{
|
|
category: 'Systeme',
|
|
items: [
|
|
{ name: 'Linux', detail: 'Ubuntu, Debian, Arch' },
|
|
{ name: 'Self-Hosting', detail: 'Eigene Infrastruktur' },
|
|
{ name: 'Containers', detail: 'Docker, Podman' },
|
|
],
|
|
},
|
|
{
|
|
category: 'KI & ML',
|
|
items: [
|
|
{ name: 'LLMs', detail: 'GPT, Claude, lokale Modelle' },
|
|
{ name: 'KI-Tools', detail: 'Claude, Pi, OpenCoder, Aider' },
|
|
{ name: 'ML Ops', detail: 'Training, Deployment' },
|
|
],
|
|
},
|
|
{
|
|
category: 'Interessen',
|
|
items: [
|
|
{ name: 'Automatisierung', detail: 'Workflows, Pipelines' },
|
|
{ name: 'CLI Tools', detail: 'Terminal-first' },
|
|
{ name: 'Open Source', detail: 'Nutzung & Beteiligung' },
|
|
],
|
|
},
|
|
]
|
|
|
|
export function FocusSection() {
|
|
return (
|
|
<section id="fokus" className="py-24 lg:py-32">
|
|
<div className="max-w-6xl mx-auto px-6 lg:px-8">
|
|
{/* Section Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="mb-16"
|
|
>
|
|
<span className="font-mono text-xs tracking-wider text-accent uppercase">
|
|
Aktuell
|
|
</span>
|
|
<h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl mt-4 text-balance">
|
|
Technologien & Fokus
|
|
</h2>
|
|
<p className="mt-6 text-lg text-muted-foreground max-w-2xl">
|
|
Die Werkzeuge und Themen, mit denen ich aktuell arbeite.
|
|
Kein Buzzword-Bingo, sondern tägliche Praxis.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Focus Grid */}
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-6">
|
|
{focusAreas.map((area, areaIndex) => (
|
|
<motion.div
|
|
key={area.category}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-50px' }}
|
|
transition={{ duration: 0.5, delay: areaIndex * 0.1 }}
|
|
>
|
|
<h3 className="font-mono text-sm text-accent mb-6 pb-3 border-b border-border">
|
|
{area.category}
|
|
</h3>
|
|
<ul className="space-y-4">
|
|
{area.items.map((item, itemIndex) => (
|
|
<motion.li
|
|
key={item.name}
|
|
initial={{ opacity: 0, x: -10 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.3, delay: areaIndex * 0.1 + itemIndex * 0.05 }}
|
|
className="group"
|
|
>
|
|
<span className="block font-medium text-foreground group-hover:text-accent transition-colors">
|
|
{item.name}
|
|
</span>
|
|
<span className="block text-sm text-muted-foreground mt-0.5">
|
|
{item.detail}
|
|
</span>
|
|
</motion.li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Secondary visual element */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
className="mt-20 pt-12 border-t border-border"
|
|
>
|
|
<div className="flex flex-wrap gap-3">
|
|
{['git', 'tmux', 'ssh', 'systemd', 'nginx', 'PostgreSQL', 'ansible', 'FastAPI', 'PyTorch', 'Transformers', 'tiktoken', 'TensorFlow', 'vLLM', 'JupyterLab'].map((tool) => (
|
|
<span
|
|
key={tool}
|
|
className="font-mono text-xs px-3 py-1.5 border border-border rounded text-muted-foreground hover:text-foreground hover:border-accent/50 transition-colors cursor-default"
|
|
>
|
|
{tool}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|