Portafolio en Next.js

Resumen del proyecto

  • Funciones: Programador
  • Tamaño del equipo: Desarrollo individual
  • Estado: Lanzado

🧠 Contribuciones técnicas

Amplié y personalicé una plantilla gratuita de portafolio para crear un sitio moderno y adaptable con Next.js App Router, React, TypeScript, MDX y TailwindCSS. Presenta trabajo profesional en desarrollo de videojuegos mediante una exploración interactiva de proyectos, narrativas detalladas y una identidad visual consistente.

El contenido localizado, la navegación por idioma y el SEO internacional permiten consultar el portafolio en distintos idiomas. Su arquitectura facilita incorporar nuevos idiomas y mantiene consistentes los datos de los proyectos y su presentación.

🛠️ Lo que desarrollé

  • Exploración de proyectos: Creé filtros por categoría, una ordenación por prioridades y paginación para que los visitantes encuentren rápidamente los trabajos relevantes.

  • Tarjetas de proyectos interactivas: Añadí tarjetas adaptables con previsualizaciones de video al pasar el cursor y galerías de imágenes y videos específicas para cada proyecto, con interacciones en ventanas modales.

  • Contenido de proyectos fácil de mantener: Organicé por separado los datos compartidos, el contenido editorial localizado y las narrativas MDX para facilitar las actualizaciones y evitar información duplicada.

  • Arquitectura con Next.js App Router: Separé la carga del contenido de la presentación interactiva con React y TypeScript, utilizando el App Router para mantener URLs estables y páginas de detalle renderizadas de forma estática.

  • Diseño adaptable y temas: Utilicé Tailwind CSS para crear diseños adaptables consistentes y controles de tema que conservan las preferencias del visitante.

  • Opciones de contacto: Integré un formulario con validación de entradas y mensajes localizados, junto con enlaces directos de correo electrónico y redes sociales.

  • SEO y contenido para compartir: Creé metadatos específicos por página, URLs canónicas, versiones alternativas por idioma y un sitemap, con información consistente para compartir mediante Open Graph y Twitter.

  • Arquitectura multilingüe: Integré next-intl para localizar las etiquetas de interfaz y el contenido de los proyectos y ofrecer navegación por idioma, con una estructura que permite incorporar nuevos idiomas.

🤝 Cómo contribuí

  • Amplié y personalicé una plantilla de forma independiente para reflejar mi identidad profesional y mostrar mi trabajo.
  • Diseñé una arquitectura fácil de mantener que separa claramente los datos de los proyectos, las narrativas editoriales, la presentación y la lógica de la aplicación.
  • Integré la navegación interactiva, la entrega de contenido localizado y el SEO en una experiencia de portafolio coherente.

🧩 Desafíos y soluciones

🌍 Desafío: Contenido multilingüe consistente

Los datos de los proyectos y los enlaces públicos deben mantenerse consistentes mientras el texto editorial y las etiquetas de interfaz cambian según el idioma.

✔ Solución: Separé los datos compartidos de las narrativas y etiquetas localizadas para que el contenido pueda evolucionar sin duplicar información ni cambiar las URLs establecidas.

🛠️ Desafío: Contenido detallado y presentación interactiva

Las narrativas necesitan un formato flexible, mientras que las galerías y los controles de navegación requieren interacciones ágiles.

✔ Solución: Rendericé MDX mediante límites reutilizables de contenido en el servidor y mantuve la presentación interactiva en componentes de cliente especializados.

🌟 Funcionalidades destacadas

🎯 Galería de proyectos con filtros

Los visitantes pueden filtrar proyectos por categoría y explorar los trabajos priorizados mediante una galería clara y enfocada.

🎥 Previsualizaciones de video al pasar el cursor

Las previsualizaciones ofrecen una vista rápida e interactiva de cada proyecto antes de abrir su narrativa completa.