TailwindCSS ist der unangefochtene Platzhirsch der modernen Webentwicklung. Doch für dieses Portfolio habe ich mich ganz bewusst dagegen entschieden. Die gesamte Ästhetik – der sogenannte Glassmorphismus – ist in purem, handgeschriebenem Vanilla CSS (`site.css`) entstanden.
Das Problem mit Utility-First Frameworks
Frameworks wie Tailwind zwingen den Entwickler dazu, unzählige Klassen an HTML-Elemente zu klatschen.
Ein einfacher Button sieht dann schnell so aus:
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-lg backdrop-blur-md"
In großen Teams mit strengen Design-Systemen kann das Sinn machen. Für ein persönliches Portfolio empfinde ich es jedoch als unleserlich und schwer wartbar. Mein Ziel war es, semantisches HTML zu schreiben und das Styling zentral zu verwalten.
Der Glassmorphism Effekt
Das zentrale Design-Element dieser Website sind die halbtransparenten Karten, die den animierten Hintergrund durchscheinen lassen.
Dies wird in CSS über das Property backdrop-filter erreicht. Hier ist mein Kern-Snippet für die .glass-card Klasse:
.glass-card {
background: rgba(15, 15, 25, 0.7);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
Kombiniert mit einem animierten #tsparticles Hintergrund oder CSS-Glow-Orbs entsteht sofort eine tiefe, dreidimensionale und hochwertige Ästhetik.
CSS Custom Properties (Variablen)
Ein weiterer Grund, auf Preprozessoren wie Sass oder Frameworks zu verzichten, sind native CSS-Variablen. Sie sind mittlerweile in allen modernen Browsern verfügbar und erlauben ein perfektes Theming, sogar zur Laufzeit:
:root {
--accent-color: #00f2fe;
--accent-violet: #4facfe;
--bg-primary: #0a0a10;
}
.gradient-text {
background: linear-gradient(135deg, var(--accent-color), var(--accent-violet));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Fazit
Oft greifen wir zu riesigen Toolchains (Node.js, Webpack, Tailwind), um einfache Styling-Probleme zu lösen. Ein solides Verständnis von modernem Vanilla CSS, Grid-Layouts und Flexbox ist meiner Erfahrung nach deutlich wertvoller und erzeugt sauberen, extrem schnellen Code, was wiederum essenziell für gutes SEO ist.