9d143d7979
Changes: - hero.tsx: Extended title subtitle to two lines covering all six roles: "Senior IT-Consultant · Service Manager · Technical Writer" (line 1) "KI-Automation Experte · IT-Systems Engineer · Vibe-Coder" (line 2) Uses <br> hidden on mobile, visible on sm+ screens for clean wrapping. - navbar.tsx: Added blogLinks array (Tech-Blog, KI-Blog) rendered after a visual separator (1px divider) in the desktop nav and mobile menu. Each blog link opens in a new tab with rel="noopener noreferrer" and an ExternalLink icon (3px, half-opacity) as a visual cue. Added ExternalLink import from lucide-react. - projects.tsx: Removed leftover `color` field from the "Mailserver & Groupware" entry (cleanup from prior task). Already complete from Task #4 (redesign): - contact.tsx: jh@unixweb.de, blog.unixweb.de, ki-blog.unixweb.de, joachimhummel.de all wired up with correct target="_blank" links. - projects.tsx: SafeDocs Portal (safedocsportal.com) and zensend.email already had url fields and ArrowUpRight link buttons rendering. No address or phone number anywhere on the site. No deviations from scope.
95 lines
3.8 KiB
TypeScript
95 lines
3.8 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import { ArrowRight, ChevronDown } from "lucide-react";
|
|
|
|
const badges = [
|
|
"30+ Jahre IT-Erfahrung",
|
|
"ITIL & BSI-Grundschutz",
|
|
"Vibe-Coding mit KI",
|
|
"On-Premise & DSGVO",
|
|
];
|
|
|
|
export function Hero() {
|
|
return (
|
|
<div className="min-h-[92vh] flex flex-col justify-center items-center text-center relative pt-20">
|
|
<div className="absolute inset-0 hero-gradient pointer-events-none" />
|
|
<div className="absolute inset-0 dot-pattern opacity-40 pointer-events-none" />
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 24 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.7, ease: "easeOut" }}
|
|
className="relative z-10 max-w-4xl mx-auto px-4"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.1 }}
|
|
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-accent text-accent-foreground text-sm font-medium mb-8 border border-primary/20"
|
|
data-testid="badge-availability"
|
|
>
|
|
<span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
|
Verfügbar für neue Projekte
|
|
</motion.div>
|
|
|
|
<h1 className="text-5xl md:text-7xl font-extrabold tracking-tight text-foreground mb-6 leading-tight" data-testid="text-hero-name">
|
|
Joachim{" "}
|
|
<span className="text-primary">Hummel</span>
|
|
</h1>
|
|
|
|
<p className="text-base md:text-lg font-medium text-muted-foreground mb-4 tracking-wide leading-relaxed" data-testid="text-hero-title">
|
|
Senior IT-Consultant · Service Manager · Technical Writer
|
|
<br className="hidden sm:block" />
|
|
KI-Automation Experte · IT-Systems Engineer · Vibe-Coder
|
|
</p>
|
|
|
|
<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed mb-10" data-testid="text-hero-description">
|
|
Über 30 Jahre IT-Betrieb in Behörden und Konzernen. Heute verbinde ich klassische
|
|
Infrastruktur-Expertise mit KI-gestützter Softwareentwicklung — von der Idee bis zum
|
|
produktiven System.
|
|
</p>
|
|
|
|
<div className="flex flex-wrap justify-center gap-3 mb-12">
|
|
{badges.map((badge) => (
|
|
<span
|
|
key={badge}
|
|
className="px-3 py-1 text-sm font-medium bg-secondary text-secondary-foreground rounded-full border border-border"
|
|
data-testid={`badge-skill-${badge.replace(/\s/g, '-').toLowerCase()}`}
|
|
>
|
|
{badge}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|
<a
|
|
href="#contact"
|
|
className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white font-semibold rounded-xl hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 hover:shadow-primary/30"
|
|
data-testid="button-hero-contact"
|
|
>
|
|
Kontakt aufnehmen
|
|
<ArrowRight className="w-4 h-4" />
|
|
</a>
|
|
<a
|
|
href="#projects"
|
|
className="inline-flex items-center gap-2 px-6 py-3 bg-white text-foreground font-semibold rounded-xl border border-border hover:bg-secondary transition-all"
|
|
data-testid="button-hero-projects"
|
|
>
|
|
Projekte ansehen
|
|
</a>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.a
|
|
href="#competencies"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 1.2, duration: 0.6 }}
|
|
className="absolute bottom-10 text-muted-foreground hover:text-primary transition-colors"
|
|
data-testid="link-scroll-down"
|
|
>
|
|
<ChevronDown className="w-6 h-6 animate-bounce" />
|
|
</motion.a>
|
|
</div>
|
|
);
|
|
}
|