Портфолио в Telegram Mini App: кейсы, услуги, обучение и автоматическая выдача доступов

Как я собрала интерактивное портфолио на PuzzleBot и превратила его в рабочую систему для знакомства с услугами, просмотра кейсов и доступа к обучению.

Платформа: Telegram · PuzzleBot · Mini App
Инструменты: HTML, CSS, JavaScript · Telegram-бот · Kinescope · Teletype · Miro / Google Drive / Яндекс Диск (материалы обучения)
Формат проекта: собственная разработка

Открыть Telegram-бот @mahagonchar_ai

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

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

Вместо набора отдельных лендингов я собрала многостраничное Mini App с собственным оформлением и навигацией. Пользователь открывает его из Telegram-бота, выбирает нужный раздел и при необходимости возвращается в бот для проверки подписки или покупки.

Главная страница

Знакомство со мной и специализацией, основные цифры опыта, переходы к услугам, кейсам, отзывам, обучению и бесплатной библиотеке.

Услуги

Шесть направлений в раскрывающихся блоках: ИИ-агенты, автоматизация, чат-боты, клубы по подписке, Mini App и геймификация, аудит и доработка. В каждом разделе конкретные примеры задач и кнопка для обсуждения проекта.

Кейсы

Каталог +21 проекта, распределённого по четырём направлениям: геймификация, клубные подписки, чат-боты и автоматизация, разработки и Mini App. Категории раскрываются прямо на странице, а отдельные карточки ведут на подробные описания проектов.

Обучение и воркшопы

Три практических воркшопа с отдельными обложками:

• Квест с нуля - проектирование квеста, схема в Miro, реализация в PuzzleBot, Mini App, тестирование
• Колесо фортуны - игровая механика через чат-бота, примеры реализации, шаблоны BotHelp и SaleBot
• Автоматизация Instagram - вводный блок, сценарии через BotHelp, SaleBot и ChatPlace.

Стоимость каждого воркшопа 2 900 ₽

Участник видит статус доступа. Если покупка не подтверждена, может изучить программу и перейти к оплате. После подтверждения бот присваивает соответствующий признак доступа, а участник получает переход к материалам.

Личные учебные страницы

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

Бесплатная библиотека

Подборка практических статей и шаблонов по чат-ботам, Telegram, MAX, VK и геймификации. Доступ к каталогу выдаётся после проверки подписки на Telegram-канал ботом.

Обсудить задачу

Отдельная страница для потенциальных клиентов: выбор направления, краткое объяснение формата работы и кнопка, ведущая к общению со мной в Telegram. Вместо длинной анкеты — короткий путь к контакту.

1. PuzzleBot отвечает за сценарии общения, переходы в бот, проверку подписки и действия после успешной оплаты.

2. Mini App - интерфейс портфолио: страницы, раскрывающиеся блоки, отзывы, карточки кейсов и воркшопов, учебные разделы и меню.

3. Персональные переменные используются для отображения доступа

4. Контент размещён в Kinescope и во внешних материалах, а Mini App собирает всё в единый обучающий интерфейс.

5. Навигация объединяет страницы портфолио, а учебные кабинеты имеют собственные разделы «Главная», «Материалы» и переход обратно к портфолио.

Одна точка входа. Бот одновременно выполняет роль визитки, каталога услуг, доступа к библиотеке и входа в обучение.

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

Получилась единая система, в которой можно:

• познакомиться со мной и моими компетенциями
• изучить услуги и +21 кейс
• выбрать один из 3 воркшопов
• посмотреть программу, приобрести обучение и открыть материалы
• получить бесплатные материалы после проверки подписки
• связаться со мной для обсуждения проекта

Посмотреть проект

Telegram-бот: @mahagonchar_ai
Обсудить похожую задачу: Написать в Telegram
Другие проекты: Портфолио

Автор проекта - Мария Гончаренко

Разработка чат-ботов, Mini App, клубных подписок и автоматизация процессов.