dschlueter/jamulix-homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Hero: Neue Programmer-Grafik hinzugefügt (vektorisiert aus Programmierer.png)

Browse source 
- 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
This commit is contained in:
Dieter Schlüter 2026-04-25 00:24:01 +02:00
commit f965c82860
4 changed files with 4929 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/hero.tsx
View file

@ -4,7 +4,7 @@ import Link from 'next/link'
import { motion } from 'framer-motion'
import { ArrowDown, ArrowRight } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { SystemDiagram } from './system-diagram'
import { ProgrammerGraphic } from './programmer-graphic'
export function Hero() {
return (
@ -74,14 +74,14 @@ export function Hero() {
</motion.div>
</div>
{/* System Diagram */}
{/* Programmer Graphic */}
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8, delay: 0.3 }}
className="lg:col-span-5 hidden lg:block"
>
<SystemDiagram />
<ProgrammerGraphic />
</motion.div>
</div>

58
components/programmer-graphic.tsx Normal file
View file

@ -0,0 +1,58 @@
'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>
)
}