Un sitio web inmersivo dedicado a la carrera musical de Myke Towers. Discografía completa, biografía editorial, videos musicales y documentación de API pública.
- Visión General
- Características
- Tecnologías
- Estructura del Proyecto
- Inicio Rápido
- Scripts Disponibles
- Rutas
- Sistema de Reproducción Musical
- SEO y Rendimiento
- Documentación de la API
- Decisiones Técnicas
- Licencia
Myke Towers no es simplemente un sitio web de un artista. Es una experiencia digital que acompaña la carrera de uno de los exponentes más relevantes de la música urbana puertorriqueña.
El proyecto fue concebido como un homenaje interactivo: un espacio donde los fans pueden explorar la discografía completa del artista, sumergirse en su biografía a través de una línea de tiempo editorial, navegar por sus videos musicales y descubrir la documentación técnica de su API pública.
"El Young King" — así lo conocen. Y este proyecto busca reflejar esa esencia con la misma dedicación que él pone en cada canción.
En vivo: myke-towers.vercel.app
- Scroll suavizado con Lenis para una navegación fluida y natural
- Transiciones de página animadas con Framer Motion (escala + desenfoque)
- Efecto parallax en la sección hero con imágenes que responden al scroll
- Cursor personalizado con anillo exterior que escala al interactuar (solo escritorio)
- Fondo ambiental con gradientes de color difuminados que crean atmósfera
- Glassmorphism en el header flotante con backdrop-blur y bordes translúcidos
- Biografía completa con línea de tiempo de 5 eras (2016–2025)
- Discografía interactiva con carrusel 3D de rotación infinita y modal de tracklist
- Galería de videos con estados de carga skeleton y paginación
- Muro social con grid estilo masonry e interacción hover
- Reproductor global que reproduce videos de YouTube en segundo plano
- Controles en el header: play/pause, avanzar/retroceder, barra de progreso
- Visualizador de audio animado con barras reactivas
- Avance automático al terminar cada video
- Inicio silenciado para cumplir con políticas de autoplay del navegador
- SEO completo: meta tags, Open Graph, Twitter Cards, Schema.org JSON-LD
- XML Sitemap y
robots.txtoptimizados - Diseño responsive con menú hamburguesa de pantalla completa en móvil
- 14 entradas de discografía con tracklists completos (2016–2025)
- 20 videos oficiales con metadatos detallados
- Documentación de API interactiva con código en 3 lenguajes
| Categoría | Tecnología | Versión | Propósito |
|---|---|---|---|
| Framework | React | 19 | Biblioteca de interfaces de usuario |
| Build Tool | Vite | 6 | Servidor de desarrollo y empaquetado |
| Routing | React Router DOM | 7 | Navegación client-side |
| Estilos | Tailwind CSS | 4 | Framework CSS utility-first |
| Animaciones | Framer Motion | 12 | Animaciones, transiciones, layout |
| Scroll | Lenis | 1.3 | Scroll suavizado |
| Iconos | Lucide React | 0.525 | Iconografía SVG |
| Video | YouTube IFrame API | — | Reproducción de video embebido |
myke-towers/
├── public/ # Assets estáticos
│ ├── favicon.png
│ ├── preview.jpg # Imagen OG/Twitter
│ ├── hero-video.mp4
│ ├── robots.txt
│ └── sitemap.xml
│
├── src/
│ ├── main.jsx # Punto de entrada
│ ├── App.jsx # Componente raíz
│ ├── App.css # Importación de Tailwind
│ ├── index.css # Estilos globales y fuentes
│ │
│ ├── assets/font/ # Fuentes tipográficas
│ ├── context/
│ │ └── VideoContext.jsx # Estado global del reproductor
│ ├── data/
│ │ └── staticData.js # Toda la información del proyecto
│ ├── routers/
│ │ └── Routers.jsx # Definición de rutas
│ │
│ └── landing/
│ ├── layout/
│ │ ├── Layout.jsx # Wrapper de página
│ │ ├── Header.jsx # Navbar flotante + reproductor
│ │ ├── Footer.jsx # Pie de página
│ │ ├── Bg.jsx # Fondo ambiental
│ │ └── Dock.jsx # Componente estilo macOS
│ │
│ ├── components/
│ │ ├── common/
│ │ │ └── Cursor.jsx
│ │ └── home/
│ │ ├── Hero.jsx
│ │ ├── Musica.jsx
│ │ ├── Card.jsx
│ │ ├── Bio.jsx
│ │ ├── Discography.jsx
│ │ ├── DiscographySection.jsx
│ │ ├── SocialWall.jsx
│ │ └── Skeleton.jsx
│ │
│ └── pages/
│ ├── Home.jsx
│ ├── FullBio.jsx
│ ├── Albums.jsx
│ ├── AlbumDetail.jsx
│ └── ApiDocs.jsx
│
├── index.html # HTML con SEO y Schema.org
├── vite.config.js
├── tailwind.config.js
└── eslint.config.js
- Node.js (v18 o superior)
- npm, yarn o pnpm
# Clonar el repositorio
git clone https://github.com/sebastianvasquezechavarria1234/myke-towers.git
# Navegar al directorio
cd myke-towers
# Instalar dependencias
npm installnpm run devEl servidor de desarrollo estará disponible en http://localhost:5173.
# Construir el proyecto
npm run build
# Previsualizar la build
npm run preview| Comando | Descripción |
|---|---|
npm run dev |
Inicia el servidor de desarrollo de Vite |
npm run build |
Genera la build de producción |
npm run preview |
Previsualiza la build de producción |
npm run lint |
Ejecuta ESLint para detectar errores de código |
| Ruta | Página | Descripción |
|---|---|---|
/ |
Home | Hero interactivo, galería de videos y carrusel de discografía |
/biografia |
FullBio | Biografía editorial con línea de tiempo (2016–2025) |
/albums |
Albums | Grid completo de la discografía (14 lanzamientos) |
/album/:id |
AlbumDetail | Detalle de álbum con tracklist y enlaces de YouTube |
/api-docs |
ApiDocs | Documentación interactiva de la API con código en 3 lenguajes |
El reproductor musical es uno de los pilares de la experiencia. Funciona en segundo plano mientras el usuario navega por el sitio.
Cómo funciona:
- Al cargar la página, el reproductor inicia silenciado (cumpliendo con las políticas de autoplay)
- En la primera interacción del usuario, se activa el audio
- Los videos se reproducen en orden aleatorio de una playlist de 20 canciones
- Al terminar un video, avanza automáticamente al siguiente
- El header muestra controles inline: play/pause, skip, barra de progreso
- Un visualizador de audio animado responde al ritmo
Controles disponibles:
- Play / Pausa
- Siguiente video
- Video anterior
- Barra de progreso (clic para saltar)
- Indicador de mute/unmute
El header también muestra una versión difuminada del thumbnail del video actual como fondo, creando una conexión visual entre la música y la interfaz.
- Meta tags completos: título, descripción, keywords, autor, robots
- Open Graph: imágenes de vista previa para Facebook, WhatsApp y redes sociales
- Twitter Cards: formato
summary_large_image - Schema.org JSON-LD: datos estructurados
MusicGrouppara Rich Snippets de Google - XML Sitemap: mapa del sitio con 4 URLs y prioridades
- Robots.txt: configuración para crawlers
- Build optimizado con Vite (tree-shaking, code splitting, minificación)
- Assets estáticos en formato AVIF y MP4 (compresión eficiente)
- Fuentes self-hosted (Poppins, Great Vibes) sin dependencia de CDN externo
- Lazy loading implícito a través de la arquitectura de componentes
El proyecto incluye una página dedicada (/api-docs) que documenta la API pública que acompaña al sitio.
La API complementaria está desplegada en myke-towers-api.onrender.com y el código fuente está disponible en:
github.com/sebastianvasquezechavarria1234/myke-towers-api
La página de documentación incluye:
- Sidebar interactivo con 7 endpoints documentados
- Bloques de código en JavaScript, Python y cURL
- Funcionalidad de copiar al portapapeles
- Tablas de parámetros con tipo, obligatoriedad y descripción
- Vista previa de respuestas JSON
La documentación fue diseñada como una herramienta de uso real, no solo como una demostración visual.
React 19 trae mejoras significativas en rendimiento y un nuevo modelo de concurrencia. Para un proyecto que depende fuertemente de animaciones y transiciones, estas mejoras se traducen en una experiencia más fluida.
Este proyecto es un Single Page Application sin necesidad de rendering del lado del servidor (SSR) o generación estática (SSG). Vite ofrece la configuración más ligera y un tiempo de desarrollo más rápido para este caso de uso.
La YouTube IFrame API permite un control más preciso sobre la reproducción: eventos de estado, progreso, control de volumen y integración con el sistema de contexto global. Un componente de video genérico no ofrecería este nivel de control.
Tailwind v4 introduce un nuevo motor de escritura en Rust, eliminando la dependencia de PostCSS. El resultado: tiempos de compilación significativamente más rápidos sin cambiar la experiencia de desarrollo.
Toda la información del artista está definida en staticData.js. Esta decisión fue intencional: al ser un sitio tributo/fan, la información no cambia frecuentemente y no necesita autenticación. Un archivo estático elimina latencia, reduce puntos de fallo y mejora el rendimiento.
- Componentes atómicos:
Card,Skeleton,Cursor— piezas reutilizables - Componentes de sección:
Hero,Musica,Bio— bloques de la landing page - Componentes de página:
Home,FullBio,Albums— rutas completas - Layout components:
Header,Footer,Layout— estructura compartida
El estado global se maneja a través de React Context (VideoContext). No se utiliza Redux ni Zustand porque la complejidad del estado no lo justifica.
- Utilidades de Tailwind CSS para estilos reutilizables
- CSS personalizado solo cuando Tailwind no ofrece una solución (variables CSS, fuentes, scrollbar personalizada)
- Tema oscuro con acentos de color: verde (#0fa), púrpura (#9c42f5), azul (#4579f5)
| Fuente | Uso | Licencia |
|---|---|---|
| Poppins | Texto principal (20 pesos) | OFL |
| Great Vibes | Display / títulos decorativos | OFL |
| JetBrains Mono | Código y bloques técnicos | OFL |
- YouTube IFrame API — Reproducción de video
- iTunes Search API — Búsqueda de música (documentada)
Este proyecto tiene una licencia propietaria.
Copyright 2026, Sebastian Vasquez. All Rights Reserved.
El código fuente del frontend está restringido. Sin embargo, la API pública asociada está abierta para consumo de desarrolladores.
Consulta el archivo LICENSE para más detalles.
Made with ❤️ by Sebastián V