From f4404edacad8e0599109bf6089d5a11806760091 Mon Sep 17 00:00:00 2001 From: Nikolay Mamadaev Date: Wed, 7 Oct 2026 19:57:40 +0200 Subject: [PATCH] design: redesign ai-dev with expressive type and project grid --- DESIGN.md | 7 + public/ai-dev/index.html | 267 +++++++++++--------------- public/cases/design-system/index.html | 9 + public/css/main.css | 26 +++ src/pages/ai-dev.html | 267 +++++++++++--------------- src/pages/cases/design-system.html | 9 + 6 files changed, 267 insertions(+), 318 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index bac128c..34413d5 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -186,6 +186,13 @@ | `.skill-task-card` | Карточка навыка (задача + решения) | | `.contact-card` | Контактная карточка (ссылка или действие) | +### Сетка проектов + +| Класс | Назначение | +|---|---| +| `.project-grid` | Сетка карточек проекта: 1 колонка на мобильном, 2 от `680px`, 3 от `1120px`; адаптивные интервалы между карточками | +| `.project-grid > li` | Элемент списка без собственного оформления; внутри используется компонент карточки, например `.mp-card` | + ### Блоки лонгрида | Класс | Назначение | diff --git a/public/ai-dev/index.html b/public/ai-dev/index.html index 85d1a45..b5b90cc 100644 --- a/public/ai-dev/index.html +++ b/public/ai-dev/index.html @@ -219,63 +219,7 @@ - + @@ -374,47 +318,52 @@ -
-
-

AI-разработка · идея, код, деплой

-

Делаю целые продукты

-

Telegram-боты, MCP-серверы, плагины и утилиты. Схема, код, деплой

+
+
+
+
+

AI-разработка · идея, код, деплой

+

От идеи
до продукта.

+
+
+

Проектирую, собираю и запускаю цифровые продукты.

+

+ Больше десяти лет я проектировал интерфейсы. Теперь отвечаю за весь путь: + продуктовую логику, код, базу и инфраструктуру. Код часто пишет ИИ-агент. + Архитектуру и результат проверяю я. +

+
    +
  • Продуктовая логика и API
    • +
  • Telegram-боты
    • +
  • MCP-серверы
    • +
  • Плагины и автоматизация
    • +
+
+
+
-

- Больше десяти лет я проектировал интерфейсы. Теперь довожу идеи до работающего - кода: бэкенд, база данных, деплой. Инфраструктура тоже моя часть работы. - В большинстве проектов код пишет ИИ-агент. Я задаю архитектуру, проверяю - результат и отвечаю за то, что продукт вообще работает. -

- -

Что я делаю

-
    -
  • Продуктовая логика и API
    • -
  • Telegram-боты на aiogram 3
    • -
  • MCP-серверы
    • -
  • Плагины Figma и Obsidian
    • -
  • Автоматизация и агентные пайплайны
    • -
- -

Проекты

+
+
+

01 / Сделано и запущено

+

Проекты

    • -
    • +
-
    +
    1. -
      -
    2. -
      -
    3. -
      -
    4. -
      -
    5. -
      -
    6. -
      -
    7. -
      -
    8. -
      -
    9. -
      -
    10. -
      -
    11. -
      -
    12. -
      -
    +
+
-

Стек

-
    -
  • Python
    • -
  • TypeScript
    • -
  • JavaScript
    • -
  • Go
    • -
  • HTML/CSS
    • -
  • GLSL
    • -
  • aiogram 3
    • -
  • FastAPI
    • -
  • PostgreSQL
    • -
  • Redis
    • -
  • SQLite
    • -
  • Docker
    • -
  • Coolify
    • -
  • Gitea
    • -
  • MCP
    • -
+
+
+
+

02 / Среда, которую я собрал

+

Своя
инфраструктура.

+
+
+

Два VPS. Сервисы под моим контролем.

+

+ Разворачиваю проекты в Docker через Coolify. Traefik ведёт домены и TLS; + Gitea хранит код и запускает деплой. WireGuard соединяет серверы в закрытую + сеть. PostgreSQL и Redis обслуживают ботов и приложения. +

+
    +
  • Coolify
    • +
  • Traefik
    • +
  • Gitea
    • +
  • WireGuard
    • +
  • Docker
    • +
  • PostgreSQL
    • +
  • Redis
    • +
  • XRay
    • +
  • Python · aiogram
    • +
  • TypeScript · JavaScript
    • +
  • Go
    • +
  • GLSL · WebGL
    • +
+

+ У сервисов отдельные схемы в общей базе. Между серверами ходит трафик + через WireGuard, наружу открываются только нужные точки входа. +

+
+
+
-

Инфраструктура

-

- Всё, что я делаю, живёт на двух VPS и не зависит от внешних PaaS. Деплой - автоматический: пуш в ветку поднимает контейнер через Coolify, дальше - реверс-прокси и TLS берёт на себя Traefik. -

-
    -
  • Coolify · self-hosted панель деплоя
    • -
  • Traefik · прокси и сертификаты
    • -
  • Gitea · свой git и CI/CD
    • -
  • WireGuard · меш из нескольких серверов
    • -
  • XRay · VPN для доступа к API
    • -
  • Docker · изоляция сервисов
    • -
  • PostgreSQL · общая база по схемам
    • -
  • Redis · очереди и состояние FSM
    • -
-

- База одна на несколько проектов: каждый бот берёт свою схему, поэтому - сервисы не мешают друг другу, но состояние видно целиком. Доступ между - серверами закрыт WireGuard-туннелями, публичные адреса выдаёт Traefik. -

- - +
+
+

03 / Код и проекты

+

Смотреть дальше

-
+
+
\ No newline at end of file diff --git a/public/cases/design-system/index.html b/public/cases/design-system/index.html index 5480667..8a76e88 100644 --- a/public/cases/design-system/index.html +++ b/public/cases/design-system/index.html @@ -1053,6 +1053,15 @@

.filter-chips / .filter-chip[aria-pressed] + [data-filter-item][data-filter-tag]

+

Сетка проектов

+

Адаптивная сетка карточек: одна колонка на узком экране, две от 680 px и три от 1120 px. Внутри списка используйте существующий компонент карточки.

+ +

.project-grid + .mp-card--stack

+

Карточка портфолио

-
+
+
\ No newline at end of file diff --git a/src/pages/cases/design-system.html b/src/pages/cases/design-system.html index 3c44e95..30e4b2a 100644 --- a/src/pages/cases/design-system.html +++ b/src/pages/cases/design-system.html @@ -744,6 +744,15 @@

.filter-chips / .filter-chip[aria-pressed] + [data-filter-item][data-filter-tag]

+

Сетка проектов

+

Адаптивная сетка карточек: одна колонка на узком экране, две от 680 px и три от 1120 px. Внутри списка используйте существующий компонент карточки.

+ +

.project-grid + .mp-card--stack

+

Карточка портфолио