dschlueter
f965c82860
- Neue Komponente programmer-graphic.tsx erstellt - SVG-Grafik aus PNG vektorisiert mit potrace - alte system-diagram.tsx wird nicht mehr verwendet - Grafiken zeigen 1976-2026 Timeline mit 50 Jahre Badge
58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
'use client'
|
||
|
||
import { motion } from 'framer-motion'
|
||
import Image from 'next/image'
|
||
|
||
export function ProgrammerGraphic() {
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8 }}
|
||
className="relative w-full max-w-md mx-auto aspect-[3/5] lg:aspect-square"
|
||
>
|
||
<div className="relative w-full h-full">
|
||
<Image
|
||
src="/programmierer-vector.svg"
|
||
alt="Programmierung: Von 1976 bis heute – 50 Jahre Code"
|
||
fill
|
||
className="object-contain drop-shadow-lg dark:invert"
|
||
priority
|
||
/>
|
||
</div>
|
||
|
||
{/* Subtle decorative elements */}
|
||
<div className="absolute inset-0 pointer-events-none">
|
||
{/* 1976 Badge */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.5, duration: 0.6 }}
|
||
className="absolute top-4 left-4 font-mono text-xs text-accent bg-background/80 px-2 py-1 rounded border border-border/50"
|
||
>
|
||
1976
|
||
</motion.div>
|
||
|
||
{/* 2026 Badge */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.7, duration: 0.6 }}
|
||
className="absolute bottom-4 right-4 font-mono text-xs text-accent bg-background/80 px-2 py-1 rounded border border-border/50"
|
||
>
|
||
2026
|
||
</motion.div>
|
||
|
||
{/* 50 Years Center Badge */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ delay: 1, duration: 0.8 }}
|
||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-mono text-2xl font-bold text-accent/30"
|
||
>
|
||
50
|
||
</motion.div>
|
||
</div>
|
||
</motion.div>
|
||
)
|
||
}
|