Fallstudie 07 · Meine eigene Marke · 20261 Min. Lesezeit

Ein Design System für meine Website, meinen CV und meine Motivationsschreiben.

Ich habe meinen CV und diese Website als ein Produkt gestaltet und die Website selbst gebaut.

Gebaut mit

Claude Design
Claude Code
Astro
React
TypeScript
GitHub Actions
Cloudflare Workers

3Medien, ein System

1Akzentfarbe

1 Min.pro Fallstudie

AAWCAG 2.1

ErgebnisDenkebene

Sie sehen das Ergebnis. Schalten Sie die Denkebene ein, um zu sehen, wie ich dorthin kam.Sie sehen Randnotizen, Skizzen und die Optionen, die ich verworfen habe.

Vorher / Nachher · zum Vergleichen ziehen

Aktuelle Startseite von nestor-pena.ch: I design software, then I build it

Nachher

Vorher

VorherNachher

Kontext und Rolle

zuerst kam der CV

Für Gründer, CTOs und Recruiter, die überfliegen.

Meine eigene Website, mein CV und meine Briefe, gebaut mit Astro, React und TypeScript auf Cloudflare. Recruiter sehen zuerst den CV und klicken dann weiter, also soll sich der Wechsel wie Umblättern anfühlen.

Wie ich vorgegangen bin

jede Entscheidung dient dem Überfliegen

Ausgangspunkt

~~Website gestalten, CV anpassen~~
~~Eine neue Marke~~

Aus dem CV entwickeln

Die Website soll sich wie die nächste Seite des CV anfühlen.

Lesezeit

~~Ausführliche Berichte~~
~~Nur Screenshots~~

Eine Minute, Tiefe auf Wunsch

Recruiter überfliegen das Ergebnis; die Denkebene enthält Gründe, verworfene Optionen und Skizzen.

Private Dokumente

~~Ein Passwort im Browser~~
~~Eine PIN per E-Mail~~

Ein Code, der auf dem Server geprüft wird

Die PDFs sind nie öffentlich, und Recruiter tippen den Code aus meinem CV ein.

Was ich gebaut habe

Fallstudien-Index auf der Startseite: sieben einzeilige Einträge, mit Hover-Vorschau der Fallstudie Bern Sessions und ihrer handschriftlichen Notiz

Fallstudie Pulse mit eingeschalteter Denkebene: gepunkteter Papierhintergrund, Randnotiz und Entscheidungskarten, die zeigen, warum Option A und B verworfen wurden — Die Denkebene

Startseite auf dem Handy: Porträt, kurzer Titel und die erhöhte Tab-Leiste unten

CV-Seite als Skelett: Name, Titel und Abschnittstitel, jede Textzeile durch einen Balken ersetzt — CV

Seite des Motivationsschreibens als Skelett: Name, Titel und Betreff, jede Textzeile durch einen Balken ersetzt — Motivationsschreiben

Eine Token-Datei steuert die Website, die Identitätsseite und deren Kontrastwerte.
Eine Markdown-Datei pro Fallstudie: Seite, Zeile auf der Startseite und Vorschaubild folgen daraus.
Eine Denkebene in jeder Fallstudie: Randnotizen, verworfene Optionen, Skizzen.
Eine handgezeichnete Ebene: Notizen, Doodle-Icons und Federstrich-Trenner.
Eine Tool-Suche für Recruiter: «Jira» oder «Azure DevOps» eintippen, ein Ja erhalten und sehen, wo ich es eingesetzt habe.
Vier Sprachen: Englisch, Spanisch, Französisch und Deutsch; beim Wechseln bleiben Sie auf derselben Seite.
WCAG 2.1 AA, bei jedem Push geprüft: Kontrast, Barrierefreiheit, Typen, Lighthouse.
Ein ruhiger Header: Seitenlinks, dann eine einzige Icon-Gruppe für Profile, Sprache und Theme.
Tooltips: Icon-Buttons erklären sich bei Hover und Tastaturfokus; Escape blendet sie aus.
Favicons für jedes Gerät: Browser-Tabs, iPhone- und Android-Startbildschirme.
Ein Farblook für jedes Foto: Schatten in Tinte, Mitteltöne in der Akzentfarbe, Lichter in Creme; Screenshots behalten ihre echten Farben.
Ein CV, den Bewerbermanagement-Systeme lesen können: eine Spalte, der Name zuerst, und jedes PDF so geprüft, wie ein ATS es ausliest.