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

Frontend engineer fluent in React, TS & the platform.

— Expertise

Three years shipping accessible, performant interfaces in React, TypeScript, Next.js and Sitecore AI CMS. Deep on the web platform, design systems and the small details that make UI feel inevitable.

See my expertise 04 areas of practice Say hello andresgarcia17@icloud.com
§ A — About

Three 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 Sitecore, Next.js or Astro. Off-hours that means experimenting with view-transitions, scroll-driven animations, and any CSS feature that ships in Chrome that month.

  • Born1997 · Quito, EC
  • Years building3+ in production
  • EducationB.S. Software Eng.
  • Lighthouse avg.98 / 100
  • LanguagesES (native) · EN (C1)
  • 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 AI CMS, 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 AI CMS
    • 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
— Under NDA

Production work spans fintech, healthtech and enterprise SaaS. I can’t share screenshots, but I’m happy to walk through architectures, trade-offs and metrics in conversation.

§ D — 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.

§ E — Stack

The kit I reach for first.

ToolSinceConfidenceNotes
React 2020 96 Hooks, suspense, server components. Ship-it daily.
TypeScript 2021 92 Strict mode default. Generics, narrowing, branded types.
Next.js 2022 90 App router, ISR, edge runtime, partial prerender.
Sitecore 2023 86 XM Cloud + Next.js head. JSS, content hub, AI tooling.
Astro 2023 82 Content sites, islands, view transitions.
Tailwind 2021 94 Design-token first. Custom plugins when needed.
Motion / GSAP 2022 84 Scroll-driven, view-transitions, prefers-reduced-motion.
Accessibility 2021 90 WCAG 2.2 AA, axe DevTools, manual SR passes.
§ F — Right now

Currently on the desk.

— Building

Sitecore AI CMS + Next.js 16

A multi-region marketing platform for a fintech. Personalization, AI-assisted content, sub-second TTFB.

— Learning

Scroll-driven animations

Replacing JS scroll listeners with native animation-timeline: scroll(). Almost there in stable.

— Reading

Refactoring UI

Wathan & Schoger. Re-reading the chapter on visual hierarchy for the third time, no shame.

— Listening

Fred again..

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

§ G — Contact

Say hi. Always open to a good conversation.

— Email andresgarcia17@icloud.com — LinkedIn /in/renanandresgarcia — GitHub /rengarcia — Read.cv /rengarcia
03 — Project type