Ir para o conteúdo

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

const flash = document.getElementById('flash');
let x = innerWidth * .5, y = innerHeight * .38;
let tx = x, ty = y;

const loop = () => {
  x += (tx - x) * .14;
  y += (ty - y) * .14;
  flash.style.setProperty('--mx', x + 'px');
  flash.style.setProperty('--my', y + 'px');
  requestAnimationFrame(loop);
};

addEventListener('pointermove', e => {
  tx = e.clientX;
  ty = e.clientY;
}, { passive: true });

// sem ponteiro fino, a luz desce com a pagina
addEventListener('scroll', () => {
  if (matchMedia('(pointer: fine)').matches) return;
  const max = docEl.scrollHeight - innerHeight;
  ty = innerHeight * (.2 + (scrollY / max) * .6);
}, { passive: true });

requestAnimationFrame(loop);

Construosoftware parao mundo real.

Do código à produção: construo experiências web e mobile que chegam às mãos de quem usa.

Ver trabalho Falar comigo

Sobre Mim

Brasil

Trabalho em produto que já nasceu grande: código meu roda em apps de farmácia, de escola, de banco digital e de saúde.

Meu território é React Native e React com TypeScript, da arquitetura à entrega, passando por code review, BFF, GraphQL e a parte chata que ninguém posta no LinkedIn: teste, build quebrado e bug em produção às seis da tarde.

Gosto de interface bem resolvida e de decisão técnica que alguém consegue defender seis meses depois. Escrevo pensando em quem vai manter.

Retrato de Erika Lopes

Skills

01 / 07

01Desenvolvimento de interfaces web com React e Next.js
02Desenvolvimento de aplicações mobile com React Native
03TypeScript aplicado a código escalável e tipado com segurança
04Arquitetura de componentes e design systems reutilizáveis
05Integração com APIs REST e GraphQL (BFF)
06Foco em performance, acessibilidade e experiência do usuário
07Testes automatizados (unitários e e2e) e qualidade de código

Contribuições

00 / 05

RD Saúde: Apps Drogasil & Droga Raia

RD Saúde: Apps Drogasil & Droga Raia

Time CORE dos apps da Drogasil e da Droga Raia, em funcionalidades críticas para conversão e experiência do usuário.

React Native, TypeScript, GraphQL, Node.js (BFF), MVVM, SOLID

App Store Google Play

01 / 05

Agenda Edu e Agenda Edu - Equipe Escolar

Agenda Edu e Agenda Edu - Equipe Escolar

Três frentes ao mesmo tempo: app do aluno, app da escola e a biblioteca de componentes.

React Native, TypeScript, Jest, Storybook, Component Library, Testes Automatizados

App Store Google Play

02 / 05

Plataforma Repassa - Backoffice

Plataforma Repassa - Backoffice

Um backoffice em Next.js que aposentou a planilha.

React, Next.js, TypeScript, Tailwind CSS, SCSS, NextAuth, Keycloak

03 / 05

Sewa Kenko: Plataforma de Saúde Digital

Sewa Kenko: Plataforma de Saúde Digital

Site institucional e app Android de uma plataforma de saúde digital.

React, React Native, JavaScript, TypeScript, APIs REST, Web & Mobile Integration

Google Play Site

04 / 05

Martins Gestão de Força de Vendas

Martins Gestão de Força de Vendas

App interno de força de vendas em React Native e TypeScript.

React Native, TypeScript, Redux, Context API, Jest, CI/CD, Azure DevOps

App Store Google Play

05 / 05

Conta Simples: App

Conta Simples: App

Microfrontends aplicados ao mobile, que é onde a ideia fica difícil.

React Native, Expo, TypeScript, Microfrontends, Componentização, Design System

App Store Google Play

Tecnologias

Ferramentas e tecnologias que utilizo no desenvolvimento

Frontend: React
Next.js
TypeScript
JavaScript (ES6+)
Styled Components
Tailwind CSS
SCSS / SASS
HTML5
CSS3
Design Systems
Mobile: React Native
Expo
TypeScript (Mobile)
Mobile Performance
Backend / APIs: Node.js (BFF)
GraphQL
REST APIs
Ferramentas: Git
Redux
Context API
Zustand
Axios
Storybook
Jest
Maestro
CI/CD (Azure DevOps)
Vite
NPM
Yarn
Figma

Contato

Vamos trabalhar juntos?

Direto

EmailAbrir contato

caluerika@gmail.com

WhatsAppAbrir contato

+55 88 92193-5000

LinkedInerika-lopes-calu
GitHubxterikatx

V1.0 REV.A

iniciando erika.lopes

idioma pt-BR

montando interface

pronto