Back to Projects
Finished
Completed
Next.jsReactTypeScriptTailwind CSSGSAP2026Fravelz Portfolio (Next.js)
Portfolio where I show projects, stack, timeline, and certificates. Locale routes, a horizontal-scroll home, project detail with a carousel, PDFs in a modal, light/dark/auto theme (cookie + localStorage), and search that links projects and pages. Started in Astro (archive/astro branch) and now runs on Next.js 16 + React 19.
Project Screenshots
1 / 7
What I learned
- App Router with `[lang]` and per-page, per-locale metadata
- Project data in modules + `getProjectBySlug` without a CMS
- Theme before first paint: inline script aligned with `ToggleTheme`
- Keyboard-usable PDF modal and search (focus, Escape, roles)
- Tab navigation across the horizontal home, grids, and modals
Extra information
- The initial Astro version lives on the `archive/astro` branch.
- Dense docs with Markdownlint, Markdown All in One, and Code Spell Checker.
- Style limits: ~120 chars per line, ~200 lines per file, Prettier + ESLint.
- Code grouped by features (home, projects, about-me, …).
Technical Details
- •Next.js 16 (App Router), React 19, TypeScript
- •Tailwind CSS 4 — `rgb(var(--color-*))` tokens in `globals.css`
- •GSAP for targeted animations (e.g. 404)
- •i18n: JSON under `public/locals/` and server `getTranslations` on `/[lang]/` routes