Files
site-portfolio/public/index.html
T

1383 lines
83 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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="Продуктовый дизайнер и вайбкодер с опытом более 10 лет. Проектирую цифровые продукты, интерфейсы и дизайн‑системы, совмещая UX, no-code и код для аккуратных рабочих решений."
/>
<title>Николай Мамадаев — продуктовый дизайнер</title>
<script>
(function () {
var FONT_CSS = {
merriweather: "assets/fonts/merriweather.css",
geologica: "assets/fonts/geologica.css",
mono: "assets/fonts/mono.css",
};
try {
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
var d = document.documentElement;
var m = t.mode;
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
var eff =
m === "system"
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light"
: m;
d.dataset.theme = eff;
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
if (h !== null) d.style.setProperty("--theme-h", String(h));
if (s !== null) d.style.setProperty("--theme-s", String(s));
if (l !== null) {
var L = Number(l);
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
}
var hVal = h !== null ? h : 210;
var sVal = s !== null ? s : 90;
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
var H = (((hVal % 360) + 360) % 360) / 360;
var S = Math.min(100, Math.max(0, sVal)) / 100;
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
var r, g, b;
if (S === 0) { r = g = b = Lv; }
else {
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
var p = 2 * Lv - q;
var hue2rgb = function(p, q, t) {
if (t < 0) t += 1; if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
};
r = hue2rgb(p, q, H + 1/3);
g = hue2rgb(p, q, H);
b = hue2rgb(p, q, H - 1/3);
}
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
var rad = t.radius;
if (rad === "soft" || rad === "medium" || rad === "strong") {
d.dataset.radius = rad;
} else {
d.dataset.radius = "medium";
}
var f = t.font;
if (f === "onest") f = "geologica";
if (f === "anonymous") f = "mono";
if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
d.dataset.font = f;
var mb = t.meshBg;
if (mb === "off") {
d.dataset.meshBg = "off";
} else {
d.dataset.meshBg = "on";
}
var href = FONT_CSS[f];
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = href;
link.setAttribute("data-theme-font", f);
document.head.appendChild(link);
}
} catch (e) {}
})();
</script>
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png" />
<link rel="manifest" href="assets/favicon/site.webmanifest" />
<link rel="preload" href="assets/fonts/merriweather.css" as="style" />
<link rel="preload" href="css/main.css" as="style" />
<link rel="preload" href="js/skill-connectors.js" as="script" />
<link rel="modulepreload" href="js/main.js" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/skill-connectors.js" defer></script>
<script type="module" src="js/main.js"></script>
</head>
<body>
<div class="page-mesh-bg" aria-hidden="true"></div>
<a class="skip-link" href="#main">К основному содержимому</a>
<header class="header" data-theme-picker>
<div class="header__inner">
<a class="logo" href="#" aria-label="На главную">НМ</a>
<div class="header__cluster">
<nav class="nav" aria-label="Разделы страницы" data-top-nav>
<a href="#projects">Портфолио</a>
<a href="#experience">Опыт работы</a>
<a href="#skills">Навыки</a>
<a href="#mini-projects">Активность</a>
<a href="#contact">Контакты</a>
</nav>
<div class="nav-more" hidden data-nav-more>
<button type="button" class="nav-more__btn" data-nav-more-btn aria-expanded="false" aria-controls="nav-more-menu-dock nav-more-menu-floating" aria-label="Ещё разделы">
<svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<div id="nav-more-menu-dock" class="nav-more__dock" hidden data-nav-more-menu></div>
</div>
</div>
</div>
</header>
<div class="fab-stack" aria-label="Быстрые действия">
<div class="theme-panel-fab-wrap">
<button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
<span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
<svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
<div class="theme-picker__stack">
<section class="theme-picker__section" aria-labelledby="theme-accent-title">
<h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
<div class="colorpicker" data-colorpicker>
<div class="colorpicker__plane-box">
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
<div class="colorpicker__knob" data-sl-knob></div>
</div>
<div class="colorpicker__hue-wrap">
<label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
<input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
</div>
</div>
</section>
<section class="theme-picker__section" aria-labelledby="theme-mode-title">
<h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
<div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
</div>
</section>
<section class="theme-picker__section" aria-labelledby="theme-radius-title">
<h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
</div>
</section>
<section class="theme-picker__section" aria-labelledby="theme-typography-title">
<h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
</div>
</section>
<section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
<h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
<div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
</div>
</section>
</div>
</div>
</div>
<a class="fab fab--primary" href="#contact" aria-label="Связаться">
<span class="fab-primary__ico" aria-hidden="true"></span>
</a>
</div>
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
<button
type="button"
class="fab fab--secondary glass-neutral content-edit-fab"
data-content-edit-mode-toggle
hidden
aria-pressed="false"
aria-label="Режим правок контента"
title="Режим правок"
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
stroke="currentColor"
stroke-width="1.75"
stroke-linejoin="round"
/>
</svg>
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
</button>
</div>
<main id="main">
<section class="hero" aria-labelledby="hero-title">
<div class="hero__grid">
<div class="hero__text">
<p class="hero__eyebrow">Николай Мамадаев</p>
<h1 id="hero-title" class="hero__title">
Укрощаю сложные интерфейсы
<span class="hero-rotator" data-hero-rotator aria-label="web, mobile, desktop">
<span class="hero-rotator__word" data-hero-rotator-word>web</span>
</span>
</h1>
<div class="hero__actions">
<a class="btn btn--primary btn--flat" href="#contact"><span class="btn__icon" aria-hidden="true"></span><span>Написать мне</span></a>
<a class="btn btn--secondary btn--flat" href="#projects"><span class="btn__icon" aria-hidden="true"></span><span>Смотреть портфолио</span></a>
<a class="btn btn--secondary btn--flat btn--resume" href="resume/"><span class="btn__icon" aria-hidden="true"></span><span>Резюме</span></a>
</div>
</div>
<div class="hero__visual" aria-hidden="true">
<div class="hero__portrait-shell">
<div class="hero__portrait">
<div class="hero__portrait-inner">
<div class="hero__portrait-layers">
<div class="hero__portrait-layer hero__portrait-layer--bg">
<img
class="hero__photo-bg"
src="assets/index/me_static.webp"
alt=""
width="320"
height="320"
loading="eager"
decoding="async"
/>
</div>
<div class="hero__portrait-layer hero__portrait-layer--motion" data-hero-motion-layer>
<video
class="hero__photo-motion"
data-hero-motion-video
data-src="assets/index/me_motion.webm"
poster="assets/index/me_motion.webp"
muted
loop
playsinline
preload="none"
aria-hidden="true"
></video>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="marquee" aria-hidden="true">
<div class="marquee__track">
<div class="marquee__content">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ лет опыта</span>
<span class="hero__tag">Продуктовое мышление</span>
<span class="hero__tag">Дизайн-системы</span>
<span class="hero__tag">Менторство и наставничество</span>
<span class="hero__tag">AI инструменты и вайбкодинг</span>
</div>
<div class="marquee__content" aria-hidden="true">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ лет опыта</span>
<span class="hero__tag">Продуктовое мышление</span>
<span class="hero__tag">Дизайн-системы</span>
<span class="hero__tag">Менторство и наставничество</span>
<span class="hero__tag">AI инструменты и вайбкодинг</span>
</div>
<div class="marquee__content" aria-hidden="true">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ лет опыта</span>
<span class="hero__tag">Продуктовое мышление</span>
<span class="hero__tag">Дизайн-системы</span>
<span class="hero__tag">Менторство и наставничество</span>
<span class="hero__tag">AI инструменты и вайбкодинг</span>
</div>
</div>
</section>
<section id="projects" class="section section--surface" data-reveal>
<div class="section__inner">
<h2 class="section__title">Портфолио</h2>
<ol class="mini-projects-grid" data-mini-projects-list>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
<a class="mp-card mp-card--link mp-card--stack" href="cases/ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="assets/ai-platform-primo-rpa/cover.webp"
alt=""
width="400"
height="225"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">Primo AI Server</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">UX/UI</li>
<li class="mp-card__tag">Web App</li>
</ul>
<p class="mp-card__desc">Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
<a class="mp-card mp-card--link mp-card--stack" href="cases/lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="assets/lunacy/cover.webp"
alt=""
width="400"
height="225"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">Lunacy</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">UX/UI</li>
<li class="mp-card__tag">Desktop App</li>
</ul>
<p class="mp-card__desc">Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
<a class="mp-card mp-card--link mp-card--stack" href="cases/manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="assets/manu-game-maker/cover.webp"
alt=""
width="400"
height="225"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">Игровой движок MANU</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">Product Design</li>
<li class="mp-card__tag">Desktop App</li>
</ul>
<p class="mp-card__desc">Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
<a class="mp-card mp-card--link mp-card--stack" href="cases/mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="assets/mobile-clinic-app/cover.webp"
alt=""
width="400"
height="225"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">Мобильное приложение для сети клиник</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">UX/UI</li>
<li class="mp-card__tag">Mobile App</li>
</ul>
<p class="mp-card__desc">Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
<a class="mp-card mp-card--link mp-card--stack" href="cases/orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="assets/orc-primo-rpa/cover.webp"
alt=""
width="400"
height="225"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">Primo Orc</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">Менторство и наставничество</li>
</ul>
<p class="mp-card__desc">Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
<a class="mp-card mp-card--link mp-card--stack" href="cases/task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="assets/task-distribution-concept/cover.webp"
alt=""
width="400"
height="225"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">Концепт сервиса распределения задач</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">UX/UI</li>
<li class="mp-card__tag">Analytics</li>
</ul>
<p class="mp-card__desc">Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.</p>
</div>
</a>
</li>
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
<a class="mp-card mp-card--link mp-card--stack" href="cases/task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="assets/task-tracker/cover.webp"
alt=""
width="400"
height="225"
loading="lazy"
decoding="async"
/>
</div>
<div class="mp-card__body">
<h3 class="mp-card__title">Таск-трекер для бек-офис системы</h3>
<ul class="mp-card__tags" aria-label="Тип проекта">
<li class="mp-card__tag">Product Design</li>
<li class="mp-card__tag">Web App</li>
</ul>
<p class="mp-card__desc">Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&amp;Drop.</p>
</div>
</a>
</li>
</ol>
</div>
</section><section hidden class="section section--surface" aria-hidden="true">
<div class="section__inner">
<div class="projects__heading">
<h2 class="section__title projects__title">Портфолио</h2>
<div class="projects__controls" aria-label="Навигация по карточкам портфолио">
<button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
<span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
</button>
<button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
<span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
</button>
</div>
</div>
<div class="projects-carousel">
<div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
<div class="projects-carousel__track">
<div class="projects-carousel__spacer" aria-hidden="true"></div>
<article class="projects-carousel__item">
<a class="portfolio-card" href="cases/orc-automation-panel/">
<div class="portfolio-card__body">
<h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
<p class="portfolio-card__summary">
Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
продакшен без остановки релизов.
</p>
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
<li class="portfolio-card__tag">UX/UI</li>
<li class="portfolio-card__tag">Web App</li>
</ul>
</div>
<div class="portfolio-card__cover" aria-hidden="true">
<img
class="portfolio-card__image"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-defer-src="assets/orc-primo-rpa/cover.webp"
alt=""
width="400"
height="225"
decoding="async"
/>
</div>
</a>
</article>
<article class="projects-carousel__item">
<a class="portfolio-card" href="cases/ai-platform-primo-rpa/">
<div class="portfolio-card__body">
<h3 class="portfolio-card__title">Платформа для работы с AI</h3>
<p class="portfolio-card__summary">
Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
автоматизации и Smart OCR.
</p>
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
<li class="portfolio-card__tag">UX/UI</li>
<li class="portfolio-card__tag">Web App</li>
</ul>
</div>
<div class="portfolio-card__cover" aria-hidden="true">
<img
class="portfolio-card__image"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-defer-src="assets/ai-platform-primo-rpa/cover.webp"
alt=""
width="400"
height="225"
decoding="async"
/>
</div>
</a>
</article>
<article class="projects-carousel__item">
<a class="portfolio-card" href="cases/task-tracker/">
<div class="portfolio-card__body">
<h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
<p class="portfolio-card__summary">
Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&amp;Drop.
</p>
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
<li class="portfolio-card__tag">Product Design</li>
<li class="portfolio-card__tag">Web App</li>
</ul>
</div>
<div class="portfolio-card__cover" aria-hidden="true">
<img
class="portfolio-card__image"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-defer-src="assets/task-tracker/cover.webp"
alt=""
width="400"
height="225"
decoding="async"
/>
</div>
</a>
</article>
<article class="projects-carousel__item">
<a class="portfolio-card" href="cases/manu-game-maker/">
<div class="portfolio-card__body">
<h3 class="portfolio-card__title">Игровой движок MANU</h3>
<p class="portfolio-card__summary">
Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
проработка сотен сложных пользовательских сценариев.
</p>
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
<li class="portfolio-card__tag">Product Design</li>
<li class="portfolio-card__tag">Desktop App</li>
</ul>
</div>
<div class="portfolio-card__cover" aria-hidden="true">
<img
class="portfolio-card__image"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-defer-src="assets/manu-game-maker/cover.webp"
alt=""
width="400"
height="225"
decoding="async"
/>
</div>
</a>
</article>
<article class="projects-carousel__item">
<a class="portfolio-card" href="cases/lunacy/">
<div class="portfolio-card__body">
<h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
<p class="portfolio-card__summary">
Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
интерфейсной логики.
</p>
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
<li class="portfolio-card__tag">UX/UI</li>
<li class="portfolio-card__tag">Desktop App</li>
</ul>
</div>
<div class="portfolio-card__cover" aria-hidden="true">
<img
class="portfolio-card__image"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-defer-src="assets/lunacy/cover.webp"
alt=""
width="400"
height="225"
decoding="async"
/>
</div>
</a>
</article>
<article class="projects-carousel__item">
<a class="portfolio-card" href="cases/mobile-clinic-app/">
<div class="portfolio-card__body">
<h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
<p class="portfolio-card__summary">
Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
</p>
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
<li class="portfolio-card__tag">UX/UI</li>
<li class="portfolio-card__tag">Mobile App</li>
</ul>
</div>
<div class="portfolio-card__cover" aria-hidden="true">
<img
class="portfolio-card__image"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-defer-src="assets/mobile-clinic-app/cover.webp"
alt=""
width="400"
height="225"
decoding="async"
/>
</div>
</a>
</article>
<article class="projects-carousel__item">
<a class="portfolio-card" href="cases/task-distribution-concept/">
<div class="portfolio-card__body">
<h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
<p class="portfolio-card__summary">
Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
процессов и удобство командной работы.
</p>
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
<li class="portfolio-card__tag">UX/UI</li>
<li class="portfolio-card__tag">Analytics</li>
</ul>
</div>
<div class="portfolio-card__cover" aria-hidden="true">
<img
class="portfolio-card__image"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-defer-src="assets/task-distribution-concept/cover.webp"
alt=""
width="400"
height="225"
decoding="async"
/>
</div>
</a>
</article>
<article class="projects-carousel__item">
<a class="portfolio-card" href="cases/obsidian-plugin-columns-view/">
<div class="portfolio-card__body">
<h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
<p class="portfolio-card__summary">
Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
колончатого отображения прямо в редакторе Obsidian.
</p>
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
<li class="portfolio-card__tag">UX/UI</li>
<li class="portfolio-card__tag">Plugin</li>
</ul>
</div>
<div class="portfolio-card__cover" aria-hidden="true">
<img
class="portfolio-card__image"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-defer-src="assets/obsidian-plugin-columns-view/filter use.webp"
alt=""
width="400"
height="225"
decoding="async"
/>
</div>
</a>
</article>
<div class="projects-carousel__spacer" aria-hidden="true"></div>
</div>
</div>
<button
type="button"
class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
data-projects-edge-prev
aria-label="Прокрутить портфолио влево"
></button>
<button
type="button"
class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
data-projects-edge-next
aria-label="Прокрутить портфолио вправо"
></button>
</div>
</div>
</section>
<section id="experience" class="section section--surface" aria-labelledby="experience-title" data-reveal>
<div class="section__inner">
<h2 id="experience-title" class="section__title">Опыт работы</h2>
<ol id="experience-list" class="experience-grid">
<li class="experience-grid__item">
<div class="exp-card" data-exp-order="1">
<div class="exp-card__time-row">
<span class="exp-card__period">Январь 2026 — Настоящее время</span>
</div>
<h3 class="exp-card__company">
Astratech
</h3>
<p class="exp-card__desc">
Разработка и поддержка цифровых систем и инструментов для повышения эффективности сотрудников.
</p>
</div>
</li>
<li class="experience-grid__item">
<a
class="exp-card exp-card--link"
href="https://primo-rpa.com/"
target="_blank"
rel="noopener noreferrer"
data-exp-order="2"
aria-label="Primo RPA — открыть сайт компании"
>
<div class="exp-card__time-row">
<span class="exp-card__period">Февраль 2023 — Ноябрь 2025</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">2 года 10 месяцев</span>
</div>
<h3 class="exp-card__company">
Primo RPA
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
Платформа для автоматизации бизнес‑процессов с комплексом продуктов: студией для создания роботов, оркестратором для их управления, Idea Hub для отбора процессов и AI‑серверами для работы с моделями и распознаванием данных.
</p>
</a>
</li>
<li class="experience-grid__item">
<a
class="exp-card exp-card--link"
href="https://icons8.com/lunacy"
target="_blank"
rel="noopener noreferrer"
data-exp-order="3"
aria-label="Icons8 (Lunacy) — открыть сайт компании"
>
<div class="exp-card__time-row">
<span class="exp-card__period">Июль 2022 — Январь 2023</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">7 месяцев</span>
</div>
<h3 class="exp-card__company">
Icons8 (Lunacy)
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
Векторный редактор для UI/UX и веб‑дизайна с поддержкой Sketch‑файлов, встроенной библиотекой иконок/фото/иллюстраций и набором AI‑инструментов для ускорения рутинных задач.
</p>
</a>
</li>
<li class="experience-grid__item">
<a
class="exp-card exp-card--link"
href="https://manu.co/"
target="_blank"
rel="noopener noreferrer"
data-exp-order="4"
aria-label="MANU Video Game Maker — открыть сайт компании"
>
<div class="exp-card__time-row">
<span class="exp-card__period">Январь 2019 — Декабрь 2021</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">3 года</span>
</div>
<h3 class="exp-card__company">
MANU Video Game Maker
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
No-code/low-code платформа для создания 2D и 3D игр без необходимости писать код.
</p>
</a>
</li>
<li class="experience-grid__item" data-exp-extra hidden>
<a
class="exp-card exp-card--link"
href="https://www.orioninnovation.com/"
target="_blank"
rel="noopener noreferrer"
data-exp-order="6"
aria-label="Orion Innovation (ex MERA) — открыть сайт компании"
>
<div class="exp-card__time-row">
<span class="exp-card__period">Июль 2016 — Октябрь 2017</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">1 год 4 месяца</span>
</div>
<h3 class="exp-card__company">
Orion Innovation (ex MERA)
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
Международная технологическая компания, специализирующаяся на заказной разработке и инженерных решениях для крупных корпоративных клиентов.
</p>
</a>
</li>
<li class="experience-grid__item" data-exp-extra hidden>
<a
class="exp-card exp-card--link"
href="https://aegees.com/"
target="_blank"
rel="noopener noreferrer"
data-exp-order="5"
aria-label="Aegees — открыть сайт компании"
>
<div class="exp-card__time-row">
<span class="exp-card__period">Октябрь 2017 — Декабрь 2018</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">1 год 3 месяца</span>
</div>
<h3 class="exp-card__company">
Aegees
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
Защищённый мессенджер с end‑to‑end шифрованием и отсутствием хранения сообщений на серверах, сфокусированный на максимальной приватности пользователей.
</p>
</a>
</li>
<li class="experience-grid__item" data-exp-extra hidden>
<a
class="exp-card exp-card--link"
href="https://spaceshipapps.ru/"
target="_blank"
rel="noopener noreferrer"
data-exp-order="7"
aria-label="SpaceshipApps — открыть сайт компании"
>
<div class="exp-card__time-row">
<span class="exp-card__period">Июнь 2015 — Июнь 2016</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">1 год 1 месяц</span>
</div>
<h3 class="exp-card__company">
SpaceshipApps
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
Студия разработки мобильных и веб‑приложений под ключ для бизнеса и предпринимателей.
</p>
</a>
</li>
</ol>
<div class="experience__actions">
<button
type="button"
class="btn btn--secondary btn--flat experience__toggle"
data-exp-toggle
aria-expanded="false"
aria-controls="experience-list"
>
Показать все
</button>
</div>
</div>
</section>
<section id="skills" class="section section--tight" aria-labelledby="skills-title" data-reveal>
<div class="section__inner">
<h2 id="skills-title" class="section__title">Навыки</h2>
<div
class="skills-intro skills-intro--chat section__prose"
data-skills-intro
role="region"
aria-labelledby="skills-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 class="skills-msg" data-skills-msg>
<div class="skills-msg__body">
<p class="skills-msg__text">
Ниже я собрал примеры задач от бизнеса и то, как я их решал
</p>
<time class="skills-msg__time" datetime="" data-skills-msg-time></time>
</div>
</div>
</div>
<div class="skills-categories">
<section class="skills-category" aria-labelledby="skills-cat-1-heading">
<div class="skills-category__layout">
<h3 id="skills-cat-1-heading" class="skills-category__title">
<button
class="skills-category__toggle"
type="button"
aria-expanded="false"
aria-controls="skills-cat-1"
data-skills-accordion-toggle
>
<span class="skills-category__title-text">Продуктовый подход и логика в интерфейсах</span>
<span class="skills-category__chevron" aria-hidden="true"></span>
</button>
</h3>
<div id="skills-cat-1" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
<article class="skill-task-card">
<p class="skill-task-card__task">
Сделать сложный продукт понятнее, чтобы пользователи доходили до ключевых действий.
</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Анализирую путь пользователя и убираю шаги, которые не помогают ему продвинуться к цели.
</p>
<p class="skill-task-card__solution">
Проектирую флоу так, чтобы в каждом шаге было понятно, что происходит и что делать дальше.
</p>
<p class="skill-task-card__solution">
Делаю так, чтобы даже сложный функционал выглядел естественно, использовал знакомые паттерны и привычные
элементы интерфейса.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Улучшить первые шаги в продукте и подвести человека к первой ценности.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Убираю всё, что отвлекает от первого результата: лишние шаги, необязательные поля, второстепенные детали.
</p>
<p class="skill-task-card__solution">
Заменяю длинные объяснения небольшими подсказками в момент, когда они действительно нужны без
длинных туров и сложных инструкций.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Снизить нагрузку на техподдержку за счёт интерфейса.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Собираю частые обращения и на их основе упрощаю сценарий и интерфейс так, чтобы человек мог решить
вопрос самостоятельно.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Связать интерфейс с целями продукта, а не только с набором фич.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Начинаю с того, какую задачу бизнеса и пользователя мы решаем, и уже под это собираю сценарии и
интерфейс.
</p>
<p class="skill-task-card__solution">
Перевожу проблемы в сценариях в понятные гипотезы и помогаю продакту выбрать, что действительно даёт
эффект.
</p>
</div>
</article>
</div>
</div>
</section>
<section class="skills-category" aria-labelledby="skills-cat-2-heading">
<div class="skills-category__layout">
<h3 id="skills-cat-2-heading" class="skills-category__title">
<button
class="skills-category__toggle"
type="button"
aria-expanded="false"
aria-controls="skills-cat-2"
data-skills-accordion-toggle
>
<span class="skills-category__title-text">Дизайн‑системы и консистентность</span>
<span class="skills-category__chevron" aria-hidden="true"></span>
</button>
</h3>
<div id="skills-cat-2" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
<article class="skill-task-card">
<p class="skill-task-card__task">
Привести несколько продуктов или модулей к единому виду и логике.
</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Собираю общий UI‑kit и базовые принципы, которые можно использовать во всех продуктах.
</p>
<p class="skill-task-card__solution">
Выделяю повторяющиеся паттерны и свожу их к одной системе, вместо десятка похожих решений.
</p>
<p class="skill-task-card__solution">
Перевожу разрозненные решения в общую дизайн‑систему, чтобы ей было удобно пользоваться и дизайнерам,
и разработчикам.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Сделать интерфейс так, чтобы его можно было спокойно расширять и не городить костыли.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Формулирую простые дизайн‑принципы и правила использования компонентов.
</p>
<p class="skill-task-card__solution">
Настраиваю структуру дизайн‑системы так, чтобы её было реально поддерживать и дополнять новыми паттернами.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Навести порядок в интерфейсах, которые долго росли кусками.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Объединяю похожие решения в общие компоненты и паттерны, убираю дубли и случайные отличия.
</p>
<p class="skill-task-card__solution">
Слежу за тем, чтобы интерфейс выглядел аккуратно и современно: читаемая типографика, иерархия, акценты
без визуального шума.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Обновить внешний вид продукта, чтобы он не выглядел устаревшим на фоне конкурентов.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Начинаю с часто используемых экранов и элементов, чтобы эффект был заметен и для пользователей, и для
бизнеса.
</p>
<p class="skill-task-card__solution">
Подстраиваю этапы обновления под текущую дорожную карту и работу разработки, чтобы не ломать привычные
сценарии и релизы.
</p>
<p class="skill-task-card__solution">
Настраиваю базовый стиль: типографика, цвет, отступы — чтобы интерфейс выглядел аккуратно и современно.
</p>
</div>
</article>
</div>
</div>
</section>
<section class="skills-category" aria-labelledby="skills-cat-3-heading">
<div class="skills-category__layout">
<h3 id="skills-cat-3-heading" class="skills-category__title">
<button
class="skills-category__toggle"
type="button"
aria-expanded="false"
aria-controls="skills-cat-3"
data-skills-accordion-toggle
>
<span class="skills-category__title-text">Исследования, метрики и аналитика</span>
<span class="skills-category__chevron" aria-hidden="true"></span>
</button>
</h3>
<div id="skills-cat-3" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
<article class="skill-task-card">
<p class="skill-task-card__task">
Получить реальную картину поведения пользователей, а не полагаться на догадки команды.
</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Общаюсь с пользователями: смотрю, как они решают свои задачи в продукте и что делают на каждом шаге.
</p>
<p class="skill-task-card__solution">
Перевожу выводы из исследований в конкретные изменения в интерфейсе и сценариях.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Убедиться, что ключевые сценарии работают, прежде чем выкатывать их в прод.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Готовлю простые сценарии юзабилити‑тестов под реальные задачи пользователей.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Понимать, как изменения в интерфейсе влияют на ключевые метрики продукта.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Помогаю описать ключевые события и воронки, которые отражают реальные шаги пользователя.
</p>
<p class="skill-task-card__solution">
Смотрю на метрики вместе с реальными сценариями использования и предлагаю, что в интерфейсе поменять,
чтобы людям было проще и продукт работал лучше.
</p>
</div>
</article>
</div>
</div>
</section>
<section class="skills-category" aria-labelledby="skills-cat-4-heading">
<div class="skills-category__layout">
<h3 id="skills-cat-4-heading" class="skills-category__title">
<button
class="skills-category__toggle"
type="button"
aria-expanded="false"
aria-controls="skills-cat-4"
data-skills-accordion-toggle
>
<span class="skills-category__title-text">Развитие команды дизайнеров и наставничество</span>
<span class="skills-category__chevron" aria-hidden="true"></span>
</button>
</h3>
<div id="skills-cat-4" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
<article class="skill-task-card">
<p class="skill-task-card__task">Выстроить понятные процессы внутри дизайн-команды.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Ввожу регулярные дизайн‑ревью с разбором реализованных задач, где каждый может получить полезную
экологичную обратную связь.
</p>
<p class="skill-task-card__solution">
Договариваюсь о шаблоне постановки задачи и прозрачных критериях приёмки, чтобы всем было ясно,
когда задачу считать действительно законченой.
</p>
<p class="skill-task-card__solution">
Настраиваю порядок работ, который позволяет выполнять как плановые задачи, так и "горящие".
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">
Сделать так, чтобы дизайн, продукт и разработка работали как одна команда, а не три отдельных лагеря.
</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Беру на себя роль связующего: обсуждаю сценарии с продактом, ограничения — с разработкой и фиксирую
решения в интерфейсе.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Нанять и вырастить продуктовых дизайнеров для работы над сложным продуктом.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Помогаю сформировать необходимые требования к кандидату.
</p>
<p class="skill-task-card__solution">
Участвую в отборе: проверяю, как кандидат работает со сценариями, ограничениями и сложными кейсами.
</p>
<p class="skill-task-card__solution">
Выстраиваиваю интервью так, чтобы можно было оценить ход мысли и используемые инструменты.
</p>
<p class="skill-task-card__solution">
Настраиваю онбординг через реальные задачи и регулярные разборы, чтобы дизайнер быстрее разобрался в
продукте и начал приносить пользу.
</p>
<p class="skill-task-card__solution">
Провожу регулярные созвоны один на один с дизайнерами: разбираем решения, точки роста и следующие шаги.
</p>
</div>
</article>
</div>
</div>
</section>
</div>
</div>
</section>
<section id="mini-projects" 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--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="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="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="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--compact"
href="cases/ai-assistant-figma/"
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">Плагин для Figma с AI-функциями.</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/"
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">Плагин для колоночного отображения карточек в Obsidian.</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-with-ai-ide/"
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">Разработка сайта с использованием AI IDE.</p>
</div>
</a>
</li>
</ol>
</div>
</section>
<section id="contact" class="section section--surface section--footerish" data-reveal>
<div class="section__inner">
<h2 class="section__title">Контакты</h2>
<ul class="contact-grid">
<li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
<li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
<li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
<li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5zaXRl" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
</ul>
</div>
</section>
<section class="section section--surface" aria-hidden="true">
<div class="section__inner"></div>
</section>
<footer class="footer">
<div class="footer__inner">
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="cookie-policy/">Политика cookie</a></span>
</div>
</footer>
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
<p class="cookie-notice__text">
Сайт использует cookie для комфортной работы. Подробнее — в
<a href="cookie-policy/" data-cookie-policy-link>политике cookie</a>.
</p>
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
<span>Принять</span>
<span class="cookie-notice__accept-icon" aria-hidden="true">
<img src="assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
</span>
</button>
</aside>
<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
</body>
</html>