Contexto
Este proyecto es un sitio web personal diseñado para presentar de manera integral la personalidad, intereses y actividades diarias del desarrollador. La plataforma va más allá de un portafolio tradicional, ofreciendo una experiencia inmersiva que combina información personal con datos en tiempo real de plataformas de terceros.
Objetivos
- Crear una plataforma personal que refleje autenticidad y personalidad del desarrollador.
- Integrar APIs externas para mostrar actividad musical en tiempo real desde Spotify.
- Desarrollar secciones interactivas que presenten contenido favorito de forma organizada y visualmente atractiva.
- Implementar un diseño moderno y responsive que funcione perfectamente en todos los dispositivos.
- Optimizar el rendimiento y SEO para mejorar la visibilidad del sitio personal.
Desarrollo
El proyecto utiliza Next.js como framework principal, aprovechando sus capacidades de renderizado híbrido para ofrecer una experiencia de usuario óptima. La arquitectura combina Server-Side Rendering (SSR) para contenido dinámico y Static Site Generation (SSG) para secciones estáticas, garantizando tiempos de carga rápidos y una excelente experiencia de navegación. La integración con la API de Spotify permite mostrar datos musicales en tiempo real, incluyendo la canción actualmente en reproducción, artistas más escuchados y canciones favoritas con diferentes periodos de tiempo.
Características
Perfil Personal Completo
- Información detallada sobre ubicación, educación, ocupación y datos personales.
- Sección de hobbies con categorización visual de intereses y actividades.
- Información sobre gustos personales: comida, bebidas, deportes y más.
- Gestión de tiempo libre con estadísticas de actividades diarias.
Integración Musical con Spotify
- Visualización en tiempo real de la canción actualmente en reproducción.
- Historial de canciones recientemente escuchadas.
- Top artistas y canciones con filtros de periodo (1 mes, 6 meses, 1 año).
- Conexión directa con la API de Spotify para obtener datos actualizados.
Catálogo de Contenido Multimedia
- Sección de anime con categorías: favoritos, películas, recomendaciones.
- Colección de películas organizadas por categorías: favoritas, Disney, animadas.
- Serie de televisión con clasificación por tipo: live-action, animadas, k-dramas.
- Enlaces directos a plataformas de streaming para cada contenido.
Sección de Videojuegos
- Catálogo de juegos móviles favoritos con enlaces de descarga.
- Colección de juegos de PC con información de plataformas.
- Calificaciones y géneros para cada videojuego presentado.
Rutina de Ejercicio
- Planificación semanal de entrenamiento con sistema Upper/Lower/Push/Pull.
- Detalle de ejercicios diarios con series y repeticiones.
- Visualización clara de días de entrenamiento y descanso.
Sistema de Temas y Localización
- Soporte multiidioma (Español/Inglés) con cambio dinámico.
- Sistema de temas claro/oscuro para mejorar la experiencia de usuario.
- Persistencia de preferencias del usuario en el navegador.
Optimización y Rendimiento
- Migración a Next.js para mejorar SEO y tiempos de carga.
- Imágenes optimizadas con formato AVIF para reducir tamaño.
- Lazy loading de contenido multimedia para mejorar rendimiento.
- Estructura semántica HTML para mejor indexación en motores de búsqueda.
Galería de páginas
