Initial import: was v0 exportiert hat

components/focus-section.tsx

@@ -0,0 +1,122 @@
+'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: 'Arch, Debian, NixOS' },
+      { 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: 'Cursor, Copilot, 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">
+            {['vim', 'git', 'tmux', 'ssh', 'systemd', 'nginx', 'PostgreSQL', 'Redis', 'FastAPI', 'PyTorch', 'Transformers', 'tiktoken'].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>
+  )
+}