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.
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.
