Кейсы и проекты, список (дополняемый)
Ниже собраны живые примеры интерфейсов и мини-игр, которые я разрабатывал «с нуля» без бэкенда и сторонних CMS. Все кейсы открываются в браузере, работают офлайн и демонстрируют именно фронтенд-часть: верстку, логику, анимацию и производительность.
UI / UX детали
Тонкая настройка цвета, тени, микро-анимаций и фидбеков на каждое действие.
Производительность
Метрики Lighthouse, FPS-каунтеры и «чистый» бандл без лишних килобайт.
Интерактив
Canvas, WebGL, drag-n-drop и игровые механики на чистом JavaScript.
Экспорт данных
Генерация CSV, JSON или изображений прямо в браузере без сервера.
👉 Нажмите «Посмотреть проект», чтобы открыть демо в новой вкладке. Исходный код каждого кейса доступен на GitHub по запросу.
Проекты и выполненные Кейсы
Описание проекта
Программа для контроля своего времени с интуитивным интерфейсом и подробной статистикой. Помогает эффективно планировать и отслеживать затраты времени.
Основные функции:
- Учет времени по проектам и задачам
- Графики и отчеты по продуктивности
- Экспорт данных в CSV
- Настраиваемые категории и теги
Использованные технологии
Скриншоты проекта:
Описание проекта
Администратор сети, разработанный на Python и NMap. Предназначен для мониторинга и управления сетевой безопасностью.
Основные функции:
- Сканирование сети и устройств
- Обнаружение открытых портов
- Мониторинг активности в сети
- Генерация отчетов о безопасности
Использованные технологии
Скриншоты проекта:
Описание проекта
Полный рефакторинг и переписывание игры с React (3000+ строк) на чистый Vanilla JS. Цель — улучшить производительность, сократить время загрузки и убрать зависимости.
Ключевые улучшения
- Уменьшение размера бандла на 85 % (без React + Webpack).
- Ускорение первой отрисовки на 40 % за счёт отказа от VDOM.
- Архитектура «Entity–Component–System» на чистых классах ES6.
- Анимация через
requestAnimationFrameи Canvas 2D. - Локальное хранилище состояния без сторонних библиотек.
Использованные технологии
Метрики
- -60 % строк кода
- -85 % зависимостей
- +40 % производительности
Скриншоты до / после
Слева — React-версия, справа — Vanilla JS. Визуально идентично, но скорость загрузки и FPS выросли.
Описание проекта
Браузерный генератор статических сайтов из Markdown. Drag-and-drop файл → получаем готовый HTML-сайт за 60 секунд, без серверов.
- Pure JavaScript (ES2023)
- Live-preview и instant ZIP-экспорт
- Responsive тема + SEO meta-теги
- Работает офлайн, вес < 150 KB
Технологии
Описание проекта
Внутренний сервис для деплоя ПО в закрытых сетях. Python-backend отправляет плейбуки Ansible по SSH и отслеживает статус установки на каждом хосте в реальном времени.
- REST API:
/deploy,/status,/logs - Ansible-роли для SAP, Docker, PostgreSQL, Nginx
- WebSocket-стрим логов установки
- JWT-авторизация и RBAC
Технологии
Скриншоты
Описание проекта
Личный репозиторий «Python-скриптотека», который я собирал для себя и теперь делюсь с сообществом. Начинается с самых базовых логических операций и заканчивается алгоритмическими паттернами, которые можно «копипастить» в любой проект без лишней головной боли.
- 100+ примеров от
if/elseдо рекурсивных деревьев - Готовые паттерны: «обход графа», «декораторы», «генераторы», «кэш»
- Пошаговые комментарии + playground-файлы
- Zero-dependency: запускается в любом Python ≥ 3.8
Использованные технологии
Roadmap
- Сети, БД, тесты, асинхронность, фреймворки
- JIT-компиляция, профилирование, мультипроцессинг
Что будет
Мини игра с не Мини сюжетом. Сюжет игры из личной вселенной, исторически сложенный. Процедурная генерация, продвинутая физика (логика). Файловое сохранение - без серверной части.
- Дизайн - в разработкев
- Ключевая механика - в разработке
- Физика - в разработке
- Работает на всех устройсвах - vanila JS, без привязки к типу устройств.
Будущий стек
Что дальше?
Здесь появятся новые кейсы после рефакторинга: React → Vanilla JS, Vue → Vanilla JS, Svelte → Vanilla JS и другие миграции. Следите за обновлениями
- Zero-dependency миграции
- Performance-сравнения
- Шаблоны и гайды в code-ing
- Различное - нужное и не очень