Web Design & Development

Bibas & Marco - Personal Brand Hub

Multi-creator personal brand hub featuring five interconnected sections: home landing, dedicated podcast page (Tou Podcast), individual creator profiles (Bibas's makeup artistry and veterinary work, Marco's music as Mr Dilo), and comprehensive partnerships page. Integrates multiple social platforms (YouTube, Spotify, Instagram, TikTok) with embedded content.

Built with React Router featuring sophisticated editorial design system with warm cream color palette, custom serif typography, and refined Framer Motion animations. Mobile-first responsive layouts maintain brand consistency across all sections.

Completed Date: May 2026
Visit Live Site
Project Details

Overview

Industry

Digital Content Creation / Entertainment / Personal Branding

Scope

Complete multi-page personal brand website featuring homepage, dedicated podcast section, two individual creator profiles, and partnerships page with embedded social media integrations, contact forms, and responsive design across all devices

Timeline

2-3 weeks from design to implementation

The Problem

Challenge

Bibas and Marco needed a unified digital presence to consolidate their diverse content streams - podcast, music, makeup artistry, and animal care - into a single professional hub. Their audience was fragmented across multiple social platforms with no central point for partnership inquiries or comprehensive brand presentation. They required a solution that could showcase each creator's individual identity while maintaining cohesive couple branding.

Our Approach

Solution

Developed a sophisticated multi-page React application with an editorial design approach, using a warm, inviting color palette and refined typography. Implemented dedicated sections for each content vertical while maintaining visual consistency through a shared design system. Integrated direct links to all social platforms, embedded a Spotify podcast player, and created a comprehensive partnerships page detailing collaboration opportunities. The mobile-first responsive architecture ensures excellent user experience across devices, while Framer Motion animations add polish without compromising performance.

What's Included

Key Features

Responsive Design
Multi-Page React Architecture
Smooth Scroll Animations
Editorial Design System
Social Media Integration
Custom SVG Icon Library
Embedded Spotify Player
Portuguese Language Content
Performance

Results

92-95/100
Performance Score
Lighthouse performance with optimized asset loading
100%
Mobile Responsiveness
Mobile-first design with comprehensive responsive breakpoints
~120-150KB
Bundle Size
Gzipped production build with code splitting
100%
Code Quality
Strict mode with full ESLint coverage
Technology

Tech Stack

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

Ready to Start Your Project?

Let's discuss how we can create a stunning website tailored to your business needs.

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