feat: страница /ai-dev/ — AI-разработка и проекты, карточка в Активности

This commit is contained in:
Nikolay Mamadaev committed 2026-10-07 12:52:10 +02:00
1 parent 39dad71bd1
commit 52485a17c4
10 files changed
+1895 -810

No files matched your search

+351
View File
@@ -0,0 +1,351 @@
<!DOCTYPE html>
<html lang="ru" data-theme="dark" data-radius="medium">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta
name="description"
content="Николай Мамадаев, AI-разработчик. Делаю целые продукты: Telegram-боты, MCP-серверы, плагины для Figma и Obsidian, desktop-утилиты."
/>
<title>AI-разработка · Николай Мамадаев</title>
{{> head-links}}
{{> head-plyr}}
<style>
.ai-page {
max-width: 52rem;
margin: 0 auto;
}
.ai-page h2 {
margin: 2.25rem 0 0.85rem;
font-size: clamp(1.15rem, 2vw, 1.35rem);
font-weight: 700;
color: var(--text);
}
.ai-page .section__prose {
margin-bottom: 0.75rem;
color: var(--text);
}
.ai-page a:not(.btn) {
color: var(--accent);
}
/* Сетка карточек проектов: 2 колонки, схлопывается в одну на мобильном */
.ai-projects {
list-style: none;
margin: 1.25rem 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1rem;
}
.ai-projects > li {
margin: 0;
}
.ai-projects__media {
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--line);
margin-bottom: 0.7rem;
background: var(--surface);
}
.ai-projects__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.ai-projects__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
}
.ai-projects__title {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
color: var(--text);
}
.ai-projects__stack {
margin: 0.3rem 0 0;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.78rem;
color: var(--text-muted);
}
.ai-projects__desc {
margin: 0.45rem 0 0;
font-size: 0.95rem;
color: var(--text);
}
.ai-projects__links {
list-style: none;
margin: 0.6rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem 0.9rem;
font-size: 0.85rem;
}
/* Навыки — компактные чипы переиспользуют стили тегов карточек активности */
.ai-stack-list {
list-style: none;
margin: 1rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.ai-stack-list li {
margin: 0;
padding: 0.3rem 0.7rem;
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.8rem;
color: var(--text-muted);
}
</style>
</head>
<body>
{{> header-case}}
{{> fab-stack}}
<main id="case-main" class="section section--tight">
<div class="section__inner ai-page">
<p class="hero__eyebrow">AI-разработка · идея, код, деплой</p>
<h1 class="case-page__h1">Делаю целые продукты</h1>
<p class="case-page__sub">Telegram-боты, MCP-серверы, плагины и утилиты. Схема, код, деплой</p>
<p class="section__prose">
Больше десяти лет я проектировал интерфейсы. Теперь довожу идеи до работающего
кода: бэкенд, база данных, деплой. Инфраструктура тоже моя часть работы.
В большинстве проектов код пишет ИИ-агент. Я задаю архитектуру, проверяю
результат и отвечаю за то, что продукт вообще работает.
</p>
<h2 id="roles">Что я делаю</h2>
<ul class="section__prose ai-stack-list">
<li>Продуктовая логика и API</li>
<li>Telegram-боты на aiogram 3</li>
<li>MCP-серверы</li>
<li>Плагины Figma и Obsidian</li>
<li>Автоматизация и агентные пайплайны</li>
</ul>
<h2 id="projects">Проекты</h2>
<ol class="ai-projects">
<li>
<div class="ai-projects__media">
<img
src="{{assetPrefix}}assets/ai-dev/placeholder-01.webp"
alt=""
width="640"
height="400"
loading="lazy"
decoding="async"
/>
</div>
<div class="ai-projects__head">
<h3 class="ai-projects__title">Personal Assistant</h3>
</div>
<p class="ai-projects__stack">Python · aiogram 3 · PostgreSQL</p>
<p class="ai-projects__desc">
Личный ассистент в Telegram: напоминания, планирование дел и работа с LLM
в одном диалоге.
</p>
<ul class="ai-projects__links">
<li><a href="{{casesPrefix}}ai-platform-primo-rpa/" target="_blank" rel="noopener noreferrer">Кейс</a></li>
</ul>
</li>
<li>
<div class="ai-projects__media">
<img
src="{{assetPrefix}}assets/ai-dev/placeholder-02.webp"
alt=""
width="640"
height="400"
loading="lazy"
decoding="async"
/>
</div>
<div class="ai-projects__head">
<h3 class="ai-projects__title">Image Gen Bot</h3>
</div>
<p class="ai-projects__stack">Python · aiogram 3 · Redis · PostgreSQL</p>
<p class="ai-projects__desc">
Бот для генерации изображений: баланс, реферальная программа, админ-логи
в отдельные топики супергруппы.
</p>
<ul class="ai-projects__links">
<li><a href="{{casesPrefix}}ai-platform-primo-rpa/" target="_blank" rel="noopener noreferrer">Кейс</a></li>
</ul>
</li>
<li>
<div class="ai-projects__media">
<img
src="{{assetPrefix}}assets/ai-dev/placeholder-03.webp"
alt=""
width="640"
height="400"
loading="lazy"
decoding="async"
/>
</div>
<div class="ai-projects__head">
<h3 class="ai-projects__title">MCP Image Server</h3>
</div>
<p class="ai-projects__stack">JavaScript · MCP · OpenRouter</p>
<p class="ai-projects__desc">
Собственный MCP-сервер для генерации картинок. Подключается к агентам
как инструмент.
</p>
<ul class="ai-projects__links">
<li><a href="http://x1qnvk08zec2u5cx6yh5iexh.155.212.186.39.sslip.io/admin/mcp-img-gen" target="_blank" rel="noopener noreferrer">Код</a></li>
</ul>
</li>
<li>
<div class="ai-projects__media">
<img
src="{{assetPrefix}}assets/ai-dev/placeholder-01.webp"
alt=""
width="640"
height="400"
loading="lazy"
decoding="async"
/>
</div>
<div class="ai-projects__head">
<h3 class="ai-projects__title">AI assistant</h3>
</div>
<p class="ai-projects__stack">TypeScript · Figma Plugin API</p>
<p class="ai-projects__desc">
Плагин для Figma, который исполняет скрипты прямо в редакторе.
ИИ-ассистент для любого тарифа.
</p>
<ul class="ai-projects__links">
<li><a href="{{casesPrefix}}ai-assistant-figma/" target="_blank" rel="noopener noreferrer">Кейс</a></li>
</ul>
</li>
<li>
<div class="ai-projects__media">
<img
src="{{assetPrefix}}assets/ai-dev/placeholder-02.webp"
alt=""
width="640"
height="400"
loading="lazy"
decoding="async"
/>
</div>
<div class="ai-projects__head">
<h3 class="ai-projects__title">Card Columns</h3>
</div>
<p class="ai-projects__stack">TypeScript · Obsidian API</p>
<p class="ai-projects__desc">
Вью для заметок в стиле канбан-доски: группировка по колонкам с фильтрами
по тегам.
</p>
<ul class="ai-projects__links">
<li><a href="{{casesPrefix}}card-columns-obsidian/" target="_blank" rel="noopener noreferrer">Кейс</a></li>
</ul>
</li>
<li>
<div class="ai-projects__media">
<img
src="{{assetPrefix}}assets/ai-dev/placeholder-03.webp"
alt=""
width="640"
height="400"
loading="lazy"
decoding="async"
/>
</div>
<div class="ai-projects__head">
<h3 class="ai-projects__title">Hermes Desktop Plugins</h3>
</div>
<p class="ai-projects__stack">JavaScript · TypeScript · Electron</p>
<p class="ai-projects__desc">
Плагины для рабочего стола Hermes: чип баланса API, звук завершения задачи
и контроль трат.
</p>
<ul class="ai-projects__links">
<li><a href="http://x1qnvk08zec2u5cx6yh5iexh.155.212.186.39.sslip.io/admin/unorouter-balance" target="_blank" rel="noopener noreferrer">Код</a></li>
</ul>
</li>
<li>
<div class="ai-projects__media">
<img
src="{{assetPrefix}}assets/ai-dev/placeholder-01.webp"
alt=""
width="640"
height="400"
loading="lazy"
decoding="async"
/>
</div>
<div class="ai-projects__head">
<h3 class="ai-projects__title">Social Post Writer</h3>
</div>
<p class="ai-projects__stack">Python · aiogram 3 · SQLite</p>
<p class="ai-projects__desc">
Бот, который превращает тезисы в готовый пост под нужную площадку и тон,
учитывая голос автора.
</p>
<ul class="ai-projects__links">
<li><a href="http://x1qnvk08zec2u5cx6yh5iexh.155.212.186.39.sslip.io/admin/social-post-writer-bot" rel="noopener noreferrer">Код</a></li>
</ul>
</li>
<li>
<div class="ai-projects__media">
<img
src="{{assetPrefix}}assets/ai-dev/placeholder-02.webp"
alt=""
width="640"
height="400"
loading="lazy"
decoding="async"
/>
</div>
<div class="ai-projects__head">
<h3 class="ai-projects__title">AI Design Assistant</h3>
</div>
<p class="ai-projects__stack">HTML · CSS · GLSL · WebGL</p>
<p class="ai-projects__desc">
Этот сайт целиком: структура, дизайн-система, шейдеры, CI/CD.
Весь цикл создания вместе с ИИ-агентом.
</p>
<ul class="ai-projects__links">
<li><a href="{{casesPrefix}}site-portfolio/" target="_blank" rel="noopener noreferrer">Кейс</a></li>
</ul>
</li>
</ol>
<h2 id="stack">Стек</h2>
<ul class="section__prose ai-stack-list">
<li>Python</li>
<li>TypeScript</li>
<li>JavaScript</li>
<li>Go</li>
<li>HTML/CSS</li>
<li>GLSL</li>
<li>aiogram 3</li>
<li>FastAPI</li>
<li>PostgreSQL</li>
<li>Redis</li>
<li>SQLite</li>
<li>Docker</li>
<li>Coolify</li>
<li>Gitea</li>
<li>MCP</li>
</ul>
<h2 id="links">Где я это выкладываю</h2>
<p class="section__prose">
Код открыт: <a href="https://github.com/mamadaevv" target="_blank" rel="noopener noreferrer">GitHub</a>
и <a href="http://x1qnvk08zec2u5cx6yh5iexh.155.212.186.39.sslip.io/admin" target="_blank" rel="noopener noreferrer">Gitea</a>.
Сервисы, которые работают прямо сейчас, живут на
<a href="https://secrets-4-me.dynv6.net" target="_blank" rel="noopener noreferrer">secrets-4-me</a>.
</p>
</div>
</main>
</body>
</html>
+207 -191
View File
@@ -1,191 +1,207 @@
<section id="activity" class="section section--surface" aria-labelledby="mini-projects-title" data-reveal>
<div class="section__inner">
<h2 id="mini-projects-title" class="section__title">Активность</h2>
<div
class="skills-intro skills-intro--chat section__prose"
data-skills-intro
role="region"
aria-labelledby="mini-projects-title"
>
<div class="skills-msg" data-skills-msg>
<div class="skills-msg__body">
<p class="skills-msg__author">Николай М:</p>
<p class="skills-msg__text">
Люблю делать разные мини-проекты или делиться чем-то полезным с миром.
</p>
<time class="skills-msg__time" datetime="" data-skills-msg-time></time>
</div>
</div>
</div>
<ol id="mini-projects-list" class="mini-projects-grid" data-mini-projects-list>
<li class="mini-projects-grid__item" data-mp-cells="2">
<a
class="mp-card mp-card--link mp-card--compact"
href="cases/ai-assistant-figma/"
data-glass="false"
aria-label="AI assistant — открыть кейс"
>
<div class="mp-card__body">
<h3 class="mp-card__title">AI assistant</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">Плагин для Figma</li>
</ul>
<p class="mp-card__desc">ИИ помощник для любого тарифа редактора</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2">
<a
class="mp-card mp-card--link mp-card--compact"
href="cases/card-columns-obsidian/"
data-glass="false"
aria-label="Card Columns — открыть кейс"
>
<div class="mp-card__body">
<h3 class="mp-card__title">Card Columns</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">Плагин для Obsidian</li>
</ul>
<p class="mp-card__desc">Отображение карточек с заметками в стиле канбан доски</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2">
<a
class="mp-card mp-card--link mp-card--compact"
href="cases/site-portfolio/"
data-glass="false"
aria-label="Этот сайт — открыть кейс"
>
<div class="mp-card__body">
<h3 class="mp-card__title">Этот сайт</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">Разработка с AI IDE</li>
</ul>
<p class="mp-card__desc">Весь цикл создания сайта при помощи ИИ</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2">
<a
class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
href="https://www.figma.com/@mamadaevv"
target="_blank"
rel="noopener noreferrer"
aria-label="Figma Community — открыть профиль"
>
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="{{assetPrefix}}assets/misc/figma_logo.webp"
alt=""
width="800"
height="800"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">
Figma Community
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<p class="mp-card__desc">
Выкладываю полезные файлы и плагины для сообщества
</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2">
<a
class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
href="https://dribbble.com/mamadaevv"
target="_blank"
rel="noopener noreferrer"
aria-label="Dribbble — открыть профиль"
>
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="{{assetPrefix}}assets/misc/dribbble_logo.webp"
alt=""
width="1024"
height="1024"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">
Dribbble
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<p class="mp-card__desc">
Красивые картинки с элементами интерфейсов
</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2">
<a
class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
href="https://t.me/designnotpizza"
target="_blank"
rel="noopener noreferrer"
aria-label="Дизайн не пицца — открыть канал в Telegram"
>
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="{{assetPrefix}}assets/misc/tg-channel-logo-design_not_pizza.webp"
alt=""
width="640"
height="640"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">
Дизайн не пицца
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<p class="mp-card__desc">
Мой канал про дизайн. Посты на тему продуктового дизайна и полезные ссылки
</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2">
<a
class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
href="https://github.com/mamadaevv"
target="_blank"
rel="noopener noreferrer"
aria-label="GitHub — открыть профиль"
>
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="{{assetPrefix}}assets/misc/github_logo.webp"
alt=""
width="800"
height="800"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">
GitHub
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<p class="mp-card__desc">
Мои проекты и эксперименты с кодом
</p>
</div>
</a>
</li>
</ol>
</div>
</section>
<section id="activity" class="section section--surface" aria-labelledby="mini-projects-title" data-reveal>
<div class="section__inner">
<h2 id="mini-projects-title" class="section__title">Активность</h2>
<div
class="skills-intro skills-intro--chat section__prose"
data-skills-intro
role="region"
aria-labelledby="mini-projects-title"
>
<div class="skills-msg" data-skills-msg>
<div class="skills-msg__body">
<p class="skills-msg__author">Николай М:</p>
<p class="skills-msg__text">
Люблю делать разные мини-проекты или делиться чем-то полезным с миром.
</p>
<time class="skills-msg__time" datetime="" data-skills-msg-time></time>
</div>
</div>
</div>
<ol id="mini-projects-list" class="mini-projects-grid" data-mini-projects-list>
<li class="mini-projects-grid__item" data-mp-cells="2">
<a
class="mp-card mp-card--link mp-card--compact"
href="ai-dev/"
data-glass="false"
aria-label="AI-разработка — открыть страницу"
>
<div class="mp-card__body">
<h3 class="mp-card__title">AI-разработка</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">Боты · MCP · плагины</li>
</ul>
<p class="mp-card__desc">Не только дизайн, а целые продукты: от API до деплоя</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2">
<a
class="mp-card mp-card--link mp-card--compact"
href="cases/ai-assistant-figma/"
data-glass="false"
aria-label="AI assistant — открыть кейс"
>
<div class="mp-card__body">
<h3 class="mp-card__title">AI assistant</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">Плагин для Figma</li>
</ul>
<p class="mp-card__desc">ИИ помощник для любого тарифа редактора</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2">
<a
class="mp-card mp-card--link mp-card--compact"
href="cases/card-columns-obsidian/"
data-glass="false"
aria-label="Card Columns — открыть кейс"
>
<div class="mp-card__body">
<h3 class="mp-card__title">Card Columns</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">Плагин для Obsidian</li>
</ul>
<p class="mp-card__desc">Отображение карточек с заметками в стиле канбан доски</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2">
<a
class="mp-card mp-card--link mp-card--compact"
href="cases/site-portfolio/"
data-glass="false"
aria-label="Этот сайт — открыть кейс"
>
<div class="mp-card__body">
<h3 class="mp-card__title">Этот сайт</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">Разработка с AI IDE</li>
</ul>
<p class="mp-card__desc">Весь цикл создания сайта при помощи ИИ</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2">
<a
class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
href="https://www.figma.com/@mamadaevv"
target="_blank"
rel="noopener noreferrer"
aria-label="Figma Community — открыть профиль"
>
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="{{assetPrefix}}assets/misc/figma_logo.webp"
alt=""
width="800"
height="800"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">
Figma Community
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<p class="mp-card__desc">
Выкладываю полезные файлы и плагины для сообщества
</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2">
<a
class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
href="https://dribbble.com/mamadaevv"
target="_blank"
rel="noopener noreferrer"
aria-label="Dribbble — открыть профиль"
>
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="{{assetPrefix}}assets/misc/dribbble_logo.webp"
alt=""
width="1024"
height="1024"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">
Dribbble
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<p class="mp-card__desc">
Красивые картинки с элементами интерфейсов
</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2">
<a
class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
href="https://t.me/designnotpizza"
target="_blank"
rel="noopener noreferrer"
aria-label="Дизайн не пицца — открыть канал в Telegram"
>
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="{{assetPrefix}}assets/misc/tg-channel-logo-design_not_pizza.webp"
alt=""
width="640"
height="640"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">
Дизайн не пицца
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<p class="mp-card__desc">
Мой канал про дизайн. Посты на тему продуктового дизайна и полезные ссылки
</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2">
<a
class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
href="https://github.com/mamadaevv"
target="_blank"
rel="noopener noreferrer"
aria-label="GitHub — открыть профиль"
>
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="{{assetPrefix}}assets/misc/github_logo.webp"
alt=""
width="800"
height="800"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">
GitHub
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<p class="mp-card__desc">
Мои проекты и эксперименты с кодом
</p>
</div>
</a>
</li>
</ol>
</div>
</section>