Feature: Hologramm-Illustrationen zur Timeline

Acht SVG-Szenen im Stil des Hero-Bilds (dunkler Raum, Neon-Deckenlicht,
Projektor mit Lichtkegel, schwebende Glas-Panels), jeweils gegenüber dem
zugehörigen Timeline-Text; auf Mobilgeräten unter dem Text.
Animationen in globals.css, respektieren prefers-reduced-motion.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

components/about-section.tsx

@@ -1,55 +1,64 @@
 'use client'
 
 import { motion } from 'framer-motion'
+import { TimelineHolo, type TimelineArtId } from './timeline-holo'
 
-const timeline = [
+const timeline: { era: string; title: string; description: string; tech: string[]; art: TimelineArtId }[] = [
   {
     era: '1976',
     title: 'Der Anfang',
     description: 'Erste Programme in Fortran IV. Lochkarten, Großrechner, Batch-Verarbeitung. Erste Programmierkurse im Rahmen des VWL-Studiums. Die Grundlagen des algorithmischen Denkens.',
     tech: ['Fortran IV'],
+    art: 'lochkarte',
   },
   {
     era: '1984',
     title: 'Der erste PC',
     description: 'Erste Programme in Basic, C und Pascal auf dem Personal Computer unter DOS. Datenbanken, Textverarbeitung, Spiele.',
     tech: ['Lotus 1-2-3', 'dBASE', 'QBasic', 'Turbo Pascal', 'Norton Commander', 'WordPerfect'],
+    art: 'pc',
   },
   {
     era: '1986',
     title: 'Systemnahe Programmierung',
     description: 'C und 68000-Assembler auf dem Atari ST. Direkte Hardware-Ansteuerung, Interrupt-Routinen, Speicherverwaltung von Hand. Pseudo-Multitasking. DFÜ mit Akustikkoppler. Maiboxen, FidoNet, MausNet.',
     tech: ['C', '68000 ASM', 'GFA Basic', 'TOS'],
+    art: 'atari',
   },
   {
     era: '1990',
     title: 'Unix an der Universität',
     description: 'AIX, HP-UX, BSD. Die Philosophie kleiner, zusammenarbeitender Programme. Shell-Scripting als Werkzeug. Internet. Sysop-Aufgaben im Uni-Rechenzentrum.',
     tech: ['Unix', 'Shell', 'vi', 'Gopher'],
+    art: 'unix',
   },
   {
     era: '1992',
     title: 'Linux entdeckt',
     description: 'Slackware auf 40 Disketten, Debian, SUSE Linux ... Der Beginn einer dauerhaften Begeisterung für offene Systeme und Selbstbestimmung. C, C++, Pascal, Modula, Perl, Shell-Skript. Internet per Modem. Pentesting, Hacking.',
     tech: ['Linux', 'GNU Tools', 'X11'],
+    art: 'linux',
   },
   {
     era: '1995 ff.',
     title: 'World Wide Web',
     description: 'Permanenter privater Internet-Zugang kommerzieller Anbieter und erste eigene Domain: linix.de. World Wide Web. Eigene Webseiten in HTML und JavaScript programmiert.',
     tech: ['WWW', 'Netscape', 'HTML', 'Java', 'JavaScript', 'Modem'],
+    art: 'www',
   },
   {
     era: '2000er',
     title: 'Professionelle Entwicklung',
     description: 'Verschiedene Sprachen, verschiedene Domänen. Server-Administration, Automatisierung, Web-Entwicklung. Systemadministration, Networking. — Alles unter Linux.',
     tech: ['Perl', 'PHP', 'Bash', 'Python', 'Go', 'Proxmox', 'Docker/Podman'],
+    art: 'server',
   },
   {
     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'],
+    art: 'ki',
   },
 ]
 
@@ -227,7 +236,7 @@ export function AboutSection() {
                 </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={`pl-8 sm:pl-12 lg:pl-0 ${index % 2 === 0 ? 'lg:pr-16 lg:text-right' : 'lg:col-start-2 lg:row-start-1 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>
@@ -247,8 +256,10 @@ export function AboutSection() {
                   </div>
                 </div>
 
-                {/* Spacer for alternating layout */}
-                {index % 2 !== 0 && <div className="hidden lg:block" />}
+                {/* Illustration on the opposite side */}
+                <div className={`pl-8 sm:pl-12 lg:pl-0 ${index % 2 === 0 ? 'lg:pl-16' : 'lg:col-start-1 lg:row-start-1 lg:pr-16'}`}>
+                  <TimelineHolo id={item.art} className={`max-w-md ${index % 2 === 0 ? '' : 'lg:ml-auto'}`} />
+                </div>
               </motion.div>
             ))}
           </div>