jamulix-homepage/components/about-section.tsx

'use client'

import { motion } from 'framer-motion'

const timeline = [
  {
    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'],
  },
  {
    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'],
  },
  {
    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'],
  },
  {
    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'],
  },
  {
    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'],
  },
  {
    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'],
  },
  {
    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'],
  },
  {
    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">
            Fünf 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, Vibe-Coding und agentischen KI‑Systemen.
          </p>
        </motion.div>

        {/* Motivation Section */}
        <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">
            Motivation
          </span>
          <h3 className="font-serif text-2xl sm:text-3xl lg:text-4xl mt-4 text-balance">
            Faulheit hat mich zum Programmierer gemacht
          </h3>
          
          <div className="mt-8 space-y-6 text-muted-foreground leading-relaxed max-w-3xl">
            <p>
              Ich war schon immer faul – und habe versucht, das mit Intelligenz zu kompensieren. 
              Eigentlich hätte ich schon im Mathematik-Leistungskurs und später an der Universität 
              gern große, anspruchsvolle Aufgaben gelöst. Aber ich war zu bequem dafür. 
              Erst im VWL-Studium musste ich programmieren lernen – und genau das wurde zum Wendepunkt.
            </p>
            
            <p>
              Mich hat sofort fasziniert, was man damit alles automatisieren kann. 
              Was der Rechenknecht erledigt, muss ich mir nicht mehr mühsam selbst abringen. 
              Das wurde meine dauerhafte Motivation, immer mehr Programmiersprachen zu lernen und mich mit Rechnern zu beschäftigen. 
              Mit Systemen, bei denen man nichts Nachhaltiges lernen kann, habe ich mich nie lange aufgehalten. 
              Deshalb kenne ich mich mit Windows bis heute nur oberflächlich aus.
            </p>
            
            <p>
              Software künstlich zu verkomplizieren und dann zu verkaufen, hat für mich wenig Wert. 
              Umso größer ist meine Begeisterung für Open Source. Dort lernt man wirklich etwas, das bleibt – 
              ohne dass sich alles alle paar Jahre nur deshalb ändert, damit neue Schulungen verkauft werden können.
            </p>
            
            <div className="mt-8 pt-8 border-t border-border">
              <p className="font-serif text-lg italic text-foreground">
                Und so gilt für mich das erste Jamulix-Gesetz:
              </p>
              <p className="font-mono text-xl lg:text-2xl text-accent mt-3">
                Je schlauer, umso Linux!
              </p>
            </div>

            <p>
              Heute kann ich alles programmieren – vom Mikrocontroller in Kaffeemaschinen, Waschmaschinen oder Autos 
              bis hin zu Systemen im Hochleistungsrechenzentrum. Und dann kam die Rente. 
              Ich hatte vor, mich endlich einem lange geplanten Projekt zu widmen: 
              computergestütztes Trading an Online-Börsen. Dafür hatte ich während der Corona-Zeit Python gelernt.
            </p>

            <p>
              Python wirkt auf den ersten Blick langsam, aber die entscheidenden Teile laufen in C oder C++ 
              und sind entsprechend schnell. Doch Ende 2022 kam der KI-Hype dazwischen. 
              Plötzlich waren leistungsfähige Tools für alle verfügbar – zu erschwinglichen Preisen.
            </p>

            <p>
              Der Begriff „künstliche Intelligenz“ ist dabei eher Marketing. 
              Die Systeme verstehen nichts im menschlichen Sinne. 
              Dahinter steckt Mathematik: lineare Algebra, Statistik, Wahrscheinlichkeiten, Markov-Ketten. 
              Nicht geheimnisvoll – aber extrem nützlich und endlich breit zugänglich.
            </p>

            <p>
              Nach kurzer Zeit war mir klar: Diese Technologie wird unser Leben grundlegend verändern – 
              vergleichbar mit der Dampfmaschine oder der Elektrifizierung. 
              Also habe ich entschieden, mich intensiv damit zu beschäftigen. 
              Seitdem arbeite ich fast ausschließlich mit diesen mathematischen Werkzeugen.
            </p>

            <p>
              Wer sich dem verweigert, macht es sich unnötig schwer. 
              Die Entwicklung lässt sich nicht aufhalten. 
              Sinnvoller ist es, zu lernen, wie man diese Werkzeuge sinnvoll einsetzt – 
              und auch zu verstehen, welche Risiken sie mit sich bringen.
            </p>

            <p>
              Wer sie ignoriert, wird es schwer haben. 
              Wer sie beherrscht, wird gebraucht – weil er effizienter arbeitet und Kosten spart.
            </p>
            
            <div className="mt-8 pt-8 border-t border-border">
              <p className="font-serif text-lg italic text-foreground">
                Und so gilt für mich das zweite Jamulix-Gesetz:
              </p>
              <p className="font-mono text-xl lg:text-2xl text-accent mt-3">
                Wer "KI" beherrscht, darf weiter arbeiten.
              </p>
            </div>

            <p>
              Ich muss zwar nicht mehr arbeiten. Trotzdem halte ich es für wichtig, weiter zu lernen. 
              Das hält den Kopf fit. Und ehrlich gesagt: Wenn ich einen Tag nichts Neues gelernt habe, 
              fehlt mir etwas. Neugier war schon immer mein Antrieb.
            </p>
            
            <p>
              Ich verstehe übrigens längst nicht jedes Detail des maschinellen Lernens. 
              Aber das ist nicht entscheidend. Zuerst kommt die Anwendung, die Theorie kann folgen. 
              Man kann diese Werkzeuge sinnvoll nutzen, auch ohne jedes mathematische Detail zu durchdringen.
            </p>

            <p>
              Im Grunde ist es wie beim Autofahren: Man muss keinen Motor bauen können, um ein Auto zu benutzen. 
              Wichtig ist, dass man weiß, wie man damit ans Ziel kommt.
            </p>
            
            <div className="mt-8 pt-8 border-t border-border">
              <p className="font-serif text-lg italic text-foreground">
                Und so kommen wir zum dritten Jamulix-Gesetz:
              </p>
              <p className="font-mono text-xl lg:text-2xl text-accent mt-3">
                Man kann ruhig blöd sein, man muss sich nur zu helfen wissen.
              </p>
            </div>
            
            <p>
              Happy Coding!
            </p>

          </div>
        </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>
  )
}