👑🎶 Myke Towers

El Young King — Experiencia Digital Interactiva

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.

Ver Demo en Vivo

Índice

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

Visión General

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

Características

Experiencia Visual

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

Contenido Editorial

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

Música en Vivo

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

Técnico

SEO completo: meta tags, Open Graph, Twitter Cards, Schema.org JSON-LD
XML Sitemap y robots.txt optimizados
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

Tecnologías

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

Estructura del Proyecto

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

Inicio Rápido

Prerrequisitos

Node.js (v18 o superior)
npm, yarn o pnpm

Instalación

# Clonar el repositorio
git clone https://github.com/sebastianvasquezechavarria1234/myke-towers.git

# Navegar al directorio
cd myke-towers

# Instalar dependencias
npm install

Desarrollo

npm run dev

El servidor de desarrollo estará disponible en http://localhost:5173.

Producción

# Construir el proyecto
npm run build

# Previsualizar la build
npm run preview

Scripts Disponibles

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

Rutas

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

Sistema de Reproducción Musical

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.

SEO y Rendimiento

Optimización para Motores de Búsqueda

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 MusicGroup para Rich Snippets de Google
XML Sitemap: mapa del sitio con 4 URLs y prioridades
Robots.txt: configuración para crawlers

Rendimiento

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

Documentación de la API

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.

Decisiones Técnicas

¿Por qué React 19?

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.

¿Por qué Vite y no Next.js?

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.

¿Por qué YouTube IFrame API y no un componente de video?

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.

¿Por qué Tailwind CSS v4?

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.

Datos estáticos vs. API

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.

Convenciones del Proyecto

Arquitectura de Componentes

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

Gestión de Estado

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.

Estilos

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)

Recursos

Tipografías

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

APIs Externas

YouTube IFrame API — Reproducción de video
iTunes Search API — Búsqueda de música (documentada)

Licencia

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

Name		Name	Last commit message	Last commit date
public		public
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
README.md.new		README.md.new
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tailwind.config.js		tailwind.config.js
vite.config.js		vite.config.js

Latest commit

History

Folders and files

Repository files navigation