Logo

Dieses Portfolio – von Grund auf erstellt

Warum ich auf Vorlagen verzichtete und eine eigene, mehrsprachige Seite entwickelte

UXfolio war mir zu starr, und Behance ist zwar nett, aber nicht mein Format. Ich wollte eine Seite, die mit mir wächst, meine Identität widerspiegelt und echtes Product Thinking zusammen mit meinen Fähigkeiten zeigt – also habe ich sie selbst entworfen, getextet und programmiert.

Portfolio website hero preview
Mein erstes Design war das Logo, und es war nach ein paar Stunden fertig.

Projekt auf einen Blick

Meine Rolle

UI/UX-Design, UX-Writing, Brand & Logo, Frontend, Lokalisierung (EN → DE/RU), Veröffentlichung

Zeitrahmen

Etwa 1 Monat unregelmäßige Abende nach der Arbeit

Tools

Figma, VS Code, Tailwind, GitHub Pages, HTML/CSS/JS, ChatGPT, Google Docs, CodePen

Identity & Branding UI / UX Content & ToV Frontend Lokalisierung (EN / DE / RU)

Herausforderungen

Ein professionelles Profil entwickeln, ein Logo gestalten und ein responsives Portfolio von Grund auf bauen – ohne Vorlagen und ohne selbst hauptberuflich Entwickler zu sein. Die Seite sollte schnell live gehen und leicht zu pflegen sein.

Ziel

Ein responsives, markentaugliches und mehrsprachiges Portfolio aufbauen, das meine Geschichte klar erzählt, Fallstudien einheitlich präsentiert und mir die volle Kontrolle über Inhalte, Code und Weiterentwicklung gibt.

Meine Highlights

  • Eigene Identität & Logo im Einklang mit Stil und Arbeit
  • Wiederverwendbares Case-Study-Layout für klare Stories
  • Mehrsprachige Struktur (EN → DE/RU) von Anfang an bedacht
  • Schneller Static-Stack mit Tailwind auf GitHub Pages
  • Zugängliche Typografie & Spacing für einfaches Scannen

Ergebnis

  • Eine Website, die persönlich wirkt, Vertrauen schafft und wachsen kann
  • Eine klarere Story über Fähigkeiten, Prozess und echten Impact
  • Volle Kontrolle über Hosting, Geschwindigkeit und SEO-Basics
  • Kein Vendor-Lock-in – alles läuft aus meinem Repo
  • Eine responsive Seite, die ich bis ins letzte Pixel besitze

Prozess

Ich habe diese Seite wie ein kleines Produkt angegangen: in auslieferbaren Teilen, mit echten Rahmenbedingungen und schnellem Lernen. Das Ziel war nicht einfach „eine Website“, sondern ein klares, wachsendes System, das mit meiner Arbeit wächst.

  • Die Stimme finden. Richtungen skizziert, visuelle Referenzen gesammelt und einen Ton definiert, der schlicht, selbstbewusst und einladend wirkt.
  • Die Identität formen. In wenigen Stunden wurde das Logo entworfen und geprüft, wie gut es mich widerspiegelt und in Mockups wirkt.
  • Die Arbeit strukturieren. In Figma die ersten Seiten entworfen – Startseite, Über mich, Fallstudien, Kontakt – mit Desktop-First-Ansatz.
  • Rhythmus prüfen. Interaktive Mocks erstellt, um Flow, Abstände und Lesetempo zu testen, bevor überhaupt Code geschrieben wurde.
  • Das Wesentliche verfeinern. Mehrere Iterationen des finalen Designs entwickelt und die beste gewählt.
  • Bauen wie Bausteine. Mit HTML/Tailwind/JS gearbeitet, Abschnitte komponentenbasiert gebaut und mit ChatGPT die Routine beschleunigt.
  • Mehrsprachig gehen. Zuerst auf Englisch geschrieben, dann ins DE/RU lokalisiert – mit beibehaltener Tonalität und Klarheit.
  • Ausliefern, prüfen, iterieren. Auf GitHub Pages veröffentlicht, auf Geräten getestet und dokumentiert, damit künftige Anpassungen leichter fallen.
Early Figma concept board showing page map for desktop and mobile
Frühes Konzeptboard in Figma: erste Seiten für den Launch im Desktop-First-Plan. Später wurde das Case-Study-System angepasst – Abstände, Proportionen und Ränder – für flüssigeres Lesen.

Wichtige Entscheidungen & Designprinzipien

Anstatt ein künstliches „Vorher–Nachher“ zu erzwingen, zeige ich die Entscheidungen, die diese Seite geprägt haben, und die Prinzipien, die sie zusammenhalten – damit das Design klar, flexibel und authentisch zu meiner Arbeit bleibt.

Meine Entscheidungen

  • Von Grund auf, ohne Kompromisse. Volle kreative Kontrolle, bessere Performance und ein Auftritt, der wirklich zu mir passt. Dazu eine bewusste Lerninvestition.
  • Eigenes Logo statt nur Wortmarke. Ein Zeichen mit Charakter, das in Favicon, Social Media und Print funktioniert – modern und nahbar statt austauschbar.
  • Desktop first, dann Mobile. Da Fallstudien meist am Desktop gelesen werden, habe ich dort zuerst gestaltet – mobile Anpassungen wurden einfacher.
  • Manuelle Lokalisierung. Tonalität, Begriffe und Kontext sind entscheidend. Manuelle Übersetzungen schaffen mehr Vertrauen, bessere UX und SEO.

Was das Design zusammenhält

  • Klarheit. Eine klare Hierarchie in den Fallstudien, damit Rolle, Ergebnis und Wirkung sofort erkennbar sind.
  • Konsistenz. Abstands- und Typografie-Raster halten die Seiten zusammen; wiederverwendbare Blöcke sorgen für einheitlichen Text- und Designfluss.
  • Identität. Logo, Tonalität und Farbwahl vermitteln eine ruhige, zugängliche Marke – durchgängig vom Hero bis zum Footer.
  • Flexibilität. Als System gebaut (Tailwind + modulare Inhalte), sodass sich neue Fallstudien schnell hinzufügen lassen.

Ergebnisse

Dieses Projekt hat meinen Umgang mit Design und Projekten insgesamt stark verändert. Ich habe neue Fähigkeiten gewonnen, bestehende geschärft und die volle Kraft kreativer Freiheit erlebt – ohne Paywalls oder die Einschränkungen einer Plattform:

  • Lesbarkeit. Klare Struktur macht auch lange Seiten leicht.
  • Handwerk. Logo und Tonalität geben dem Portfolio eine eigene, menschliche Stimme.
  • Eigentum. Inhalte und Code im Repo – keine Abhängigkeiten.
  • Lokalisierung. Manuelle Übersetzungen bewahren Nuancen und Glaubwürdigkeit.
  • Performance. Ein schlanker Static-Build hält die Seiten schnell und stabil.
  • Dev-Empathie. Der Bau der Seite ließ mich Entwickler besser verstehen.
Iteration 2 – reworked Case Studies layout with improved rhythm and spacing
Iteration 2, das vorletzte Layout – Fallstudien neu geordnet, Abstände verfeinert und alles noch einmal sorgfältig ausgearbeitet, bevor es in den Code ging.
Early component frame showing aligned blocks and tidy structure
Alle Blöcke wurden als Komponenten entwickelt; die Texte wurden parallel in drei Sprachen in einer übersichtlichen Tabelle gepflegt und übersetzt.

Erkenntnisse

Dieses Projekt ging weit über Design hinaus – eine komplette Produktaufgabe. Ich lernte, Identität, Struktur und Code zu verbinden und den Fokus auf Klarheit und Nutzbarkeit zu halten.