Frontend-разработчик
Делаю быстрые и живые интерфейсы: от вёрстки сайтов до WebGL-анимаций и панелей управления на React.
Frontend-разработчик. Делаю сайты и спецпроекты: от адаптивной вёрстки и UI-китов до анимаций на GSAP и сцен на Three.js.
Люблю, когда интерфейс не только красивый, но и надёжный: доступность, производительность, тесты и документация — часть работы, а не «если останется время».
2024 — сейчас
Frontend-разработчик
Чем пользуюсь каждый день
Код закрыт договором о неразглашении — показываю, что за проект и что делал я.
Разделы и блоки сайта, таблицы, баннеры, адаптив.
Поиск по сайту, баннеры, статьи, уведомление о cookies.
«Искусство быть врачом»: плавные переходы между страницами, видео-слайдеры, календарь событий, формы.
Здесь можно посмотреть код — то, что делаю для себя и для практики.
01
AI-чат со стримингом
Ответ приходит потоком по SSE: свой парсер выдерживает разрыв события в любом месте, даже посреди символа. Markdown дорисовывается по ходу, незакрытый блок кода остаётся кодом, HTML из ответа не выполняется. Остановка по кнопке и Esc с сохранением уже полученного текста, повтор после обрыва, вызовы инструментов с карточками, калькулятор без eval. Токены применяются пачкой раз в кадр, автопрокрутка не мешает читать, скринридер слышит начало и конец ответа, а не каждый токен. Сервер модели работает в браузере. 100 тестов, включая axe.
02
Цветочный магазин
Первый экран — видео сквозь буквы, раскрывается прокруткой. Прелоадер и шейдерные переходы между страницами «распускающийся цветок». Конструктор букета с ценой и бюджетом, каталог с фильтрами в адресе и Flip, 3D-галерея, подписка, оформление заказа. Тёмная тема, плавающие цветы на canvas, 220+ тестов.
03
Планировщик путешествий
Места по дням: перетаскивание мышью, пальцем и с клавиатуры, карта маршрута на MapLibre — камера перелетает к выбранному дню, линия прорисовывается. Подборка популярных мест из Wikidata с фото, прогноз погоды, ссылка «поделиться» без сервера, экспорт в календарь. Статический экспорт Next.js, тесты на логику.
04
Музыкальный визуализатор
Три 3D-сцены на шейдерах слушают музыку: сфера на шуме, галактика из 60 000 частиц, синтвейв-ландшафт из истории спектра. Анализ звука — полосы частот и детектор долей, демо-трек синтезируется в браузере на Web Audio, свой файл или микрофон. 60 fps, обучающая документация.
05
Конструктор WebGL-анимаций с экспортом кода
40 эффектов настраиваются ползунками, готовый код забирается как JS-модуль, React-компонент или веб-компонент — тот же рантайм, что рисует превью, около 8 КБ в gzip. Фоны на GLSL (море со сменой суток и штормом, облака на шуме Перлина — Ворли, космос, огонь, жидкий металл), симуляции жидкости на GPU, переходы, прожигающие настоящую HTML-секцию, курсоры, жидкая кнопка, прелоадер, 3D на three.js. Свой шейдер прямо в редакторе, траектории, адаптивное качество. Главная — скролл-сцена на GSAP из этих же эффектов. 131 тест, учебник из 17 глав.
06
Онлайн-ретро для команды
Комната по ссылке без регистрации: карточки, голосование, таймер, курсоры коллег и реакции в реальном времени. Три этапа: пишем вслепую, голосуем, обсуждаем. Бэкенд — Supabase: анонимный вход, Postgres, права на уровне строк (RLS), realtime; демо-режим между вкладками без сервера.
07
Telegram Mini App для записи в студию
Запись к мастеру прямо в Telegram: услуга, мастер, свободное время, подтверждение. Цвета темы пользователя, родные кнопки Telegram (MainButton, BackButton), вибрация, записи в CloudStorage — видны на всех устройствах. Расписание с учётом длительности услуги и режимом «любой мастер», демо-режим вне Telegram.
08
Мобильное приложение: трекер привычек
Приложение на React Native и Expo: один код для iOS, Android и браузера. Привычки по дням недели, счётчики, серии, статистика с «тепловой картой». Отметка свайпом — жест и анимация в UI-потоке (Gesture Handler, Reanimated), кольцо прогресса на SVG. Данные на устройстве с версией и миграцией, локальные напоминания, вибрация, тёмная тема, доступность.
09
Авторизация, сделанная как в продукте
Access-токен (JWT) в памяти и refresh-токен в HttpOnly-cookie с ротацией и обнаружением кражи; пароли на PBKDF2 с защитой от перебора и одинаковыми ошибками. Двухфакторная защита (TOTP, коды восстановления), ключи доступа (WebAuthn), вход через провайдера по OAuth 2.0 + PKCE + OpenID Connect, ссылки из писем, устройства, режим судо, роли. Клиент обновляет токен один раз на все запросы и вкладки (Web Locks), выходит во всех вкладках (BroadcastChannel). Сервер на Hono работает и на Node, и в браузере. 62 теста, включая passkeys в Playwright.
010
Учёт личных финансов на Redux Toolkit и FSD
RTK Query: один createApi, эндпоинты в сущностях, теги — после любой операции сами обновляются список, остатки, графики и бюджеты; оптимистичная правка с откатом. Удаление с отменой на listener middleware, мастер импорта CSV на createSlice и createSelector (кодировка, колонки и категории угадываются, дубликаты пропускаются). Архитектура Feature-Sliced Design с проверкой Steiger. Формы на react-hook-form + zod, деньги в копейках, графики Recharts. 75 тестов: Vitest с MSW и Playwright.
011
Админка интернет-магазина с реальным временем
Свой WebSocket-клиент без библиотек: переподключение с нарастающей паузой и jitter, heartbeat, каналы, запросы с подтверждением, очередь и докачка пропущенных событий по номеру и эпохе сервера. События попадают в кэш TanStack Query, версии записей защищают от гонок. Серверная таблица с состоянием в адресе, 10 000 строк с виртуализацией, оптимистичные обновления, роли. Сервер работает в браузере через MSW и на Node. 138 тестов.
012
Библиотека React-компонентов
16 доступных компонентов, написанных без Radix и других готовых основ: диалог с ловушкой фокуса и inert, меню и вкладки с навигацией стрелками, селект на aria-activedescendant, тосты с живыми областями, своё позиционирование с flip и shift. Стили в каскадных слоях и на токенах — переопределяются без !important. Пакет: ESM, типы, карта exports, проверки publint и attw, установка упакованного архива с серверным рендерингом. 133 теста с axe, Storybook.
013
Сайт жилого комплекса
3D-квартал на three.js: при наведении на башню — свободные квартиры. Каталог из 270 квартир: фильтры, шахматка, состояние в адресе. Статические страницы квартир с SVG-планировками, избранное, ипотечный калькулятор.
014
Сайт космического агентства
3D-ракета летит по своей траектории, пока листаешь страницу, а по кнопке «Пуск» проходит её обратно и садится на стартовую площадку. Все 16 плагинов GSAP, шесть слайдеров без библиотек, шейдерные переходы, симуляция воды на GPU, бесконечная галерея. Три страницы, 120 fps, 218 тестов.
015
Шаблон для старта проектов
36 модулей, формы со схемами в стиле zod и масками, Swiper, 3D-слайдер, i18n, dev-панель, 4 стартера: vanilla, React, React + TS, Astro. На нём собран этот сайт.
05
Открыт к проектам и предложениям о работе. Отвечаю в течение дня.