3D that gets you hired: balancing Three.js, SEO, and performance in this portfolio
The challenge of a real WebGL portfolio: impress without killing LCP on mobile, without disappearing from Google, and without becoming just a pretty canvas.
I could have shipped an elegant static portfolio. Instead I wanted an artifact that shows the same kind of decisions I make in product work: visual presence versus performance budget, content versus effect, engineering ego versus what a recruiter (and a crawler) actually need.
This site — Next.js, React Three Fiber, PT/EN i18n, detailed case pages, and Cloudflare Workers deploy — is the public lab for those tradeoffs.
The problem is not “adding 3D”. It is not lying on first paint
Three.js gets attention. It is also easy to destroy INP/LCP on a mid-range phone if every section opens its own WebGL context, if background stars compete with LCP, or if useful HTML only appears after JavaScript.
The rule I used: the first viewport must explain who I am in real HTML. 3D is reinforcement, not the only source of meaning. Crawlers and humans on bad networks still deserve the story.
Concrete decisions I would defend in code review
Heavy canvases load via dynamic import with SSR off where it matters. Starfield background only on desktop and only after idle (requestIdleCallback) — mobile should not pay for decorative sky.
For tech spheres, one shared Canvas with drei Views instead of N WebGL contexts. Less GPU, less battery drama, more predictable framing.
SEO is not a plugin at the end: per-locale metadata, `/pt` and `/en` routes, hreflang, Open Graph, sitemap, JSON-LD, and project pages with case narrative — because LinkedIn shares and Googlebot will not run your GLTF scene.
Content as career performance
Web performance without substance is a benchmark. The other axis of this project was turning industrial experience (governance, control tower, SaaS) and public work (Flutter, this monorepo) into pages a recruiter can read in three minutes — with what can be public and what stays out of respect for NDAs.
In other words: 3D opens the door; writing and information architecture get you the interview.
Stack and delivery
Next.js 16 (App Router), React 19, TypeScript, Tailwind, Framer Motion, Three.js/R3F, i18next, OpenNext + Cloudflare Workers. Server-side contact form. CI with lint and type-check.
The point is not the library list. It is showing I can cross advanced front-end work, Core Web Vitals care, and product/SEO discipline in one deliverable — the same balance that shows up when the “customer” is an industrial operation, except here the deploy is public.