Volver a Proyectos
FinalizadoNext.jsReactTypeScriptTailwind CSSGSAP2026

Portafolio Fravelz (Next.js)

Portafolio público desarrollado con Next.js 16 y React 19 para presentar proyectos, tecnologías, trayectoria y certificados. Rutas por idioma (es/en/ru/zh), componentes servidor por defecto, PDFs de certificación en modal, tema claro/oscuro/auto sincronizado con cookie y localStorage, y modal de búsqueda enlazando proyectos y páginas estáticas.

Ver DemoVer Código

Capturas del Proyecto

Portafolio Fravelz (Next.js) — vista previa

1 / 7

Qué aprendí

  • App Router con `[lang]` e implementación para manejo de diferentes idiomas
  • Separar datos de proyectos en módulos reutilizables y utilidades (`getProjectBySlug`)
  • Tema antes del primer paint: script inline + cookies alineadas con `ToggleTheme`
  • Visualizador de PDF y buscador accesibles (roles, Escape, foco)

Información extra

  • El portafolio fue creado inicialmente en Astro esa version esta guardada en una rama de github como `archive/astro`.
  • Es el portafolio con mayor documentación extensa he implementado actualmente (implementando con ayuda de diversas herramientas como Markdownlint, Markdown All in One, Code Spell Checker, y herramientas de ia).
  • maximo 120 caracteres por linea de codigo, maximo 200 lineas de codigo por archivo, ademas utilizando prettier+eslint
  • Estructura del codigo inspirada en feature-based architecture

Detalles Técnicos

  • •Next.js 16 (App Router), React 19, TypeScript
  • •Tailwind CSS 4 — tokens `rgb(var(--color-*))` en `globals.css`
  • •GSAP para animaciones puntuales (p. ej. en la página 404)
  • •i18n: JSON en `public/locals/` + hidratación servidor + actualización y rellenado del cliente (`public/i18n.js`, y relleno de datos con el atributo `data-i18n` para el cliente)