Keeping client-side JavaScript small
Removing a large 3D library from a portfolio, and deciding which interactions deserve a place.
- Published
- Reading
- 1 minutes
- Topics
- Performance, React
Bring your cursor closer; Uslu will join you.
The first version of this site included a 3D keyboard, a jumping character and cards that tilted towards the pointer. Those effects also sent a substantial amount of Three.js code to every visitor.
What can go?
A 3D scene, a globe or an endlessly scrolling technology strip should earn its place. Decorative effects have a cost: downloads, parsing and time on the main thread.
Keep interactions isolated
Small interactive components can stay on the client while the surrounding content is generated as HTML. The current site keeps its theme switch, mascot and useful controls, with CSS and a small animation loop doing most of the movement.
"use client";
export function ThemeToggle() { /* ... */ }The result
Faster loading and quieter pages make the work easier to see. A portfolio should communicate what you build; its effects should help that story.