A 3D portfolio that still passes Core Web Vitals
This website is its own case study: a Three.js scroll story that stays fast and indexable. All text is statically rendered to HTML, the 3D scene loads later, and there is a light mode for weak GPUs and for people who prefer reduced motion.
Stack
Built with
Click each tool to see what it does
Vite The build tool that outputs static HTML and small JavaScript bundles.
TypeScript Typed JavaScript, so the interaction and 3D code is safer.
Three.js The WebGL library behind every 3D scene, loaded only as it nears the screen.
GSAP Smooth scroll and text animation.
Lenis Smooth scrolling that still respects the visitor’s own scroll.
Case study
From problem to result
-
01
Problem
3D portfolios are usually heavy: key text hides inside a canvas, large JavaScript delays content, and mid-range phones stutter. For an SEO developer, a slow or unindexed portfolio undermines credibility right away.
-
02
Audit
Targets were set before coding: LCP ≤ 2.5 s on 4G, initial download ≤ 2.5 MB, ≥ 30 fps on mid-range phones, Lighthouse SEO ≥ 95 and Performance ≥ 85 on mobile.
-
03
Implementation
Every page is statically rendered from a single content.json file. Three.js loads as a separate chunk after content is visible. One particle system shaped like a link graph morphs into a career-route globe, with no large models or textures. Person, ProfilePage, Article and BreadcrumbList structured data match the visible text. There is Indonesian/English hreflang, a sitemap, and a robots.txt that manages AI crawlers.
Pixel ratio is capped, rendering stops when the tab is hidden, and particle count drops automatically if fps stays under 30 for 2 seconds. Without WebGL, or with prefers-reduced-motion, the content stays complete.
-
04
Result
Lighthouse scores are measured automatically from PageSpeed Insights on every deploy and shown in the Skills section, so anyone can verify them.
Before/after data not added yet.
Want a site like this?
Tell Mas Toro what you need: design, development and the SEO, all handled.