Skip to main content
Renan Andrés Garcia — Portfolio · 2026
— : — : — Quito · GMT-5

Frontend engineer fluent in React, TS & the platform.

— Expertise

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.

§ A — About

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
§ B — Principles

What I bring to every codebase.

  1. 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.

    Ratio — 1 : ∞
  2. 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.

    Floor — WCAG 2.2 AA
  3. 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.

    Budget — 50 KB JS
§ C — Expertise

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.

  1. 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.

    • React 18 / 19
    • Next.js App Router
    • TypeScript (strict)
    • Server Components
    • Suspense
    • Tailwind
    Depth — 5+ years
  2. 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.

    • Sitecore
    • JSS
    • Contentful
    • Sanity
    • Content modeling
    • Personalization
    Depth — 3+ years
  3. 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.

    • Lighthouse
    • Core Web Vitals
    • axe DevTools
    • WCAG 2.2 AA
    • NVDA / VoiceOver
    • Reduced motion
    Depth — 4+ years
  4. 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.

    • Design tokens
    • Radix · Ark
    • Storybook
    • Figma variables
    • Theming
    • Headless UI
    Depth — 3+ years
§ E — Process

How I actually work.

  1. → 01 Read

    Read

    Before I write a line, I read the codebase, the design files and the metrics. Patterns first, opinions second.

  2. → 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.

  3. → 03 Build

    Build

    Small PRs, candid changelogs, no surprise scope. Each commit ships with a benchmark, a screenshot diff and an accessibility note.

  4. → 04 Polish

    Polish

    The last 10% is the part that matters: focus states, transitions, error copy, empty states. Where craft compounds.

§ F — Stack

The kit I reach for first.

ToolSinceConfidenceNotes
React 2020 96 Hooks, suspense, server components. Ship-it daily.
TypeScript / JavaScript 2021 92 Strict mode default. Generics, narrowing, modern ES.
Next.js 2022 90 App router, ISR, edge runtime, partial prerender.
Astro 2023 82 Content sites, islands, view transitions.
HTML, CSS & SASS 2020 94 Semantic HTML5, modern CSS layouts, SASS architecture.
Tailwind 2021 94 Design-token first. Custom plugins when needed.
Node.js 2022 85 Backend services, REST & GraphQL APIs, real-time WebSockets.
Sitecore 2023 86 XM Cloud + Next.js head. JSS, content hub, AI tooling.
Webflow 2024 80 Design-and-build with custom code and CMS collections.
CMS-oriented development 2023 84 Platform-agnostic component builds mapped onto CMS content models.
Motion / GSAP 2022 84 Scroll-driven, view-transitions, prefers-reduced-motion.
Accessibility 2021 90 WCAG 2.2 AA, semantic HTML, axe DevTools, manual SR passes.
§ G — Right now

Currently on the desk.

— Building

Reusable component systems

Design systems in TypeScript + React, wired to Node.js REST & GraphQL APIs. Shared across client projects, consistent and maintainable at scale.

— Exploring

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.

— Sharpening

Accessible, fast interfaces

WCAG-aligned, semantic HTML with performance budgets in mind. Inclusive UI patterns that hold up under real production traffic.

— Listening

Fred again..

The Actual Life trilogy on loop. Vocal samples and chopped textures — somehow the right tempo for a long refactor.

§ H — Contact

Say hi. Always open to a good conversation.

03 — Project type