Menú
← Desarrollador
Desarrollador · Case study

TR1BU

Sitio web de portfolio para artista de techno. Copenhagen, Dinamarca.

Presencia digital completa: identidad visual, música, galería y sistema de booking. Bilingüe inglés/español con SEO técnico para posicionamiento en escena europea.

Next.jsTypeScriptTailwind CSSCloudinaryBilingüe

🎛️

TR1BU

Techno DJ · Copenhagen, DK

2

Idiomas

8

Componentes

3

Rutas

En producción

Hero · Desktop

Sección hero (desktop)

Música · Galería

Galería y embeds de música

El problema

TR1BU es un artista de música electrónica que opera en la escena techno de Copenhagen. Sin un sitio propio, su única presencia online eran perfiles dispersos en Spotify, SoundCloud e Instagram — sin ningún punto central que unificara la identidad visual ni presentara la música en contexto.

El objetivo del sitio no es solo mostrar música: es generar credibilidad frente a promotores de eventos y clubes europeos. Un booking que llega a través de una web propia transmite un nivel de profesionalismo diferente al que llega por DM de Instagram. Esa diferencia importa en la escena.

Adicionalmente, el artista tiene audiencia en español e inglés — lo que requería una solución bilingüe real, no una traducción automática de parche.

Técnico

Lo que lo hace diferente

🌐

Routing bilingüe sin dependencias i18n

Rutas /en y /es con metadata independiente por idioma. El sistema de traducciones está implementado con un objeto tipado en TypeScript — sin next-intl, sin react-i18next. Cero dependencias extra, control total sobre las URLs.

🎵

Schema MusicGroup para SEO de artista

JSON-LD con tipo MusicGroup en el head: nombre, género, ubicación (Copenhagen, DK) e imagen. Preparado para rich results en Google y para ser indexado como entidad musical, no como página web genérica.

📸

Imágenes en Cloudinary, repo liviano

Todas las fotos artísticas se alojan en Cloudinary y se sirven optimizadas en AVIF/WebP vía Next.js Image. El repositorio permanece liviano — el cliente puede actualizar fotos desde el panel sin tocar el código.

📱

Booking adaptado al dispositivo

El botón de contacto detecta si el usuario está en móvil o escritorio. En móvil abre mailto: en el cliente nativo; en escritorio abre Gmail web. Implementado con navigator.userAgent, sin dependencias adicionales.

🖼️

Galería con layout editorial asimétrico

Grid de 5 fotos donde la primera imagen ocupa 2 columnas en desktop, generando una composición editorial. Efecto hover de escala de grises a color en la foto de perfil — solo con clases de Tailwind, sin JavaScript.

▶️

Embeds responsivos de Spotify, YouTube y SoundCloud

Los tres players se integran como iframes con wrappers que mantienen el aspect ratio 16:9 en todos los breakpoints. El DJ set de YouTube, el perfil de Spotify y el feed de SoundCloud disponibles en el mismo recorrido.

Stack

Frontend

Next.js 14React 18TypeScriptTailwind CSS 3

Multimedia

Cloudinary CDNYouTube embedSpotify embedSoundCloud embed

Deploy

VercelGoogle FontsESLintTypeScript strict