RBT.STUDIO — The portfolio as a statement of intent
When the product is you · Portfolio · Digital identity · Creative Dev
- Client
- Own product — rbt-studio.com
- Role
- Design, development and art direction
- Timeline
- Ongoing
- Stack
- React, Vite, Canvas API, GSAP, Generative art, Tailwind
A portfolio is not a CV with CSS. It is the most complete argument you can make about who you are as a professional. rbt.studio was designed from a visual arts foundation — a Fine Arts background that informs every technical decision. A particle field in the hero, a generative Lissajous canvas, a dark palette with gold and sage accents. The code is the design.
The problem: Positioning at the intersection of AI engineer and creative dev
A standard developer portfolio doesn’t communicate the creative dimension. A designer portfolio doesn’t communicate technical depth. Ricard’s profile lives exactly at that intersection — and the portfolio has to prove it without explaining it. If you have to explain that you’re creative, you’ve already lost.
layers of the visual system: Identity — dark / teal / cream → DM Sans + JetBrains Mono → Hero particle field — Canvas 2D → Lissajous canvas — parametric → Work cases — editorial grid → Stack (AI · Frontend · Systems)
Solution: The code itself as a portfolio piece
The generative canvas isn’t decoration — it’s the first proof that the author understands complex visual systems. The hero’s particle field responds to the cursor with attraction physics. The Lissajous canvas draws Bowditch figures in real time. A technical recruiter opens it in DevTools and sees the code. A design recruiter sees the result.
Product decisions
- my role: Identity design · Frontend · Generative art · Motion
- context: 10+ years of full-stack experience. A Fine Arts background (University of Barcelona). The portfolio has to show both worlds at once — technical and creative.
- key aesthetic decision: A dark/cream palette with teal as the primary accent. No generic brand colours. DM Sans for display — a sans that crosses the editorial with the technical.
- technical differentiator: A generative Lissajous canvas — a parametric figure that varies in real time. A particle field in the hero with attraction physics. All rendered in Canvas 2D with no external libraries.
Results
- 10+ — years of experience condensed into a single page
- 0 — external libraries for the generative effects
- 2 — profiles in one — AI engineer and creative technologist
"Technical depth from 10+ years of full stack engineering. Creative precision from a fine arts background. The intersection is where I work."
What was learned
- The portfolio is the argument, not the summary. It doesn’t list projects — it demonstrates a point of view. The particle field isn’t decoration, it’s the first sentence of the argument: this developer understands real-time visual systems.
- Canvas 2D with no external dependencies is a deliberate decision. Three.js would have been faster. Choosing to implement the particle physics and Lissajous curves from scratch demonstrates a mathematical understanding of the system.
- The dark/cream palette communicates before a word is read. Developer portfolios tend to be white with blue. The contrast of this visual system signals from the first second that the author has an aesthetic judgement of their own.