259 lines
12 KiB
TypeScript
259 lines
12 KiB
TypeScript
'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 programmiere ich alles – 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>
|
||
)
|
||
}
|