zeRET / фронтенд-разработчик

Привет,я Кирилл.

Делаю сайты и веб-приложения на React и Next.js. Люблю разбираться, как всё устроено, собирать удобные интерфейсы и возиться с анимацией.

Что я делаю Связаться

03 / CSS

.interface {
  display: grid;
  gap: 1rem;
  perspective: 1200px;
}

⌘ zeret.pw / playground

Маленький рабочий мир↗

Из идеи — в интерфейс._

React Next.js CSS● live

Наведи курсор — управление твоё · нажми, чтобы исследовать

Можно обсудить проект

Листай — всё сложится ↓

01 — 03Что я делаю

Один интерфейс. Много деталей.

Сцена выше складывается из того, с чем мне нравится работать: полезных сервисов, общих компонентов и продуманного движения.

Удобные интерфейсы

Личные кабинеты, дашборды, рабочие инструменты. Мне интересно превращать сложную логику в интерфейс, в котором человек может спокойно разобраться и сделать своё дело.

React
Next.js
Доступность

Общие компоненты

Когда одна и та же кнопка нужна в десяти местах, хочется менять её один раз. Собираю общие компоненты, чтобы страницы оставались согласованными, а правки занимали меньше времени.

TypeScript
Дизайн-системы
Storybook

Осмысленное движение

Нравится оживлять интерфейс: пробовать переходы, работать с движением и 3D. Главное — вовремя остановиться, пока обычный скролл не превратился в аттракцион.

GSAP
Three.js
Веб-платформа

От отдельных деталей — к цельному опыту.Как я работаю

Как я работаю

От задачи к интерфейсу.

Сначала разбираюсь, что нужно сделать человеку. Потом собираю экран и проверяю, как он ведёт себя в работе. По пути обычно находится что упростить.

Разобраться в задаче

Что человек хочет сделать?

Начинаю с вопросов: зачем нужен этот экран, откуда берутся данные и что с ними можно делать. Когда это понятно, проще решить, какие компоненты понадобятся.

Задача пользователя
Данные и действия
Структура компонентов

Интерактивный пример01 / Каркас

Заголовок + прогресс

Перед запуском

— / —

Элемент списка / 01

Элемент списка / 02

Элемент списка / 03

Отклик на действие

Сначала содержание. Оформление — потом.

Начинаю с задачи: увидеть, что осталось, и отметить сделанное. Из этого складывается структура экрана.

Что остаётся в коде

Код, к которому можно вернуться.

Интерфейс будет меняться: появятся новые поля, страницы и требования. Стараюсь писать так, чтобы следующую правку было легко внести — мне или другому разработчику.

Выбери принцип

cart.tsДо правки

Работаю...

01function calc(a: number[]) {
02  const x = a.reduce((s, n) => s + n, 0)
03  return x
04}
05 
06const data = [120, 80, 40]
07const result = calc(data)

Сначала приходится угадывать, что делает calc.

По названию должно быть понятно, что делает функция и что хранится в переменной. Оставляю меньше поводов ходить по файлам в поисках объяснения.