Adjusted bio, hero badge, and strengths description to reflect AI-powered software development as a tool for faster implementation, leveraging 30 years of IT experience and prioritizing architecture and operational security. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 6f3329ae-2dcc-46cc-bf2e-f58b7a5fa805 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 1b37a303-2f35-439a-af9a-c98d86e8e7b7 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/e678fe28-87ab-4437-945b-7a15e872a292/6f3329ae-2dcc-46cc-bf2e-f58b7a5fa805/BWIZrK7 Replit-Helium-Checkpoint-Created: true
89 lines
3.6 KiB
TypeScript
89 lines
3.6 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import { CheckCircle2 } from "lucide-react";
|
|
|
|
const highlights = [
|
|
"30+ Jahre IT-Betrieb in Behörden & Konzernen",
|
|
"ITIL & BSI-Grundschutz Erfahrung",
|
|
"Web- & Middleware (Apache, Tomcat, JBoss, Websphere)",
|
|
"Docker, Ansible, Gitlab CI/CD",
|
|
"Technische Redaktion & Betriebshandbücher",
|
|
"KI-Automation seit 2023 (n8n, RAG, Pinecone)",
|
|
"Tech-Blogger mit 300+ Fachartikeln",
|
|
];
|
|
|
|
const clients = [
|
|
"Landesamt für Statistik Bayern",
|
|
"Polizei Hessen",
|
|
"Justiz Baden-Württemberg",
|
|
"Amt des öff. Rechts Hamburg",
|
|
"Finanzdienstleister München (EZB-geprüft)",
|
|
];
|
|
|
|
export function Bio() {
|
|
return (
|
|
<div className="py-24 bg-secondary/40 rounded-3xl">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-80px" }}
|
|
transition={{ duration: 0.6 }}
|
|
className="px-4 md:px-12"
|
|
>
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<p className="section-number mb-3" data-testid="text-section-label-bio">Über mich</p>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6" data-testid="text-section-title-bio">
|
|
IT-Experte mit Tiefe — und dem Blick nach vorne
|
|
</h2>
|
|
<div className="space-y-4 text-muted-foreground leading-relaxed">
|
|
<p>
|
|
Mehr als 25 Jahre Erfahrung im Aufbau, Betrieb und Management von IT-Infrastrukturen in Konzernen, Behörden und kritischen Umgebungen. Ich verbinde klassische ITIL-Prozesse und technische Betriebserfahrung mit innovativen Automatisierungslösungen auf Basis von KI und modernen Tools.
|
|
</p>
|
|
<p>
|
|
Ich nutze KI nicht als Ersatz für Erfahrung, sondern als Werkzeug zur schnelleren Umsetzung. Architektur, Betriebssicherheit und nachvollziehbare Systeme bleiben dabei die Grundlage.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<p className="text-sm font-semibold text-foreground mb-4">Ausgewählte Kunden & Projekte</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{clients.map((client) => (
|
|
<span
|
|
key={client}
|
|
className="text-xs font-medium px-3 py-1.5 bg-white border border-border rounded-full text-foreground/70"
|
|
data-testid={`badge-client-${client.replace(/\s/g, '-').toLowerCase()}`}
|
|
>
|
|
{client}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="bg-white rounded-2xl border border-border p-8">
|
|
<p className="text-sm font-semibold text-foreground mb-6">Auf einen Blick</p>
|
|
<ul className="space-y-3" data-testid="list-highlights">
|
|
{highlights.map((item, index) => (
|
|
<motion.li
|
|
key={index}
|
|
initial={{ opacity: 0, x: 12 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.3, delay: index * 0.06 }}
|
|
className="flex items-start gap-3 text-sm text-muted-foreground"
|
|
data-testid={`item-highlight-${index}`}
|
|
>
|
|
<CheckCircle2 className="w-4 h-4 text-primary mt-0.5 shrink-0" />
|
|
{item}
|
|
</motion.li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|