Привет!

Я Иван Дербугов,
и я веб-разработчик

🏢 KINETICA — корпоративный сайт digital-агентства

Корпоративный сайт крупного digital-агентства Kinetica — среди клиентов Альфа-Банк, СДЭК, Касперский, Škoda, Траско и другие федеральные бренды. Делал весь проект целиком: публичную часть, админку и всё, что между ними. На Symfony + Twig собрана площадка агентства — главная, услуги, кейсы, блог, отзывы, вебинары, вакансии. Фронт собирается через Webpack.

Большая админка: страницы, услуги, кейсы, блог, отзывы, SEO, галерея, заявки, настройки. Контент правится оттуда, а вёрстка живёт в Twig — верстальщики спокойно правят шаблоны, не залезая в бэкенд. В блоге — конструктор на Editor.js: статьи собираются блоками прямо в админке, без ручной вёрстки каждого поста. Проект разворачивал на Docker, настраивал cron под фоновые задачи и регулярные процессы. Заявки и уведомления связаны с Битрикс24 — лиды и рабочие процессы не живут отдельно от CRM команды.

На формах — не просто отправить. Есть валидация email (в том числе против спама) и Яндекс Smart Captcha: для подозрительных доменов капча показывается, для остальных — нет. Плюс обходной токен, чтобы не мучить нормальных пользователей лишний раз.

В итоге получился живой продакшен-сайт: и красивый снаружи, и управляемый изнутри, с защитой заявок и удобной работой для команды.

Технологии:

⚡ PageSpeed — разгон загрузки

Повышение показателей по PageSpeed на живых страницах. Поднял поисковую оптимизацию и производительность: отделил критические стили, поставил конвертеры изображений на фронте и на бэкенде из jpg и png в webp, уменьшил число пикселей у огромных картинок и написал микроразметку.

На мобильном производительность выросла так:

• akyarmed.ru/doctors — с 42 до 98
• power-spot.ru — с 72 до 98
• vostokautopremium.ru, Audi Q3 — с 48 до 98

Технологии:

🏥 АкЯр Мед — сайт клиники и админка

«Сайт создали нейросетью — нужно отредактировать HTML и сделать так, чтобы мы сами могли загружать файлы цен и править контент» — с такой задачей пришёл клиент.

Доработал сайт семейной клиники АкЯр Мед в Казани. Привёл в порядок вёрстку, адаптив и UX после генерации нейросетью, собрал админку и связал публичную часть с MySQL — врачи, услуги, акции, отзывы и остальной контент больше не правятся руками в HTML.

В админке: заявки, цены с загрузкой файла прайса, врачи с фото и фильтрами, услуги, постоянные и временные акции, модерация отзывов, вакансии, страница Пациенту с файлами, режим работы, политика, согласие и оферта. На PHP написал обработчик формы обратной связи, данные из которого уходят в Telegram, на почту, в админку. С повторной отправкой через cron при сбоях. Подключены Яндекс.Метрика, cookie-баннер, sitemap, Open Graph и schema.org.

Стек: HTML/CSS/JS на фронте, PHP API + админка, динамическая подгрузка блоков с сайта.

Результат: продакшен-сайт, который выглядит как современный медицинский портал — а прайс и контент клиника обновляет сама, без разработчика на каждую правку.

Технологии:

🌍 KINETICA — лендинг GEO: нейросети и генеративный поиск

Промо-страница услуги GEO/AI SEO для KINETICA: продвижение в нейросетях и AI-выдаче. Лендинг с hero и KPI, сравнением SEO и GEO, блоком «почему важно», 5 этапами работы, интерактивом выгод (узлы по клику), демо таблицы видимости брендов в AI (таблица/карточки, поиск, колонки), тремя тарифами, кейсами, отзывами и формами заявки.

Ключевые особенности:

• Слайдер в hero
• Награды и ленты с AI-платформами
• Сравнение классического SEO и GEO
• Этапы от аудита до масштабирования
• Интерактив «что даст бизнесу»
• Блок сравнения брендов с переключением режимов
• Тарифы со свайпом на мобильных
• Кейсы, отзывы, статьи блога
• Адаптивная вёрстка

Технологии:

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

🎂 KINETICA — страница к 19-летию агентства

Праздничный лендинг KINETICA: история компании в скролле, поздравления от аудитории и розыгрыш призов. Страница с кастомным прелоадером, кинематографичным hero с ракетой и письмом, таймлайном вех по годам, блоком карточек вех с модальными окнами с текстами, горизонтальными секциями со скролл-триггерами, роликами команды, обзором эпох маркетинга карточками, блоком подарков и торта с интерактивом, формой поздравлений и лентой из API.

Ключевые особенности:

• Прелоадер с прогрессом до готовности hero и шрифтов
• Hero на горизонтальном скролле: раскрытие ракеты, письмо и подсказки — через GSAP ScrollTrigger
• Секция «путь ракеты» с SVG-траекторией (десктоп и мобильная версии), появление вех и движение ракеты при скролле
• Блок карточек историй с модальными окнами
• Горизонтальные слайдеры истории и эпох рекламы — pin и анимация трека на ScrollTrigger
• Видео команды: кастомный плеер, пауза остальных при воспроизведении
• Торт с кликом по свечам — анимация задувания и сброс
• Поздравления в БД с выводом в админку
• Интеграция праздничного логотипа через общий Layout

Технологии:

Результат: тематическая промо-страница юбилея с сильным скролл-нарративом, интерактивом и пользовательским контентом в стиле бренда KINETICA.

📡 Digital Radar — каталог digital-агентств с CMS и админкой

Маркетинговый каталог агентств: рейтинги, карточки, редакционный контент и заявки с сайта — всё управляется из админки, деплой предсказуемый, документация по миграциям и продакшену.

Ключевые особенности:

• Рейтинги и карточки агентств — таблицы и подробные карточки по направлениям; данные хранятся так, чтобы их можно было менять без правки «кода сайта». Пока раздел только наполняется, при необходимости подставляются готовые страницы из макета — чтобы сайт не ломался.
• Тексты страниц из панели управления — главная, разделы «О проекте», критерии и другие страницы можно править в админке; ссылки на разделы и картинки в тексте работают как положено.
• Удобная админка — одно место для статей блога, рейтингов, карточек агентств и заявок с формы; статьи оформляются в привычном редакторе (как в обычном блоге).
• Надёжный перенос на сервер — структура сайта и данные описаны так, чтобы при запуске и обновлениях всё поднималось предсказуемо; для работы локально есть готовая схема с сайтом и базой (без ручной сборки «с нуля»).
• Заявки с сайта — форма отправляет обращения в систему, их можно смотреть в админке.

Технологии:

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

🧮 Умный многоступенчатый квиз-калькулятор для реферальной программы

Разработал 7-ступенчатый квиз-калькулятор для реферальной программы. Партнёры рассчитывают стоимость лида в реальном времени и оставляют заявку за один проход.

Сценарий: выбор транспорта, каталог предметов с количеством и ценой, адрес на Яндекс.Картах, дата и время вывоза, параметры объекта (этаж, лифт, парковка), итог сметы и форма заявки с фото.

Заявка уходит в CRM вместе с составом заказа, адресом, комментарием и вложениями. Смета пересчитывается на каждом шаге.

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

Технологии:

📈 Промо-лендинг — Тренды digital 2026

Интерактивный спецпроект KINETICA: презентация трендов digital на 2026 год с квизом и лидогенерацией через PDF. Единая промо-страница с геймификацией и навигацией по 6 направлениям (ORM, SEO, Контекст, PR, Таргет, CRM).

Ключевые особенности:

• Квиз — 6 вопросов, три сценария результата (хорошо / норма / подтянуть)
• Навигация по трендам — 6 карточек (десктоп: клик, мобильный: Swiper-карусель)
• Кастомный курсор (SVG) на десктопе, параллакс иллюстраций по движению мыши
• Лидогенерация — скачивание PDF после квиза
• Модальное окно — блокировка скролла, переход к карточкам или закрытие по клику вне
• Адаптив — брейкпоинты 768/1310/1530px, нео-бруталистский UI (обводка, тень, скругление)

Технологии:

📊 KINETICA — «Комплексный аудит диджитал-маркетинга». Полный редизайн

Страница услуги «Комплексный аудит диджитал-маркетинга» агентства KINETICA. Полный редизайн: новая визуальная подача, креативные иллюстрации, анимации при скролле, несколько CTA к форме заявки. От hero и блоков проблем/пользы до этапов, доказательств и цены.

Ключевые особенности:

• Новая визуальная концепция — креативные иллюстрации и живой тон
• Логика «сначала проблемы — потом польза» — снятие возражений, затем визуализация результата аудита
• Анимация при скролле (прогресс «путь к цели») — вовлечение и образ результата
• Несколько CTA по странице к одной форме — усиление конверсии без размытия
• Раскрывающиеся карточки этапов — компактная подача без перегруза
• Прозрачная цена — снижение барьера «напишите, узнаете»
• Социальные доказательства перед формой — удержание, награды, отзывы, блог
• Адаптив — слайдеры при большом числе карточек; форма внизу и в модалке

Технологии:

🎁 Наканунщик — Интерактивный лендинг промо пакета «Успеть всё»

Сервис скоростного запуска email-проектов с ИИ для KINETICA. Промо-лендинг в стиле нео-брутализма: герой с ИИ-чатом и параллаксом, таймер до праздников, блок преимуществ и форма заявки. Курсор-«письма» и параллакс на десктопе, плавная навигация по слайдам.

Ключевые особенности:

• ИИ-чат — диалог с ботом, сохранение истории в localStorage, параллакс иллюстраций по движению мыши
• Навигация по слайдам — 4 полноэкранных блока: герой с чатом → таймер до праздника → преимущества (Опыт, Команда, Портфолио, Награды) → форма заявки и CTA
• Кастомный курсор (MouseTrail) — «письма» за курсором на десктопе, анимация по mousemove
• Лидогенерация — форма заявки (имя, email, компания, сообщение), блок скидки 50% и призыв к действию
• Параллакс на герое — 3D-поворот и смещение иллюстраций/персонажей по позиции мыши
• Адаптив — брейкпоинты md/lg, нео-бруталистский UI (обводка, тень, скругление, яркие фоны)

Технологии:

🔍 PerformIQ — Страница услуги Technical SEO

Лендинг-страница услуги Technical SEO для агентства PerformIQ. От hero с оффером и призывом к действию до детального подхода, списка проверок в аудите, слайдера кейсов и FAQ — всё для вовлечения и снятия возражений.

Ключевые особенности:

• Hero с заголовком и CTA «Let's talk» — ясный оффер и призыв к действию
• «Our Approach» — четыре шага: аудит, стратегия, внедрение, мониторинг; карточки с иконками
• Слайдер кейсов (Cases) — Swiper, стрелки и буллеты, несколько слайдов с переходами на кейсы
• Блок связанных услуг — Ecommerce SEO, Local SEO, SEO Audit для кросс-продаж
• FAQ по Technical SEO — пять вопросов-ответов, снимает типичные возражения
• Адаптив — hero и секции, слайдер кейсов на мобиле

Технологии:

🏗️ MebelMarket — Корпоративный портал мебельной компании

«Я сделал когда-то себе сайт на конструкторе и он работал нормально, но в последние годы заявок мало стал приносить, выглядит не так современно уже, да и конструктор каждый месяц оплачивать надоедает» — с такой задачей пришел клиент. Результат: клиент теперь платит за хостинг В 25 РАЗ МЕНЬШЕ, чем платил конструктору! 🎯✨

Комплексный корпоративный сайт для компании по производству и установке мебели на заказ в Москве. Многофункциональный портал с каталогом из 11 коллекций кухонь, интеллектуальной системой заявок и продвинутым UX/UI для максимальной конверсии!

Ключевые особенности:

• Масштабный каталог — 11 коллекций кухонь с ценами от 8890 до 138990 руб
• Система лидинга — формы замеров, сборки и квиз дизайн-проекта за 1 минуту
• Мультиканальная связь — WhatsApp, Telegram, формы с Web3Forms API
• Адаптивный дизайн — 3 основных breakpoint'а для всех устройств (1400px, 768px, 500px)
• Умная навигация — выпадающие меню с категориями и акциями
• Безопасность — защита от спама, валидация данных, CORS-заголовки
• Галерея работ — интерактивные слайдеры с примерами кухонь
• Аналитика — Яндекс.Метрика с webvisor для отслеживания конверсии
• Уведомления — Email + Telegram Bot для мгновенных заявок

Технологии:

🔧 Starvin — Система подбора автозапчастей

Комплексная платформа для автоматизированного подбора OEM-деталей и узлов автомобиля на Laravel. Система предназначена для автомагазинов, СТО и автомалярных мастерских, значительно сокращая время поиска запчастей через VIN-код или название детали.

Моя роль в проекте:

Работал в команде с бэкендером и дизайнером, отвечая за доработку и оптимизацию фронтенда существующего проекта. Подключался по SSH к production серверу, поднимал локальное окружение через Docker Compose (nginx, Laravel app, Redis). Основная задача — исправление ошибок, улучшение UX и адаптация интерфейса под различные устройства.

Ключевые доработки:

• Удаленная разработка — подключение по SSH, работа с production окружением
• Локальная разработка — настройка Docker окружения (nginx, Laravel, Redis, MySQL)
• Исправление багов с модальными окнами — устранение проблем с закрытием и отображением
• Оптимизация загрузки данных — скрытие кнопок при загрузке, показ после получения данных
• Адаптивный дизайн — корректировка позиционирования и отступов для мобильных устройств
• Улучшение UX — некликабельные серые категории после выбора, кнопка "скрыть" в модалках
• Очистка данных — исправление функции очистки при закрытии OEM модалки
• Визуальные улучшения — фиксированный размер спиннера, полупрозрачная анимация загрузки
• Оптимизация производительности — сортировка после загрузки вместо каждых 5 секунд
• Мобильная версия — адаптация таблиц и устранение дублирующих элементов
• Работа с legacy кодом — рефакторинг и улучшение существующей кодовой базы

Технологии:

🏗️ РЕКОРДИКА — корпоративный портал аренды спецтехники

Комплексный корпоративный сайт рекордика.рф для ведущей компании по аренде строительной и дорожной спецтехники в Москве и Московской области! Многофункциональный портал с каталогом из 24 видов спецтехники, интеллектуальной системой заявок и продвинутым UX/UI для максимальной конверсии.

Ключевые особенности:

• Масштабный каталог — 24 категории спецтехники с интерактивными карточками
• Система лидинга — модальные окна с таймером скидок до 15%
• Мультиканальная связь — WhatsApp, звонки, формы с reCAPTCHA v3
• Адаптивный дизайн — 4 breakpoint'а для всех устройств
• Умная навигация — выпадающие меню не закрываются на мобилке при скролле
• Безопасность — защита от ботов, валидация данных, CORS-заголовки
• Галерея работ — интерактивная смена изображений
• Карусель услуг — 7 дополнительных услуг на Materialize CSS
• Аналитика — Яндекс.Метрика с webvisor и ecommerce
• Уведомления — Email + Telegram Bot для заявок

Технологии:

🚀 NFT Marketplace — Современная платформа для торговли цифровым искусством

NFT Marketplace — полнофункциональная веб-платформа для покупки, продажи и коллекционирования NFT. Разработан как дипломный проект за 2 недели и защищен на IT курсах на максимальный балл (10/10).

Ключевые особенности:

• Таймер обратного отсчета — JavaScript-таймер с точным обратным отсчетом до аукциона, автоматическое обновление каждую секунду
• Полная адаптивность — Desktop (1280px+), Tablet (705px-1120px), Mobile (до 705px) с адаптивными изображениями
• Звуковое сопровождение — интерактивные звуковые эффекты для действий, навигации и просмотра NFT
• Анимации и эффекты — CSS-анимации с Animate.css, плавные переходы и hover-эффекты
• Модульная архитектура компонентов с CSS-спрайтами для оптимизации
• Темная тема в стиле криптоплатформ с фиолетовой акцентной палитрой (#A259FF)
• 5 основных страниц: Главная, Маркетплейс, Топ создателей, Регистрация, Подключение кошелька
• Оптимизированные изображения и производительность

Технологии:

🟣 SubScope — лендинг подписок

Некоммерческий проект для приложения по управлению подписками. Реализован по макету из Figma за 2,5 дня. Полная адаптивность, анимации, интерактивные SVG-иконки, кастомные эффекты, отзывчивая форма и футер-аккордеон.

Ключевые особенности:

• 5 адаптивных версий (Desktop, 3 Tablet, Mobile)
• Плавные анимации и интерактивные hover-эффекты
• SVG-иконки с анимацией
• Слайдер отзывов
• Форма обратной связи
• Адаптивный футер с аккордеоном

Технологии:

🔧 HandyMark — сайт мастера на все руки

Современный лендинг для американского мастера на все руки Марка. Разработан с акцентом на удобство связи и максимальную конверсию. Полная адаптивность, интерактивные формы и интеграция с мессенджерами.

Ключевые особенности:

• Интерактивная форма обратной связи с AJAX-отправкой
• Красивое модальное окно успеха с анимацией
• Loading spinner в кнопке отправки формы
• Двойные уведомления: Email + Telegram бот
• Интеграция с SMS для быстрой связи
• Социальные сети: Facebook, Instagram
• Способы оплаты: Cash, Personal check, Zelle, Venmo, PayPal
• Полная адаптивность (Desktop, Tablet, Mobile)
• Плавные анимации с библиотекой Animate.css

Технологии: