46358579c4
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.
117 lines
2.9 KiB
CSS
117 lines
2.9 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
|
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--color-background: hsl(var(--background));
|
|
--color-foreground: hsl(var(--foreground));
|
|
--color-border: hsl(var(--border));
|
|
--color-input: hsl(var(--input));
|
|
--color-ring: hsl(var(--ring));
|
|
|
|
--color-card: hsl(var(--card));
|
|
--color-card-foreground: hsl(var(--card-foreground));
|
|
--color-card-border: hsl(var(--card-border));
|
|
|
|
--color-popover: hsl(var(--popover));
|
|
--color-popover-foreground: hsl(var(--popover-foreground));
|
|
--color-popover-border: hsl(var(--popover-border));
|
|
|
|
--color-primary: hsl(var(--primary));
|
|
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
|
|
--color-secondary: hsl(var(--secondary));
|
|
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
|
|
--color-muted: hsl(var(--muted));
|
|
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
|
|
--color-accent: hsl(var(--accent));
|
|
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
|
|
--color-destructive: hsl(var(--destructive));
|
|
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
|
|
--font-sans: 'Inter', system-ui, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Menlo', monospace;
|
|
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
}
|
|
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 222 47% 11%;
|
|
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222 47% 11%;
|
|
--card-border: 220 13% 91%;
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222 47% 11%;
|
|
--popover-border: 220 13% 91%;
|
|
|
|
--primary: 234 89% 60%;
|
|
--primary-foreground: 0 0% 100%;
|
|
|
|
--secondary: 220 14% 96%;
|
|
--secondary-foreground: 222 47% 11%;
|
|
|
|
--muted: 220 14% 96%;
|
|
--muted-foreground: 220 9% 46%;
|
|
|
|
--accent: 234 89% 97%;
|
|
--accent-foreground: 234 89% 40%;
|
|
|
|
--destructive: 0 84% 60%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
|
|
--border: 220 13% 91%;
|
|
--input: 220 13% 91%;
|
|
--ring: 234 89% 60%;
|
|
|
|
--radius: 0.625rem;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
@apply font-sans antialiased bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
.section-number {
|
|
@apply text-sm font-semibold tracking-widest uppercase text-primary;
|
|
}
|
|
|
|
.hero-gradient {
|
|
background: radial-gradient(ellipse 80% 60% at 50% -10%, hsl(234 89% 60% / 0.12) 0%, transparent 70%);
|
|
}
|
|
|
|
.dot-pattern {
|
|
background-image: radial-gradient(circle, hsl(220 13% 91%) 1px, transparent 1px);
|
|
background-size: 28px 28px;
|
|
}
|
|
|
|
.card-hover {
|
|
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
.card-hover:hover {
|
|
box-shadow: 0 8px 30px hsl(234 89% 60% / 0.1);
|
|
transform: translateY(-2px);
|
|
border-color: hsl(234 89% 60% / 0.3);
|
|
}
|