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

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

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

Написать в Telegram Смотреть работы

Делаю: Сайты и лендинги; Telegram‑боты; Mini Apps; Анимации интерфейсов

Готовый главный экран мини‑приложения барбершопа в тёмной теме — **Рис. 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Услуга
2Мастер
3Время
4Проверка
5Готово

Прогресс «шаг 1 из 3» всегда на виду.
«Любой мастер» — сразу все свободные окна.
Доплата за топ‑мастера видна до выбора, а не в чеке.
Точка под датой — есть окна; зачёркнутая — всё занято.
Время разбито на утро, день и вечер.
После записи «печатается» талон — как чек из принтера.

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

«Столб»

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

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

Открыть демо …/pole

Верхний колпак — выбор услуги.
Лупа увеличивает слот напротив времени.
Спираль — это расписание: виток — один рабочий день, сегмент — 30 минут. Красное — свободно.
Нижний колпак — выбор мастера.
Потяните цепочку — загорится лампа, талон улетит в «Мои».
Цифры растягиваются, пока столб крутится.
То же самое — кнопками и с клавиатуры.

Десктопная версия «Столба»: время 10:00 и столб с расписанием

Лист 02.2. Та же запись на телефоне: столб крутится пальцем.

02.3 Заказ навынос и экран бариста

Кофейня «Зерно»

Две стороны одной системы. Гость в Telegram собирает напиток — разрез стакана перестраивается на глазах, — выбирает время и платит на кассе. Заказ сразу печатается у бариста, а «готово» с планшета возвращается гостю уведомлением.

Платформа	Telegram Mini App гостя и веб-экран бариста для планшета
Связь	заказ сразу на планшете, «готово» — обратно гостю; в демо без сервера
Конструктор	разрез стакана из рецепта: слои в миллилитрах, размер меняет стакан
Telegram	MainButton, BackButton, вибрация, тема и цвет шапки
Стек	HTML, CSS, JS без фреймворков · SVG · Telegram Mini Apps API

Открыть демо coffee.anorrodev.tech

Новый заказ «печатается» на рейке, как чек на кухне.
Синяя полоса и метка — заказ пришёл из Mini App гостя.
Таймер краснеет, если заказ ждёт дольше трёх минут.
«Готово» — и гостю сразу приходит уведомление.
Смена: пауза приёма и стоп-лист — «закончилось» сразу пропадает у гостя.

Экран бариста: талоны в колонках «Новые», «Готовим» и «Готово»

Mini App гостя: латте в разрезе — пена, овсяное молоко, эспрессо и сироп в миллилитрах — **Лист 02.3.** Mini App гостя: размер, молоко и сироп перестраивают разрез стакана.

02.4 Лендинг шиномонтажа · три исполнения

Шиномонтаж «Dezén»

Один бриф — три разных сайта. Шиномонтажу нужно, чтобы клиент сразу видел цену и записывался без звонка. Я собрал это в трёх исполнениях с разным характером: заказчик выбирает настроение, а не цвет кнопки.

Попробовать все три dezen.anorrodev.tech

Платформа	сайт-лендинг: телефон и десктоп
Исполнения	три дизайна на одном контенте: «Дорога», «Премиум», «Пит-стоп»
Языки	словацкий, украинский, английский — у каждого своя валюта (€, ₴, $), адрес и формат номера авто
Внутри	запись на свободное время, цена по размеру диска, отсчёт до сезона, шинный отель
Фото	сгенерированы нейросетью под каждый дизайн, без фотостоков
Стек	HTML, CSS, JS без фреймворков · SVG · сборка на Python

**Лист 02.4.** Один первый экран — три исполнения. Нажмите на любое, чтобы попробовать его вживую; на компьютере исполнение раскрывается под курсором.

Исполнение 1

«Дорога»

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

Цвета
#F2B705 #ECE9E2 #151515 #8FD0F7

Шрифты
Fira Sans Extra Condensed · Fira Mono

Попробовать здесь Открыть сайт (откроется в новой вкладке)
Исполнение 2

«Премиум»

Фото, рейтинг и быстрая запись прямо в первом экране. Спокойный графит и красная кнопка — для тех, кто выбирает сервис по доверию. Запись — мастер в три шага.

Цвета
#0F172A #DC2626 #F4F5F7 #FFFFFF

Шрифты
Inter Tight · Inter

Попробовать здесь Открыть сайт (откроется в новой вкладке)
Исполнение 3

«Пит-стоп»

Чёрный, лайм и огромный шрифт. Секундомер в первом экране, бегущая строка, запись одним экраном — и лаймовый талон с кодом.

Цвета
#0A0A0A #CCFF00 #EDEDED #6B6B6B

Шрифты
Dela Gothic One · Rubik

Попробовать здесь Открыть сайт (откроется в новой вкладке)

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

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

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

Обсудить проект

Лист 03 Обо мне

Обо мне

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

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

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

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

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

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

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

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

Лист 04 Отзывы

Отзывы

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

Стать первым заказчиком

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

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

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

Написать в Telegram

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