Files
me-joachimhummel-de/artifacts/joachim-portfolio/src/components/bio.tsx
joachimhummel 9973439b72 Update profile to emphasize AI as a tool for implementation
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
2026-05-15 15:45:39 +00:00

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>
);
}