RU (выбран)EN
Написать (откроется в новой вкладке)

Лист 01 Вступление

Сам рисую. Сам собираю.

Дизайн и разработка сайтов, Telegram‑ботов и мини‑приложений — одним человеком. Макет не уходит «другому разработчику», поэтому в продукте всё ровно так, как на эскизе.

Написать в Telegram (откроется в новой вкладке) Смотреть работы
Делаю
Сайты и лендинги
Telegram‑боты
Mini Apps
Анимации интерфейсов
Готовый главный экран мини‑приложения барбершопа в тёмной теме
360R2467
Рис. 1. Главный экран мини‑приложения «Барбершоп на Примерной». Слева эскиз, справа то, что собрано, — разделитель можно двигать.

Лист 02 Работы

Работы

Два проекта. Оба открываются по ссылке и работают без Telegram и регистрации.

Лист 02.1. Запись экрана

02.1 Telegram Mini App и бот

Барбершоп на Примерной

Запись к мастеру в три шага прямо в Telegram. Мини‑приложение и бот работают с одной базой: запись, сделанная в чате, видна в приложении, и наоборот.

ПлатформаTelegram Mini App и бот
Экраны8: главная, мои записи, контакты, три шага записи, проверка, талон
Темысветлая и тёмная, подстраиваются под Telegram; 4 палитры
Стеклоblur 16 px только на навигации — так не тормозит на iPhone
Переходы110–190 мс
СтекHTML, CSS, JS · Python, aiogram 3, aiohttp · SQLite
Открыть демо (откроется в новой вкладке) barbershop.anorrodev.tech

Сценарий записи

5 экранов, 3 шага

  1. 1Услуга

  2. 2Мастер

  3. 3Время

  4. 4Проверка

  5. 5Готово

  1. Прогресс «шаг 1 из 3» всегда на виду.

  2. «Любой мастер» — сразу все свободные окна.

  3. Доплата за топ‑мастера видна до выбора, а не в чеке.

  4. Точка под датой — есть окна; зачёркнутая — всё занято.

  5. Время разбито на утро, день и вечер.

  6. После записи «печатается» талон — как чек из принтера.

02.2 Веб-концепт той же записи

«Столб»

Без экранов и вкладок: всё расписание намотано на 3D‑столб барбершопа. Крутите спираль, колпаками выбирайте услугу и мастера, потяните цепочку — и вы записаны.

Платформавеб: телефон и десктоп
Отрисовкаcanvas 2D, инерция и доводка до свободного слота
ШрифтRoboto Flex: ширина цифр зависит от скорости вращения
Доступностькаждый жест продублирован кнопкой и клавиатурой
СтекJavaScript, Canvas 2D, View Transitions
Открыть демо (откроется в новой вкладке) …/pole

  1. Верхний колпак — выбор услуги.

  2. Лупа увеличивает слот напротив времени.

  3. Спираль — это расписание: виток — один рабочий день, сегмент — 30 минут. Красное — свободно.

  4. Нижний колпак — выбор мастера.

  5. Потяните цепочку — загорится лампа, талон улетит в «Мои».

  6. Цифры растягиваются, пока столб крутится.

  7. То же самое — кнопками и с клавиатуры.

Десктопная версия «Столба»: время 10:00 и столб с расписанием
Лист 02.2. Та же запись на телефоне: столб крутится пальцем.

02.3 Свободный лист

Здесь будет ваш проект

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

Обсудить проект (откроется в новой вкладке)

Лист 03 Обо мне

Обо мне

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

Больше всего люблю Telegram Mini Apps и интерфейсы с характером: стекло, свет, инерцию. И с тем же вниманием делаю невидимую часть — бота, базу данных, сервер.

Условные обозначения

  • Сплошная — то, что видит человек: интерфейс, анимации, тексты кнопок.

  • Штриховая — то, что под капотом: бот, база данных, сервер, публикация.

  • Штрихпунктирная — ось — путь человека от первого экрана до записи или покупки.

  • Красная — правки. Вношу их сам, пока их никто не заметил.

Спецификация

Поз.РазделСоставЗачем
1Дизайнинтерфейсы, дизайн-системы, прототипыкак продукт выглядит и ощущается
2ВёрсткаHTML, CSS, JavaScript, TypeScriptсайты и мини‑приложения
3ФреймворкиReact, Next.js, Tailwindкогда проект растёт
4ДвижениеCSS, Canvas 2D, GSAP, View Transitionsанимации, которые объясняют
5TelegramBot API, Mini Appsботы и мини‑приложения
6СерверPython, aiogram 3, aiohttp, SQLiteлогика ботов и данные
7ПубликацияGit, GitHub, Cloudflare Pages, Azureзапуск и обновления

Технические требования

  1. Интерфейс должен ощущаться живым — и не тормозить на телефоне.
  2. Анимация объясняет, что произошло. Если не объясняет — её нет.
  3. Демо открывается по ссылке, без регистрации.
  4. Что нарисовано, то и собрано. Без «потом поправим».

Лист 04 Отзывы

Отзывы

Замечания заказчиков
№ЗамечаниеЗаказчикДата
1Пока пусто: портфолио только открылось. Первая строка может быть вашей.
2
3
Стать первым заказчиком (откроется в новой вкладке)

Лист 05 Контакты

Обсудим задачу?

Напишите пару предложений о проекте — отвечу и предложу, с чего начать.

Написать в Telegram (откроется в новой вкладке)
РазработалanorroDev
Telegram @anorroDev (откроется в новой вкладке)
Почта anorrodev@gmail.com
GitHubgithub.com/anorroDev (откроется в новой вкладке)
Заказчиквы
Лист05 Листов05
Масштаб1:1 Дата2026