Diseño y Desarrollo Web

Bibas & Marco - Hub de Marca Personal

Hub de marca personal para varios creadores con cinco secciones interconectadas: portada, página dedicada al pódcast (Tou Podcast), perfiles individuales de cada creador (el maquillaje y el trabajo veterinario de Bibas, y la música de Marco como Mr Dilo) y una completa página de colaboraciones. Integra varias plataformas sociales (YouTube, Spotify, Instagram y TikTok) con contenido embebido.

Creada con React Router, con un sofisticado sistema de diseño editorial en una paleta cálida color crema, tipografía serif a medida y animaciones refinadas de Framer Motion. Las maquetaciones responsive mobile-first mantienen la coherencia de marca en todas las secciones.

Fecha de finalización: mayo de 2026
Visitar la Web
Detalles del Proyecto

Resumen

Sector

Creación de Contenido Digital / Entretenimiento / Marca Personal

Alcance

Web multipágina completa de marca personal con portada, sección dedicada al pódcast, dos perfiles individuales de creador y página de colaboraciones, con integraciones de redes sociales embebidas, formularios de contacto y diseño responsive en todos los dispositivos

Plazo

2-3 semanas desde el diseño hasta la implementación

El Problema

El Reto

Bibas y Marco necesitaban una presencia digital unificada que reuniera sus distintos frentes de contenido (pódcast, música, maquillaje y cuidado animal) en un único hub profesional. Su audiencia estaba fragmentada entre varias plataformas sociales, sin un punto central para las propuestas de colaboración ni para presentar la marca de forma completa. Necesitaban una solución capaz de mostrar la identidad individual de cada creador manteniendo una imagen de pareja coherente.

Nuestro Enfoque

La Solución

Desarrollamos una sofisticada aplicación React multipágina con un enfoque de diseño editorial, con una paleta cálida y acogedora y una tipografía refinada. Implementamos secciones dedicadas a cada vertical de contenido manteniendo la coherencia visual mediante un sistema de diseño compartido. Integramos enlaces directos a todas las plataformas sociales, embebimos el reproductor del pódcast de Spotify y creamos una página completa de colaboraciones que detalla las oportunidades de trabajo conjunto. La arquitectura responsive mobile-first garantiza una experiencia excelente en cualquier dispositivo, mientras que las animaciones de Framer Motion aportan acabado sin penalizar el rendimiento.

Qué Incluye

Características Clave

Diseño Responsive
Arquitectura React Multipágina
Animaciones de Scroll Suaves
Sistema de Diseño Editorial
Integración con Redes Sociales
Librería de Iconos SVG a Medida
Reproductor de Spotify Integrado
Contenido en Portugués
Rendimiento

Resultados

92-95/100
Puntuación de rendimiento
Rendimiento en Lighthouse con carga de recursos optimizada
100%
Adaptación a móvil
Diseño mobile-first con puntos de ruptura responsive completos
~120-150KB
Tamaño del bundle
Build de producción comprimido con gzip y división del código
100%
Calidad del código
Modo estricto con cobertura completa de ESLint
Tecnología

Stack Tecnológico

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

¿Listo para Empezar Tu Proyecto?

Hablemos de cómo podemos crear una web espectacular adaptada a las necesidades de tu negocio.

Bibas & Marco - Hub de Marca Personal | Portafolio | low-key solutions