Stilhandbuch

Erfahren Sie mehr über das Design, die Farben und die Typografie meines Portfolios.

Farben

Gradiente Principal

Eine dunkle, kontrastreiche und lebendige Palette mit Farbverläufen. Ideal für Komponenten im Glassmorphismus-Stil, die die Augen nicht ermüden, aber Eleganz verleihen.

#b16cea
#ff5e69
#ffa84b

Neutros Oscuros

Fondos principales y contenedores en el modo oscuro (por defecto).

bg-neutral-950
bg-neutral-900
bg-neutral-800
Texto Resaltado

Color de Selección

Definido en el seudo-elemento ::selection global.

Fondo: #ffe1e3
Texto: #ff5e69

Typografie

Aa
H1 - Haupttitel

Gilroy Bold

7xl (72px) / -0.025em tracking

Aa
H2 - Sekundärtitel

Gilroy Semibold

5xl (48px) / -0.025em tracking

Aa
H3 - Untertitel
Gilroy Semibold

2xl (24px)

P - Basistext

Albert Sans Variable. Schnelles und elegantes Design beginnt mit sauberer Typografie. Dies ist der Text, der für lange Absätze, Beschreibungen und allgemeine Inhalte im Portfolio verwendet wird und eine hervorragende Lesbarkeit gewährleistet.

Hervorgehobener Text
Regular (Lg) / 18px
Standardtext
Regular (Base) / 16px
Kleiner Text
Regular (Sm) / 14px

UI-Elemente

Schaltflächen

Interaktive Schaltflächenstile mit sanften Übergängen beim Hover und subtilen Schatten.

Abzeichen (Pills)

React React Astro Astro Tailwind Tailwind TypeScript TypeScript

Minimalistische Abzeichen zur Anzeige von Technologien und Fähigkeiten mithilfe der globalen Komponente `Pill`.

Karten (Cards)

Project Name

Beispiel für einen hellen Kartenstil, der in Projektkarten verwendet wird, um visuelle Inhalte hervorzuheben und maximale Lesbarkeit zu gewährleisten.

Dark Card

Dunkles Stilbeispiel, das in der Erfahrung und im Bento Grid verwendet wird, um im standardmäßigen Dunkelmodus visuelle Tiefe zu erzeugen.

Symbole

Hauptikonographie

Arrow
Dropdown
Bug
External
Github
Home
Reload
Type

Native SVG-Symbole werden für maximale Effizienz inline gerendert. Sie werden hauptsächlich für die Navigation, externe Links und dekorative Details verwendet.