120 lines
4.7 KiB
TypeScript
120 lines
4.7 KiB
TypeScript
'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>
|
||
)
|
||
}
|