Context
This project is a personal website designed to comprehensively present the developer's personality, interests, and daily activities. The platform goes beyond a traditional portfolio, offering an immersive experience that combines personal information with real-time data from third-party platforms.
Objectives
- Create a personal platform that authentically reflects the developer's personality.
- Integrate external APIs to display real-time music activity from Spotify.
- Develop interactive sections that present favorite content in an organized and visually appealing way.
- Implement a modern, responsive design that works perfectly on all devices.
- Optimize performance and SEO to improve the personal site's visibility.
Development
The project uses Next.js as its main framework, leveraging its hybrid rendering capabilities to deliver an optimal user experience. The architecture combines Server-Side Rendering (SSR) for dynamic content and Static Site Generation (SSG) for static sections, ensuring fast load times and an excellent browsing experience. The Spotify API integration enables real-time music data display, including the currently playing song, most-listened artists, and favorite tracks across different time periods.
Characteristics
Complete Personal Profile
- Detailed information about location, education, occupation, and personal data.
- Hobbies section with visual categorization of interests and activities.
- Information about personal preferences: food, drinks, sports, and more.
- Free time management with daily activity statistics.
Spotify Music Integration
- Real-time display of the currently playing song.
- Recently played tracks history.
- Top artists and songs with period filters (1 month, 6 months, 1 year).
- Direct connection to Spotify API for updated data.
Multimedia Content Catalog
- Anime section with categories: favorites, movies, recommendations.
- Movie collection organized by categories: favorites, Disney, animated.
- TV series with classification by type: live-action, animated, k-dramas.
- Direct links to streaming platforms for each piece of content.
Video Games Section
- Catalog of favorite mobile games with download links.
- PC games collection with platform information.
- Ratings and genres for each featured video game.
Workout Routine
- Weekly training schedule with Upper/Lower/Push/Pull system.
- Daily exercise details with sets and repetitions.
- Clear visualization of training and rest days.
Themes and Localization System
- Multi-language support (Spanish/English) with dynamic switching.
- Light/dark theme system to enhance user experience.
- Persistence of user preferences in the browser.
Optimization and Performance
- Migration to Next.js to improve SEO and load times.
- Optimized images with AVIF format to reduce file size.
- Lazy loading of multimedia content to improve performance.
- Semantic HTML structure for better search engine indexing.
Gallery of pages
