Initial import: was v0 exportiert hat

components/about-section.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+import { motion } from 'framer-motion'
+
+const timeline = [
+  {
+    era: '1984',
+    title: 'Der Anfang',
+    description: 'Erste Programme in Fortran IV. Lochkarten, Großrechner, Batch-Verarbeitung. Die Grundlagen des algorithmischen Denkens.',
+    tech: ['Fortran IV'],
+  },
+  {
+    era: '1986',
+    title: 'Systemnahe Programmierung',
+    description: 'C und 68000-Assembler auf dem Atari ST. Direkte Hardware-Ansteuerung, Interrupt-Routinen, Speicherverwaltung von Hand.',
+    tech: ['C', '68000 ASM', 'GFA Basic'],
+  },
+  {
+    era: '1990',
+    title: 'Unix an der Universität',
+    description: 'SunOS, HP-UX, BSD. Die Philosophie kleiner, zusammenarbeitender Programme. Shell-Scripting als Werkzeug.',
+    tech: ['Unix', 'Shell', 'vi'],
+  },
+  {
+    era: '1994',
+    title: 'Linux entdeckt',
+    description: 'Slackware auf 40 Disketten. Der Beginn einer dauerhaften Begeisterung für offene Systeme und Selbstbestimmung.',
+    tech: ['Linux', 'GNU Tools', 'X11'],
+  },
+  {
+    era: '2000er',
+    title: 'Professionelle Entwicklung',
+    description: 'Verschiedene Sprachen, verschiedene Domänen. Server-Administration, Automatisierung, Web-Entwicklung.',
+    tech: ['Perl', 'PHP', 'Bash', 'Python'],
+  },
+  {
+    era: '2022',
+    title: 'KI-Fokus',
+    description: 'Seit Ende 2022 intensive Beschäftigung mit KI-Tools und KI-Programmierung. LLMs als Arbeitswerkzeug und Forschungsgegenstand.',
+    tech: ['Python', 'Rust', 'LLMs', 'ML'],
+  },
+]
+
+export function AboutSection() {
+  return (
+    <section id="ueber" 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 lg:mb-24"
+        >
+          <span className="font-mono text-xs tracking-wider text-accent uppercase">
+            Hintergrund
+          </span>
+          <h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl mt-4 text-balance">
+            Vier Jahrzehnte Programmierung
+          </h2>
+          <p className="mt-6 text-lg text-muted-foreground max-w-2xl">
+            Eine Reise durch die Evolution der Software-Entwicklung – 
+            von Lochkarten bis zu Large Language Models.
+          </p>
+        </motion.div>
+
+        {/* Timeline */}
+        <div className="relative">
+          {/* Vertical line */}
+          <div className="absolute left-0 lg:left-1/2 top-0 bottom-0 w-px bg-border lg:-translate-x-px hidden sm:block" />
+
+          <div className="space-y-12 lg:space-y-16">
+            {timeline.map((item, index) => (
+              <motion.div
+                key={item.era}
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, margin: '-50px' }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className={`relative grid lg:grid-cols-2 gap-8 lg:gap-16 ${
+                  index % 2 === 0 ? '' : 'lg:direction-rtl'
+                }`}
+              >
+                {/* Timeline dot */}
+                <div className="absolute left-0 lg:left-1/2 top-0 -translate-x-1/2 hidden sm:block">
+                  <div className="size-3 rounded-full bg-background border-2 border-accent" />
+                </div>
+
+                {/* Content */}
+                <div className={`pl-8 sm:pl-12 lg:pl-0 ${index % 2 === 0 ? 'lg:pr-16 lg:text-right' : 'lg:col-start-2 lg:pl-16'}`}>
+                  <div className={`lg:direction-ltr ${index % 2 === 0 ? 'lg:ml-auto lg:max-w-md' : 'lg:max-w-md'}`}>
+                    <span className="font-mono text-sm text-accent">{item.era}</span>
+                    <h3 className="font-serif text-xl lg:text-2xl mt-2">{item.title}</h3>
+                    <p className="mt-3 text-muted-foreground leading-relaxed">
+                      {item.description}
+                    </p>
+                    <div className={`mt-4 flex flex-wrap gap-2 ${index % 2 === 0 ? 'lg:justify-end' : ''}`}>
+                      {item.tech.map((tech) => (
+                        <span
+                          key={tech}
+                          className="font-mono text-xs px-2 py-1 bg-secondary text-secondary-foreground rounded"
+                        >
+                          {tech}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Spacer for alternating layout */}
+                {index % 2 !== 0 && <div className="hidden lg:block" />}
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}