Портфолио и кейсы фрилансеров по AI-автоматизации процессов

Разработал для полевой сервисной компании Telegram-бот и Mini App для учёта рабочих часов, расходов, выплат и заданий сотрудников. Сотрудникам не нужно устанавливать отдельное приложение или заполнять сложные формы. Через Telegram они за несколько секунд отмечают рабочий день, указывают фактическое количество часов, отправляют фото чека и получают информацию о следующем объекте. В Mini App доступны текущий баланс, история операций, быстрый ввод расходов и доходов, задания на завтра и административные функции. Для владельца реализованы: — контроль ежедневных отчётов сотрудников; — учёт отработанных и оплаченных часов; — исторические ставки и расчёт текущего баланса; — фиксация наличных расходов и чеков; — журнал изменений и разграничение прав доступа; — подготовка данных для бэкофиса и Lexoffice; — локальная очередь доставки, сохраняющая записи при временных сбоях связи. Система используется в реальной работе полевой команды. Было сверено 18 месяцев учёта и 12 298,5 рабочих часа без итоговых расхождений. Проект покрыт 660 автоматизированными тестами. Стек: Python, aiogram, Telegram Mini App, JavaScript, SQLite, NocoDB, Docker, OCR и Lexoffice API. Все представленные в портфолио персональные данные заменены демонстрационными.

Демонстрационный концепт лендинга для вымышленных беспроводных наушников PULSE X. Текст на английском — лендинг построен в стиле Apple-презентаций: продукт «живёт» в закреплённой сцене, а история раскрывается по главам при прокрутке. Первый экран заявляет ключевое преимущество, ниже — главы про автономность, шумоподавление и материалы. Что реализовано: • крупный заголовок с построчной анимацией текста; • бейдж новой модели и цена в CTA; • закреплённая продуктовая сцена, переходящая между главами при скролле; • главы с конкретными характеристиками (время автономной работы, адаптивное шумоподавление); • два CTA — предзаказ и переход к истории; • адаптивная мобильная версия. Техническая реализация: • семантический HTML5, CSS3 Grid/Flexbox и Vanilla JavaScript; • GSAP 3.13, ScrollTrigger и SplitText для построчной анимации заголовков и пиннинга сцен; • WebP, lazy loading, OG/Twitter-метаданные; • поддержка prefers-reduced-motion и статичный фолбэк без анимаций. Моя роль: постановка задачи, сценарий страницы по главам, визуальное направление, организация AI-assisted сборки и проверка адаптива. Проект создан для портфолио. Продукт, характеристики и цена вымышлены.

Демонстрационный концепт лендинга для вымышленного бренда ботанической косметики «Гербарий». Страница держится на тёмно-зелёной палитре, спокойной типографике и живой графике растений. Первый экран задаёт настроение бренда, ниже раскрываются философия сбора трав, состав и ритуал использования. Что реализовано: • атмосферный первый экран с иллюстрациями листьев и капель; • SVG-лоза, прорастающая по мере прокрутки страницы; • раздел философии бренда с крупной каплей на листе; • два CTA — переход к продукту и философии; • адаптивная мобильная версия. Техническая реализация: • семантический HTML5, CSS3 Grid/Flexbox и Vanilla JavaScript; • GSAP 3.13 и ScrollTrigger для скролл-хореографии; • SVG-анимация лозы через stroke-dashoffset, синхронизированная со скроллом (scrub); • WebP, lazy loading, OG/Twitter-метаданные; • поддержка prefers-reduced-motion и статичный фолбэк SVG. Моя роль: постановка задачи, визуальное направление, организация AI-assisted сборки и проверка адаптива. Проект создан для портфолио. Бренд, состав и продукт вымышлены.

Демонстрационный концепт лендинга для вымышленного бренда премиальной родниковой воды AQUEA. Текст на английском — атмосферная подача через глубокую тёмно-синюю палитру, поэтичные формулировки и интерактивный водный фон. Первый экран знакомит с происхождением продукта, ниже раскрываются история ледника, состав и позиционирование «без пластика». Что реализовано: • атмосферный первый экран со светящейся бутылкой и тегом происхождения; • интерактивная рябь на водном фоне по клику пользователя; • горизонтальный скролл-пиннинг, раскрывающий «путь воды» от ледника до бутылки; • бегущая строка характеристик продукта (pH, минерализация, экологичность); • два CTA — коллекция и происхождение продукта; • адаптивная мобильная версия. Техническая реализация: • семантический HTML5, CSS3 Grid/Flexbox и Vanilla JavaScript; • GSAP 3.13, ScrollTrigger и Lenis для скролл-хореографии и пиннинга; • Canvas 2D: интерактивные волны и рябь, реагирующие на курсор/клик; • WebP, lazy loading, OG/Twitter-метаданные; • поддержка prefers-reduced-motion и CSS-фолбэк без Canvas. Моя роль: постановка задачи, сценарий страницы, визуальное направление, организация AI-assisted сборки и проверка адаптива. Проект создан для портфолио. Бренд, продукт и характеристики вымышлены.

Демонстрационный концепт лендинга для вымышленного международного киберспортивного турнира IRON CIRCUIT 2026. Текст на английском языке — кейс под ивент/tournament-сегмент. Первый экран нагнетает событие: место и дата, название турнира крупным неоновым шрифтом, живой таймер обратного отсчёта и ключевые цифры (призовой фонд, число команд, вместимость арены). Что реализовано: • атмосферный первый экран с неоновой типографикой и фотографией арены; • тег места и даты проведения; • работающий таймер обратного отсчёта до старта турнира; • бегущая строка с ключевыми фактами (призовой фонд, регионы, трансляция, вместимость); • два CTA — покупка билетов и регистрация команды; • раздел призового фонда с крупной суммой; • адаптивная мобильная версия. Техническая реализация: • семантический HTML5; • чистый CSS3: custom properties, Grid/Flexbox и clamp(); • Vanilla JavaScript: логика обратного отсчёта и интерактивные элементы; • брейкпоинты 375/560/768/1024 px и мобильное меню; • WebP, lazy loading, OG/Twitter-метаданные; • доступные тач-цели, фокус-состояния и поддержка prefers-reduced-motion. Моя роль: постановка задачи, событийная структура страницы, визуальное направление, организация AI-assisted сборки и проверка адаптива. Проект создан для портфолио. Турнир, призовой фонд, команды и остальные данные вымышлены.

Демонстрационный концепт лендинга для вымышленного жилого комплекса бизнес-класса «Меридиан Парк». Первый экран построен на крупной атмосферной фотографии и ключевых цифрах проекта — площадь парка, срок сдачи, юридическая схема продаж. Ниже раскрываются архитектурная концепция, планировки и расположение. Что реализовано: • полноэкранный первый блок с фотографией и заголовком-обещанием; • категорийный тег позиционирования (класс, район); • строка ключевых показателей: цена, площадь парка, срок сдачи, эскроу-счета; • два CTA — выбор квартиры и расчёт ипотеки; • раздел архитектурной концепции с нумерованными особенностями проекта; • адаптивная мобильная версия. Техническая реализация: • семантический HTML5; • чистый CSS3: custom properties, Grid/Flexbox и clamp(); • Vanilla JavaScript для интерактивных элементов; • брейкпоинты 375/560/768/1024 px и мобильное меню; • WebP, lazy loading, OG/Twitter-метаданные; • доступные тач-цели, фокус-состояния и поддержка prefers-reduced-motion. Моя роль: постановка задачи, структура страницы, визуальное направление, организация AI-assisted сборки и проверка адаптива. Проект создан для портфолио. ЖК, застройщик, цены, сроки и остальные данные вымышлены.

Демонстрационный концепт лендинга для вымышленной онлайн-школы веб-разработки «скобки». Страница построена на прямом обещании результата и снятии типичных страхов новичка: первый экран заявляет срок и формат обучения, ниже раскрываются программа, стек технологий, аудитория курса и условия оплаты. Что реализовано: • заголовок с конкретным сроком, обещанием без «магии» и гарантией возврата; • бейдж набора на поток и статистика (выпускники, трудоустройство, медианная зарплата); • макет редактора кода как визуальное подтверждение практики; • бегущая строка стека технологий курса; • блок «кому подходит курс» с указанием нагрузки; • два CTA — запись на поток и просмотр программы; • адаптивная мобильная версия. Техническая реализация: • семантический HTML5; • чистый CSS3: custom properties, Grid/Flexbox и clamp(); • Vanilla JavaScript для интерактивных элементов; • брейкпоинты 375/560/768/1024 px и мобильное меню; • WebP, lazy loading, OG/Twitter-метаданные; • доступные тач-цели, фокус-состояния и поддержка prefers-reduced-motion. Моя роль: постановка задачи, структура продающей страницы, визуальное направление, организация сборки с AI-инструментами и проверка адаптива. Проект создан для портфолио. Школа, поток, статистика и цены вымышлены.

емонстрационный концепт лендинга для вымышленного финтех-продукта lumo — дебетовой карты с кэшбэком. Текст на английском языке — кейс ориентирован на международный fintech-сегмент. Первый экран сочетает эмоциональный оффер и живой макет мобильного приложения: баланс, начисленный кэшбэк, лента последних операций. Ниже — блок доверия с регуляторными гарантиями. Что реализовано: • заголовок с чётким продуктовым обещанием и рейтингом в App Store; • макет мобильного приложения с балансом, кэшбэком и историей операций; • два CTA — открытие счёта и калькулятор кэшбэка; • социальное доказательство: счётчик пользователей и аватары; • блок регуляторных гарантий (страхование вкладов, PCI DSS, мгновенные переводы); • адаптивная мобильная версия. Техническая реализация: • семантический HTML5; • чистый CSS3: custom properties, Grid/Flexbox и clamp(); • Vanilla JavaScript для интерактивных элементов; • брейкпоинты 375/560/768/1024 px и мобильное меню; • WebP, lazy loading, OG/Twitter-метаданные; • доступные тач-цели, фокус-состояния и поддержка prefers-reduced-motion. Моя роль: постановка задачи, продуктовая структура, визуальное направление, организация AI-assisted сборки и проверка адаптива. Проект создан для портфолио. Банк, карта, показатели и остальные данные вымышлены.

Демонстрационный концепт лендинга для вымышленного SaaS-продукта Nova — платформы продуктовой аналитики. Текст и интерфейс сделаны на английском языке — кейс показывает работу с международным B2B SaaS-рынком. Первый экран сразу подтверждает ценность продукта: заголовок про рост метрик, живой макет дашборда с показателями (активные пользователи, конверсия trial→paid, чистая выручка) и графиком, блок доверия и логотипы клиентов. Что реализовано: • заголовок с ценностным предложением и бейджем о новой версии продукта; • интерактивный макет дашборда: боковая навигация, карточки метрик с динамикой, график посещаемости; • два CTA — регистрация и просмотр демо; • строка доверия (SOC 2 Type II, GDPR-ready, бесплатный период); • блок «Trusted by» с логотипами вымышленных компаний; • адаптивная мобильная версия. Техническая реализация: • семантический HTML5; • чистый CSS3: custom properties, Grid/Flexbox и clamp(); • Vanilla JavaScript для интерактивных элементов интерфейса; • брейкпоинты 375/560/768/1024 px и мобильное меню; • WebP, lazy loading, OG/Twitter-метаданные; • доступные тач-цели, фокус-состояния и поддержка prefers-reduced-motion. Моя роль: постановка задачи, продуктовая структура, визуальное направление, организация сборки с AI-инструментами и проверка адаптива. Проект создан для портфолио. Продукт, метрики, клиенты и остальные данные вымышлены.

Демонстрационный концепт лендинга для вымышленной стоматологической клиники «Лагуна». Страница построена вокруг доверия и понятного пути к записи. Первый экран показывает основное предложение, далее раскрываются преимущества клиники, услуги и цены, информация о враче, этапы первого визита, отзывы и форма записи. Что реализовано: • спокойная медицинская стилистика; • блок преимуществ; • карточки услуг с ценами; • презентация специалиста; • пошаговое описание первого визита; • отзывы пациентов; • форма записи и мобильная адаптация. Техническая реализация: • семантический HTML5; • чистый CSS3: custom properties, Grid/Flexbox и clamp(); • Vanilla JavaScript без React и jQuery; • брейкпоинты 375/560/768/1024 px и мобильное меню; • WebP, lazy loading, OG/Twitter-метаданные; • доступные тач-цели, фокус-состояния и поддержка prefers-reduced-motion. Моя роль: постановка задачи, структура страницы, визуальное направление, организация сборки с использованием AI-инструментов и проверка desktop/mobile. Проект создан для портфолио. Клиника, врач, отзывы, цены, адрес и другие сведения вымышлены.