Redesign: Modernes SaaS-Design für Joachim Hummel Portfolio
Task #4 — vollständiges Redesign von dunkler Terminal-Ästhetik zu modernem SaaS-Look. Änderungen: - index.css: Komplette Neudefinition der CSS-Variablen. Helles Farbschema (weißer Hintergrund), Primärfarbe Indigo/Blau (hsl 234 89% 60%), neutrale Grautöne, Google Font Inter eingebunden. Utility-Klassen .section-number, .hero-gradient, .dot-pattern, .card-hover hinzugefügt. Terminal-spezifische Klassen (.glow-text, .glow-box, .bg-grid-pattern) entfernt. - navbar.tsx: Sticky Nav mit transparentem Start → weißem Hintergrund + Schatten beim Scrollen. Logo "JH" als gefülltes Indigo-Badge + "Joachim Hummel" Text. Pill-Style Navigation Links. Primär-CTA Button. Vollständiges Mobile-Menü mit Hamburger/X Toggle. - hero.tsx: Zentriertes Layout, großer Display-Headline mit Indigo-Akzent auf Nachname. "Verfügbar für neue Projekte" Badge mit grünem Puls. Skill-Badges (30+ Jahre, ITIL, etc.). Zwei CTAs: gefüllter Primärbutton + Outline-Button. Subtiler Radial-Gradient + Dot-Pattern. - competencies.tsx: Sechs weiße Karten im Grid mit farbigen Icon-Badges (blau, sky, grün, orange, violett, rose). Tech-Icon-Leiste (Linux, Ubuntu, Docker, Grafana, Nginx, Ansible, Prometheus) mit Hover-Farbeffekt und Labels. - strengths.tsx: Drei weiße Karten auf hellgrauem Hintergrund. Nummerierung (01/02/03) als dekoratives Element. Highlight-Badge je Karte. Kein Glow, kein Neon. - projects.tsx: Sechs Projektkarten mit farbigen Icon-Badges je Projektkategorie. Externe Links für SafeDocs Portal (safedocsportal.com) und zensend.email als ArrowUpRight-Icon-Buttons. Pill-Badges für Tags. - bio.tsx: Zweispaltiges Layout. Links: Fließtext + Kunden-Badges. Rechts: Weißes Highlights-Panel mit CheckCircle-Icons (7 Punkte inkl. ITIL, BSI, Tech-Blogger). - contact.tsx: Primärfarbige E-Mail-Karte + drei kompakte Link-Cards (Tech-Blog, KI-Blog, Website). Footer-Zeile mit Name und Standort. - home.tsx: Vereinfacht — kein Fixed-Background, kein Grid-Pattern, kein Ambient-Glow. max-w-6xl Container für alle Sektionen.
This commit is contained in:
joachimhummel
@@ -1,29 +1,86 @@
|
||||
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-20 border-t border-border/50">
|
||||
<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: "-100px" }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="max-w-4xl mx-auto text-center"
|
||||
className="px-4 md:px-12"
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-8 font-mono text-foreground">
|
||||
<span className="text-primary">04.</span> Über Mich
|
||||
</h2>
|
||||
|
||||
<div className="text-lg md:text-xl text-muted-foreground leading-relaxed space-y-6">
|
||||
<p>
|
||||
Joachim Hummel ist Senior IT-Consultant, IT-Systems Engineer und technischer Umsetzer mit rund <span className="text-foreground font-medium">30 Jahren Erfahrung</span> im IT-Betrieb.
|
||||
</p>
|
||||
<p>
|
||||
Seine Schwerpunkte liegen auf Linux, Docker, On-Premise-Infrastrukturen, DSGVO-konformem Selfhosting, Mailservern, Monitoring, Automatisierung und KI-gestützter Softwareentwicklung.
|
||||
</p>
|
||||
<p>
|
||||
Mit <span className="text-primary font-mono glow-text">Vibe-Coding</span> entwickelt er aus Ideen lauffähige Anwendungen, Automatisierungen und SaaS-Projekte.
|
||||
</p>
|
||||
<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>
|
||||
Mein Ansatz ist bodenständig: Technik muss funktionieren, nachvollziehbar sein und langfristig betrieben werden können. Mit Vibe-Coding bringe ich heute Ideen direkt in produktive Systeme — schnell, sauber, betreibbar.
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user