108 lines
4.2 KiB
TypeScript
108 lines
4.2 KiB
TypeScript
|
'use client'
|
|||
|
|
|
|||
|
|
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'
|
|||
|
|
|
|||
|
|
export function Hero() {
|
|||
|
|
return (
|
|||
|
|
<section className="relative min-h-screen flex items-center pt-20 lg:pt-0">
|
|||
|
|
{/* Subtle grid background */}
|
|||
|
|
<div className="absolute inset-0 overflow-hidden">
|
|||
|
|
<div
|
|||
|
|
className="absolute inset-0 opacity-[0.02] dark:opacity-[0.04]"
|
|||
|
|
style={{
|
|||
|
|
backgroundImage: `
|
|||
|
|
linear-gradient(to right, currentColor 1px, transparent 1px),
|
|||
|
|
linear-gradient(to bottom, currentColor 1px, transparent 1px)
|
|||
|
|
`,
|
|||
|
|
backgroundSize: '60px 60px',
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="relative max-w-6xl mx-auto px-6 lg:px-8 py-20 lg:py-32">
|
|||
|
|
<div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
|
|||
|
|
{/* Text Content */}
|
|||
|
|
<div className="lg:col-span-7 space-y-8">
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0, y: 20 }}
|
|||
|
|
animate={{ opacity: 1, y: 0 }}
|
|||
|
|
transition={{ duration: 0.6 }}
|
|||
|
|
>
|
|||
|
|
<span className="inline-block font-mono text-xs tracking-wider text-accent uppercase mb-6">
|
|||
|
|
1984 – heute
|
|||
|
|
</span>
|
|||
|
|
|
|||
|
|
<h1 className="font-serif text-4xl sm:text-5xl lg:text-6xl xl:text-7xl leading-[1.1] tracking-tight text-balance">
|
|||
|
|
Seit 40 Jahren Code. Von Fortran{'\u00A0'}IV bis KI-Projekte in Python und Rust.
|
|||
|
|
</h1>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
<motion.p
|
|||
|
|
initial={{ opacity: 0, y: 20 }}
|
|||
|
|
animate={{ opacity: 1, y: 0 }}
|
|||
|
|
transition={{ duration: 0.6, delay: 0.1 }}
|
|||
|
|
className="text-lg lg:text-xl text-muted-foreground leading-relaxed max-w-2xl"
|
|||
|
|
>
|
|||
|
|
Erste Programmiersprache: Fortran{'\u00A0'}IV. Dann C und 68000-Assembler auf dem Atari{'\u00A0'}ST.
|
|||
|
|
An der Universität Unix entdeckt – und Linux nie wieder losgelassen.
|
|||
|
|
Seit Ende 2022 konzentriert auf KI-Tools und KI-Programmierung.
|
|||
|
|
Heute: Python und Rust.
|
|||
|
|
</motion.p>
|
|||
|
|
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0, y: 20 }}
|
|||
|
|
animate={{ opacity: 1, y: 0 }}
|
|||
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|||
|
|
className="flex flex-col sm:flex-row gap-4 pt-4"
|
|||
|
|
>
|
|||
|
|
<Button asChild size="lg" className="group">
|
|||
|
|
<Link href="#projekte">
|
|||
|
|
Projekte ansehen
|
|||
|
|
<ArrowDown className="ml-2 size-4 transition-transform group-hover:translate-y-0.5" />
|
|||
|
|
</Link>
|
|||
|
|
</Button>
|
|||
|
|
<Button asChild variant="outline" size="lg" className="group">
|
|||
|
|
<Link href="#ueber">
|
|||
|
|
Über Jamulix
|
|||
|
|
<ArrowRight className="ml-2 size-4 transition-transform group-hover:translate-x-0.5" />
|
|||
|
|
</Link>
|
|||
|
|
</Button>
|
|||
|
|
</motion.div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* System Diagram */}
|
|||
|
|
<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 />
|
|||
|
|
</motion.div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Scroll indicator */}
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0 }}
|
|||
|
|
animate={{ opacity: 1 }}
|
|||
|
|
transition={{ duration: 0.6, delay: 0.8 }}
|
|||
|
|
className="absolute bottom-8 left-1/2 -translate-x-1/2 hidden lg:block"
|
|||
|
|
>
|
|||
|
|
<div className="flex flex-col items-center gap-2 text-muted-foreground">
|
|||
|
|
<span className="font-mono text-xs tracking-wider">Scroll</span>
|
|||
|
|
<motion.div
|
|||
|
|
animate={{ y: [0, 6, 0] }}
|
|||
|
|
transition={{ duration: 1.5, repeat: Infinity, ease: 'easeInOut' }}
|
|||
|
|
>
|
|||
|
|
<ArrowDown className="size-4" />
|
|||
|
|
</motion.div>
|
|||
|
|
</div>
|
|||
|
|
</motion.div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
)
|
|||
|
|
}
|