Webdesign & Entwicklung

Bibas & Marco – Personal-Brand-Hub

Personal-Brand-Hub für mehrere Creator mit fünf miteinander verbundenen Bereichen: Startseite, eigene Podcast-Seite (Tou Podcast), individuelle Creator-Profile (Bibas' Make-up-Artistry und Tierarztarbeit, Marcos Musik als Mr Dilo) sowie eine umfassende Kooperationsseite. Bindet mehrere soziale Plattformen ein (YouTube, Spotify, Instagram, TikTok) samt eingebetteter Inhalte.

Umgesetzt mit React Router und einem anspruchsvollen redaktionellen Designsystem in warmen Cremetönen, mit eigener Serifentypografie und fein abgestimmten Framer-Motion-Animationen. Die responsiven Mobile-First-Layouts wahren die Markenkonsistenz über alle Bereiche hinweg.

Abschlussdatum: Mai 2026
Live-Website besuchen
Projektdetails

Überblick

Branche

Digitale Content-Erstellung / Unterhaltung / Personal Branding

Leistungsumfang

Vollständige mehrseitige Personal-Brand-Website mit Startseite, eigenem Podcast-Bereich, zwei individuellen Creator-Profilen und einer Kooperationsseite mit eingebetteten Social-Media-Integrationen, Kontaktformularen und responsivem Design auf allen Geräten

Zeitrahmen

2–3 Wochen vom Design bis zur Umsetzung

Die Ausgangslage

Herausforderung

Bibas und Marco brauchten eine einheitliche digitale Präsenz, um ihre vielfältigen Inhalte — Podcast, Musik, Make-up-Artistry und Tierpflege — an einem professionellen Ort zu bündeln. Ihr Publikum war über mehrere soziale Plattformen verstreut, ohne zentrale Anlaufstelle für Kooperationsanfragen oder eine umfassende Markenpräsentation. Gefragt war eine Lösung, die die individuelle Identität jedes Creators zeigt und zugleich das gemeinsame Branding als Paar wahrt.

Unser Ansatz

Lösung

Wir haben eine anspruchsvolle mehrseitige React-Anwendung mit redaktionellem Gestaltungsansatz entwickelt, mit warmer, einladender Farbpalette und feiner Typografie. Für jeden Inhaltsbereich gibt es einen eigenen Abschnitt, während ein gemeinsames Designsystem für visuelle Einheitlichkeit sorgt. Wir haben Direktlinks zu allen sozialen Plattformen eingebunden, einen Spotify-Podcast-Player eingebettet und eine umfassende Kooperationsseite mit allen Zusammenarbeitsmöglichkeiten erstellt. Die responsive Mobile-First-Architektur sichert ein hervorragendes Nutzererlebnis auf allen Geräten, während Framer-Motion-Animationen für den letzten Schliff sorgen, ohne die Performance zu beeinträchtigen.

Was enthalten ist

Wichtigste Funktionen

Responsives Design
Mehrseitige React-Architektur
Flüssige Scroll-Animationen
Redaktionelles Designsystem
Social-Media-Integration
Individuelle SVG-Icon-Bibliothek
Eingebetteter Spotify-Player
Portugiesischsprachige Inhalte
Ergebnisse

Ergebnisse

92-95/100
Performance-Wert
Lighthouse-Performance mit optimiertem Laden der Assets
100%
Mobile Responsivität
Mobile-First-Design mit umfassenden responsiven Breakpoints
~120-150KB
Bundle-Größe
Gzip-komprimierter Produktions-Build mit Code Splitting
100%
Codequalität
Strict Mode mit vollständiger ESLint-Abdeckung
Technologie

Technologie-Stack

React 19
TypeScript 6
Vite 8
Tailwind CSS 3.4
Framer Motion 12
React Router DOM 7
Lucide React 1.7
Jetzt starten

Bereit, Ihr Projekt zu starten?

Sprechen wir darüber, wie wir eine beeindruckende Website schaffen, die genau zu Ihren geschäftlichen Anforderungen passt.

Bibas & Marco – Personal-Brand-Hub | Portfolio | low-key solutions