Building rckdrigo.xyz

This site started as a simple CV and became an experiment in itself.

The particle constellation on the home screen maps my project catalog to a network of glowing nodes. Each star is a project; hover it and a panel card appears. The whole thing is a spring physics simulation running on a canvas element — connections drawn as lines, nodes drifting slightly on idle, snapping toward their resting positions.

Palette system

Seven color themes, switchable in the bottom-right corner. They persist to localStorage so your choice survives a refresh.

The themes are stored as JS objects rather than CSS variables, which makes them easy to pass through React context but requires all colored elements to use inline styles. A tradeoff worth revisiting on a larger project.

Typography

Source Code Pro for everything structural: labels, titles, navigation. Source Sans 3 for body text. The combination keeps the machine aesthetic without making long-form reading too harsh.

Stack

Next.js 15 App Router, Tailwind v4 for the handful of utility classes, no component library. The brutalist components use inline styles to stay close to the data.

The canvas animation is pure vanilla JavaScript inside a useEffect. No Three.js, no WebGL. Just 2D canvas with requestAnimationFrame and spring physics written from scratch.