Frontend engineer fluent in React,
TS
& the platform.
Four years shipping accessible, performant interfaces with React and TypeScript — across Next.js, Astro and enterprise CMS platforms. Grounded in the web platform, design systems and the small details that make UI feel inevitable.
Four years of caring about the small things — focus states, keystroke latency, and the gap between a designer’s file and the live DOM.
I’m Renan Garcia, a frontend engineer working out of Quito, Ecuador. I help product and design teams turn complicated specs into interfaces that feel inevitable — fast to load, easy to operate, friendly to assistive tech.
Day-to-day that means React + TypeScript on top of Next.js, Astro and Core Web Vitals. Off-hours that means experimenting with performance, animation and state management, and any other technology that ships in Chrome that month.
- Born1997 · Quito, EC
- Years building4+ in production
- EducationB.S. Software Eng.
- Lighthouse avg.98 / 100
- LanguagesES (native) · EN (B2)
- Coffee/day2.4 — measured
What I bring to every codebase.
- 01
Calm over clever.
Interfaces should disappear into the task. Animation has a job. Colors earn their place. If something feels loud, it’s usually wrong — or it’s deliberately the one moment that should sing.
- 02
Accessibility is the brief.
I write to WCAG 2.2 AA as a floor, not a ceiling. Keyboard reachability, focus visibility, semantic landmarks, reduced-motion variants — table stakes before pixel pushing begins.
- 03
Perf is a feature.
Every animation is profiled. Every image is sized. Every JS bundle has a budget. The fastest UI is the one that’s already painted before the user expected it.
Four areas I’ve gone deep.
My day job is at an agency, so finished work sits behind NDAs. What I can share is the shape of the expertise itself — the patterns, tools and trade-offs I’ve internalized.
- 01
Modern React architecture.
Component composition, state colocation, server components, suspense boundaries, data-fetching patterns. I write React the way React wants to be written — and know when to break the rules on purpose.
- 02
Headless enterprise CMS.
Sitecore, JSS, content modeling, multi-region marketing platforms. I know where the abstractions leak and how to make a head feel native on top of an enterprise CMS.
- 03
Performance & accessibility.
Core Web Vitals, INP, hydration costs, image pipelines. WCAG 2.2 AA as a floor, manual screen-reader passes as a habit. I treat both as features, not afterthoughts.
- 04
Design systems & tokens.
Token-first component libraries, theming primitives, headless patterns, the connective tissue between Figma and production. The kind of work that pays back ten engagements later.
Recent client work.
A selection of engagements from the last three years — enterprise builds and redesigns across Sitecore, Optimizely and Webflow, with ongoing front-end optimization.
Cognex
Multi-phase redesign of cognex.com and support.cognex.com, with direct involvement across the build.
Sitecore (Typescript)Alexion
Redesign and build of the new Global, US and country sites, staffed on the front-end build team.
Optimizely (Typescript)University of Redlands
Front-end build of the university's site on the Optimizely platform.
Sitecore (Javascript)Southeast Toyota Finance
Continuous optimization and new feature work, including auto-finance prequalification flows.
Optimizely (Typescript)ChildFund
Front-end build on the Optimizely platform across the donor and sponsorship experience.
WebflowSundance Spas
Design-and-build collaboration with custom front-end on the Sundance Webflow experience.
Sitecore (Next.js)Western Health Advantage
Design and front-end build of the new redesign of entire site, using Sitecore and React.
How I actually work.
- → 01 Read
Read
Before I write a line, I read the codebase, the design files and the metrics. Patterns first, opinions second.
- → 02 Frame
Frame
Constraints before code: perf budget, browser matrix, a11y floor, naming conventions. The boring decisions made once, so the interesting ones can stay interesting.
- → 03 Build
Build
Small PRs, candid changelogs, no surprise scope. Each commit ships with a benchmark, a screenshot diff and an accessibility note.
- → 04 Polish
Polish
The last 10% is the part that matters: focus states, transitions, error copy, empty states. Where craft compounds.
The kit I reach for first.
Currently on the desk.
Reusable component systems
Design systems in TypeScript + React, wired to Node.js REST & GraphQL APIs. Shared across client projects, consistent and maintainable at scale.
AI-assisted engineering
Weaving new AI tools into the everyday workflow and championing them across the team — better ways to build, faster and with less friction.
Accessible, fast interfaces
WCAG-aligned, semantic HTML with performance budgets in mind. Inclusive UI patterns that hold up under real production traffic.
Fred again..
The Actual Life trilogy on loop. Vocal samples and chopped textures — somehow the right tempo for a long refactor.