Creative Developer · Frontend & UX/UI
Cali, Colombia
I build interactive web experiences with React, Next.js and Three.js, and I design them too — research, interface and motion are one conversation rather than a handoff.
Four years of production work: 3D and WebGL scenes driven by GSAP and scroll, Shopify Hydrogen storefronts, FastAPI backends. I taught interface and interaction design at ICESI University, which is where I learned to defend a decision rather than only implement it.
My work runs on transparent communication, well-defined scope, and a process that ships.
| Project | What it is | Built with |
|---|---|---|
| Hey Peer | An interactive site set inside a 3D world | Next.js · Three.js · WebGL · GSAP |
| INFINI | Storefront built end to end — payment gateway, catalogue, animation | Shopify Hydrogen · Oxygen · React |
| Mimir | Marketing site for a learning app, carried by hand-drawn illustration | Astro · GSAP · 2D illustration |
| Makata Studio | Studio site with custom React embedded for the 3D scenes | Framer · React · Three.js · WebGL |
| davidgarciam.com | My portfolio — a wireframe sculpture that reacts to the pointer | Next.js 16 · Three.js · GSAP · Lenis |
I don't use AI coding tools occasionally — they're how I work. What follows is the part most stacks leave out.
Context engineering over prompting. My projects carry a CLAUDE.md stating the rules an agent has to respect: where content lives, which module registers the animation plugins, which patterns have already been tried and rejected and why. A written constraint costs one line and saves an afternoon of an agent rediscovering it.
Agents that verify, not just generate. Generated code is a proposal, not a result. I have agents drive a real browser to measure what they built — scroll positions, layout shifts, Lighthouse scores — and I read the numbers before I read the diff. Most of the bugs I have caught this year were found by measuring, not by looking.
Design and build in one loop. Figma for the thinking, agents for the scaffolding, then hand work where craft actually decides the outcome. The pipeline compresses the boring middle so the time goes into typography, motion and the decisions a tool cannot make for you.
MCP servers to give agents real access — the design file, the deployment, the repo — instead of pasting context back and forth.
Worth knowing: my portfolio was built this way end to end, commit history included.
- Frontend — React · Next.js · TypeScript · Astro · Tailwind CSS
- Interactive & 3D — Three.js · WebGL · GSAP · Framer Motion · Lenis · Blender / C4D
- Design — Figma · Illustrator · After Effects · UX/UI research
- Backend & platform — FastAPI · Shopify Hydrogen · AWS · Vercel · Oxygen · Render
- AI workflow — Claude Code · MCP servers · context engineering · agentic development
Interactive Frontend Developer at Makata Studio, and finishing an Interactive Media Design degree at ICESI University.
Open to freelance and to studios doing motion-led, interactive work — remote, from UTC−5.
Away from the screen I'm probably training, running, or playing something :)