Interfaces for systems that think.
I'm Gabriel, a frontend engineer in Tampa, Florida. I build the screens that sit in front of inference fleets, agents, and the people who run them. Below are five working products, every one responsive down to a phone.
Open the workFive products
5 demos- Mara©2025
Personal site for an independent designer
Next.jsNested routesWeb AudioCanvas - Kestrel Global2025
Corporate site for an asset advisory group
Next.jsGenerative SVGSite searchLive timers - Coutumes2024
Shop for a men's jewelry label, with a pendant builder
Next.jsNested routesVariable fontsCart state - Atelier2024
Landing page for an intelligent drafting canvas
Next.jsHand-drawn SVGPointer events - Redis Cache2023
A managed cache, made easy
Next.jsTailwindCommand parser
What I do
Four kinds of work, one standard: it has to hold up on a phone, on a keyboard, and under load.
- 01
Product interfaces
Dashboards, editors, consoles. The screens people keep open all day, built to stay fast when the data gets big.
- 02
Interfaces for AI systems
Streaming output, tool calls, agent state. UI that shows what the model is doing without pretending to know more than it does.
- 03
Design systems
Tokens, primitives, and the documentation that gets a team to actually use them. Tailwind first, no component library required.
- 04
Performance and accessibility
Budgets for bundle size and interaction latency, a keyboard path for every pointer path, and motion that switches off on request.
Under the hood
What the demos are built with, and which one to open if you want to see it working.
Next.js App Router
Nested routes and layouts run the five-page Mara site, the Coutumes shop, and the twelve-page Kestrel Global site with its dynamic segments.
React 19 and TypeScript
Derived state over stored state: a cart, a pendant builder, a board, with no state library anywhere on this site.
Tailwind CSS v4
Theme tokens declared in CSS, a handful of custom utilities, no config file.
Hand-drawn SVG
Jewelry, a campaign landscape, a studio scene, a drafting canvas and an aerial city written as markup, so they stay sharp at any size and weigh nothing.
Canvas and Web Audio
Cursor-following work previews and an ambient audio toggle, straight from the platform APIs.
Seeded generators
The Kestrel hero draws its own city — blocks, parks and traffic from a seeded PRNG, so the server and the browser render the same picture.
Parsers and timers
A redis-cli in the browser: a tokenizer, a command table, and TTL eviction on a tick.
Variable fonts
A serif whose weight follows the cursor letter by letter, and a type tester with live axes.
CSS transitions
A billing toggle, FAQ marks that turn, and a header that goes solid the moment you scroll.
How I work
I came to frontend from infrastructure — RAG pipelines, inference servers, agent runtimes. That background shows up in the interfaces: they respect latency budgets, they handle streaming state without flicker, and they assume the data will arrive late and out of order.
Every demo here is built with Next.js and Tailwind, no component library, and no third-party chart or drag-and-drop package. The point is to show what I can do with the platform itself.
I care about the quiet parts: keyboard focus that is visible, motion that turns off when you ask it to, and layouts that hold together at 320px.
How a project runs
4 steps- 01
Read the system
Before any UI, I learn what the backend actually returns, how late, and in what order. The interface is designed around that, not around a mockup.
- 02
Prototype in the browser
Real components and real data shapes from day one. A prototype that runs is worth more than a deck.
- 03
Build the boring parts well
Loading, empty, error, and offline states. Focus management. Keyboard paths. These are the work, not the polish.
- 04
Ship, measure, trim
Interaction latency and bundle size get tracked, not guessed. Anything that does not earn its bytes goes.
Have a screen that needs building?
- Based in
- Tampa, Florida
- Looking for
- Frontend and product engineering roles