Volver a Proyectos
Finalizado
Terminado
Next.jsReactTypeScriptTailwind CSSGSAP2026

Portafolio Fravelz (Next.js)

Portafolio donde presento proyectos, stack, trayectoria y certificados. Rutas por idioma, home con scroll horizontal, detalle de proyecto con carrusel, PDFs en modal, tema claro/oscuro/auto (cookie + localStorage) y buscador que enlaza proyectos y páginas. Empezó en Astro (rama archive/astro) y hoy corre en Next.js 16 + React 19.

Ver DemoVer Código

Capturas del Proyecto

Portafolio Fravelz (Next.js) — vista previa

1 / 7

Qué aprendí

  • App Router con `[lang]` y metadata distinta por página e idioma
  • Datos de proyectos en módulos + `getProjectBySlug` sin un CMS
  • Tema antes del primer paint: script inline alineado con `ToggleTheme`
  • Modal de PDF y buscador usables con teclado (foco, Escape, roles)
  • Navegación por Tab en home horizontal, grids y modales

Información extra

  • La versión Astro inicial está en la rama `archive/astro`.
  • Documentación densa con Markdownlint, Markdown All in One y Code Spell Checker.
  • Límites de estilo: ~120 caracteres por línea, ~200 líneas por archivo, Prettier + ESLint.
  • Estructura del código agrupada por features (home, projects, about-me, …).

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/` + rutas `/[lang]/` con `getTranslations` en servidor