Files
site-portfolio/public/en/index.html
T
root daa623fe73 feat(mesh-bg): fade-in шейдера фона + modulepreload графа
- canvas стартует с opacity:0 и плавно проявляется (0.9s) при .is-ready
- initPageMeshShader ставит is-ready после первого кадра
- modulepreload page-mesh-shader.js для параллельной загрузки с main.js
- пересборка страниц (build:pages)
2026-09-24 21:37:40 +02:00

1514 lines
78 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="en" 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="Product designer and vibe coder with over 10 years of experience. I design digital products, interfaces and design systems, combining UX, no-code and code for clean, working solutions."
/>
<title>Nikolay Mamadaev — Product Designer</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="modulepreload" href="/js/modules/ui/page-mesh-shader.js" />
<link rel="stylesheet" href="/css/main.css" />
<link rel="canonical" href="https://mamadaevv.site/en/" />
<link rel="alternate" hreflang="ru" href="https://mamadaevv.site/" />
<link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/" />
<link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/" />
<meta name="author" content="Nikolai Mamadaev" />
<meta name="robots" content="index, follow" />
<meta name="theme-color" content="#0f1115" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Nikolai Mamadaev — Product Designer" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="ru_RU" />
<meta property="og:title" content="Nikolay Mamadaev — Product Designer" />
<meta property="og:description" content="Product designer and vibe coder with over 10 years of experience. I design digital products, interfaces and design systems, combining UX, no-code and code for clean, working solutions." />
<meta property="og:url" content="https://mamadaevv.site/en/" />
<meta property="og:image" content="https://mamadaevv.site/assets/og/og-default.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Nikolay Mamadaev — Product Designer" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Nikolay Mamadaev — Product Designer" />
<meta name="twitter:description" content="Product designer and vibe coder with over 10 years of experience. I design digital products, interfaces and design systems, combining UX, no-code and code for clean, working solutions." />
<meta name="twitter:image" content="https://mamadaevv.site/assets/og/og-default.png" />
<meta name="twitter:image:alt" content="Nikolay Mamadaev — Product Designer" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Person",
"@id": "https://mamadaevv.site/#person",
"name": "Nikolai Mamadaev",
"url": "https://mamadaevv.site",
"jobTitle": "Product Designer",
"description": "Product designer with 10+ years of experience. Designing digital products, interfaces and design systems.",
"knowsAbout": [
"UX/UI design",
"product design",
"design systems",
"prototyping",
"Figma",
"no-code"
],
"sameAs": [
"https://t.me/mamadaevv",
"https://vk.com/mamadaevv",
"https://github.com/mamadaevv"
]
},
{
"@type": "WebSite",
"@id": "https://mamadaevv.site/#website",
"url": "https://mamadaevv.site/",
"name": "Nikolai Mamadaev — Product Designer",
"inLanguage": "en",
"author": {
"@id": "https://mamadaevv.site/#person"
},
"publisher": {
"@id": "https://mamadaevv.site/#person"
}
},
{
"@type": "WebPage",
"@id": "https://mamadaevv.site/en/#page",
"url": "https://mamadaevv.site/en/",
"name": "Nikolay Mamadaev — Product Designer",
"description": "Product designer and vibe coder with over 10 years of experience. I design digital products, interfaces and design systems, combining UX, no-code and code for clean, working solutions.",
"isPartOf": {
"@id": "https://mamadaevv.site/#website"
},
"author": {
"@id": "https://mamadaevv.site/#person"
},
"inLanguage": "en"
}
]
}
</script>
<script src="/js/skill-connectors.js" defer></script>
<script type="module" src="/js/main.js"></script>
</head>
<body class="home">
<svg class="liquid-glass-defs" aria-hidden="true" width="0" height="0" focusable="false" style="position:absolute;width:0;height:0;overflow:hidden;pointer-events:none">
<filter id="liquid-glass-displacement" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
<feImage href="../assets/liquid-glass/displacement.png" xlink:href="../assets/liquid-glass/displacement.png" preserveAspectRatio="none" result="lgMap"/>
<feDisplacementMap in="SourceGraphic" in2="lgMap" scale="14" xChannelSelector="R" yChannelSelector="G"/>
</filter>
<filter id="liquid-glass-displacement-btn" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
<feImage href="../assets/liquid-glass/displacement.png" xlink:href="../assets/liquid-glass/displacement.png" preserveAspectRatio="none" result="lgMapBtn"/>
<feDisplacementMap in="SourceGraphic" in2="lgMapBtn" scale="6" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</svg>
<div class="page-mesh-bg" aria-hidden="true"></div>
<a class="skip-link" href="#main">Skip to main content</a>
<header class="header" data-theme-picker>
<div class="header__inner">
<a class="logo" href="#" aria-label="Home">NM</a>
<div class="header__cluster">
<nav class="nav" aria-label="Page sections" data-top-nav>
<a href="#portfolio">Portfolio</a>
<a href="#experience">Experience</a>
<a href="#skills">Skills</a>
<a href="#activity">Activity</a>
<a href="#contact">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="More sections">
<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="Quick actions">
<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="Style settings">
<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="Theme &amp; appearance" 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">Accent color</h3>
<div class="colorpicker" data-colorpicker>
<div class="colorpicker__plane-box">
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Accent saturation and lightness"></canvas>
<div class="colorpicker__knob" data-sl-knob></div>
</div>
<div class="colorpicker__hue-wrap">
<label class="colorpicker__hue-sr" for="theme-hue-slider">Accent hue</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">Theme</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="System"><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="Light"><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="Dark"><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">Corner radius</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="Soft radius"><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="Medium radius"><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="Strong radius"><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">Typography</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">Page background</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="Show background gradient"><span class="theme-mesh-bg-seg__label">On</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="Hide background gradient"><span class="theme-mesh-bg-seg__label">Off</span></button>
</div>
</section>
</div>
</div>
</div>
<a class="fab fab--primary" href="#contact" aria-label="Contact">
<span class="fab-primary__ico" aria-hidden="true"></span>
</a>
</div>
<div class="content-edit-fab-stack" aria-label="Content Edits" 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="Content Editing Mode"
title="Edit Mode"
>
<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">Nikolay Mamadaev</p>
<h1 id="hero-title" class="hero__title">
Taming complex interfaces
<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>Get in touch</span></a>
<a class="btn btn--secondary btn--flat" href="#portfolio"><span class="btn__icon" aria-hidden="true"></span><span>View portfolio</span></a>
<a class="btn btn--secondary btn--flat btn--resume" href="resume/"><span class="btn__icon" aria-hidden="true"></span><span>Resume</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="section marquee marquee--grid" aria-hidden="true" data-reveal>
<div class="section__inner">
<ul class="marquee-grid">
<li class="marquee-grid__cell"><span class="hero__tag">UX/UI</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">10+ years of experience</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Product thinking</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Design systems</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Mentoring &amp; coaching</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">AI tools &amp; vibe coding</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">User Research</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Prototyping</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Usability Testing</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Figma</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">CJM / UJM</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">JTBD</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Information Architecture</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Product-Market Fit</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">ARPU / ARPPU</span></li>
</ul>
</div>
</section>
<section id="portfolio" class="section section--surface" data-reveal>
<div class="section__inner">
<h2 class="section__title">Portfolio</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-bottom" href="cases/ai-platform-primo-rpa/" aria-label="AI platform — open case">
<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="Project type">
<li class="mp-card__tag">UX/UI</li>
<li class="mp-card__tag">Web App</li>
</ul>
<p class="mp-card__desc">Interface for training and using AI models in business processes: data work, automation scenarios, and 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-bottom" href="cases/lunacy/" aria-label="Graphics editor Lunacy — open case">
<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="Project type">
<li class="mp-card__tag">UX/UI</li>
<li class="mp-card__tag">Desktop App</li>
</ul>
<p class="mp-card__desc">Work on the Lunacy interface at Icons8: user flows, complex prototypes, improved functionality and interface logic.</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-bottom" href="cases/manu-game-maker/" aria-label="MANU game engine — open case">
<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 game engine</h3>
<ul class="mp-card__tags" aria-label="Project type">
<li class="mp-card__tag">Product Design</li>
<li class="mp-card__tag">Desktop App</li>
</ul>
<p class="mp-card__desc">Redesign and evolution of the game engine interface: a new working concept, refreshed visual system, and hundreds of complex user scenarios worked through.</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-bottom" href="cases/mobile-clinic-app/" aria-label="Mobile app for a clinic network — open case">
<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">Mobile app for a clinic network</h3>
<ul class="mp-card__tags" aria-label="Project type">
<li class="mp-card__tag">UX/UI</li>
<li class="mp-card__tag">Mobile App</li>
</ul>
<p class="mp-card__desc">Design of a mobile app for booking doctors and managing medical services. Focus on a simple user path, clear navigation, and quick access to the right actions.</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-bottom" href="cases/orc-automation-panel/" aria-label="Web panel for automation orchestration — open case">
<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="Project type">
<li class="mp-card__tag">Mentoring &amp; coaching</li>
</ul>
<p class="mp-card__desc">Primo RPA orchestrator web console: projects, launch and control of RPA bots. Redesign of key screens for production without halting releases.</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-bottom" href="cases/task-distribution-concept/" aria-label="Task distribution service concept — open case">
<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">Task distribution service concept</h3>
<ul class="mp-card__tags" aria-label="Project type">
<li class="mp-card__tag">UX/UI</li>
<li class="mp-card__tag">Analytics</li>
</ul>
<p class="mp-card__desc">A product concept for a service to set, distribute and track tasks, with emphasis on process transparency and comfortable teamwork.</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-bottom" href="cases/task-tracker/" aria-label="Task tracker for a back-office system — open case">
<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">Task tracker for a back-office system</h3>
<ul class="mp-card__tags" aria-label="Project type">
<li class="mp-card__tag">Product Design</li>
<li class="mp-card__tag">Web App</li>
</ul>
<p class="mp-card__desc">Interface for planning and distributing tasks in the operations department: shared pool, personal ToDo, per-assignee overview; tabs, filters, board / list / table views, drag &amp; drop.</p>
</div>
</a>
</li>
</ol>
</div>
</section>
<script>
(function () {
// Пастельная («постельная») палитра тегов портфолио.
// Цвет детерминирован по тексту тега — один и тот же текст всегда один цвет.
function hashStr(s) {
var h = 0;
for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
return h;
}
function colorTags(root) {
var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
for (var i = 0; i < tags.length; i++) {
var t = tags[i];
var key = (t.textContent || '').trim().toLowerCase();
if (!key) continue;
var hue = hashStr(key) % 360;
t.style.setProperty('--tag-hue', String(hue));
}
}
colorTags(document);
})();
</script>
<section hidden class="section section--surface" aria-hidden="true">
<div class="section__inner">
<div class="projects__heading">
<h2 class="section__title projects__title">Portfolio</h2>
<div class="projects__controls" aria-label="Portfolio card navigation">
<button type="button" class="projects__nav-btn" data-projects-prev aria-label="Scroll left" 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="Scroll right" 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">Web panel for automation orchestration</h3>
<p class="portfolio-card__summary">
Primo RPA orchestrator web console: projects, launch and control of RPA bots. Redesign of key screens for production without halting releases.
</p>
<ul class="portfolio-card__tags" aria-label="Key tags">
<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">Platform for working with AI</h3>
<p class="portfolio-card__summary">
Interface for training and using AI models in business processes: data work, automation scenarios, and Smart OCR.
</p>
<ul class="portfolio-card__tags" aria-label="Key tags">
<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">Task tracker for a back-office system</h3>
<p class="portfolio-card__summary">
Interface for planning and distributing tasks in the operations department: shared pool, personal ToDo, per-assignee overview; tabs, filters, board / list / table views, drag &amp; drop.
</p>
<ul class="portfolio-card__tags" aria-label="Key tags">
<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 game engine</h3>
<p class="portfolio-card__summary">
Redesign and evolution of the game engine interface: a new working concept, refreshed visual system, and hundreds of complex user scenarios worked through.
</p>
<ul class="portfolio-card__tags" aria-label="Key tags">
<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">Graphics editor Lunacy</h3>
<p class="portfolio-card__summary">
Work on the Lunacy interface at Icons8: user flows, complex prototypes, improved functionality and interface logic.
</p>
<ul class="portfolio-card__tags" aria-label="Key tags">
<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">Mobile app for a clinic network</h3>
<p class="portfolio-card__summary">
Design of a mobile app for booking doctors and managing medical services. Focus on a simple user path, clear navigation, and quick access to the right actions.
</p>
<ul class="portfolio-card__tags" aria-label="Key tags">
<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">Task distribution service concept</h3>
<p class="portfolio-card__summary">
A product concept for a service to set, distribute and track tasks, with emphasis on process transparency and comfortable teamwork.
</p>
<ul class="portfolio-card__tags" aria-label="Key tags">
<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">Columns view — plugin for Obsidian</h3>
<p class="portfolio-card__summary">
Interface for multi-column note work: convenient navigation, filtering and column-view settings right inside the Obsidian editor.
</p>
<ul class="portfolio-card__tags" aria-label="Key tags">
<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="Scroll portfolio left"
></button>
<button
type="button"
class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
data-projects-edge-next
aria-label="Scroll portfolio right"
></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">Experience</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">January 2026 — Present</span>
</div>
<h3 class="exp-card__company">
Astratech
</h3>
<p class="exp-card__desc">
Development and support of digital systems and tools that boost team efficiency.
</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 — open company website"
>
<div class="exp-card__time-row">
<span class="exp-card__period">February 2023 — November 2025</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">2 years 10 months</span>
</div>
<h3 class="exp-card__company">
Primo RPA
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
A business process automation platform with a suite of products: a studio for building bots, an orchestrator to manage them, an Idea Hub for process selection, and AI servers for models and data recognition.
</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) — open company website"
>
<div class="exp-card__time-row">
<span class="exp-card__period">July 2022 — January 2023</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">7 months</span>
</div>
<h3 class="exp-card__company">
Icons8 (Lunacy)
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
A vector editor for UI/UX and web design with Sketch support, a built-in library of icons/photos/illustrations, and a set of AI tools to speed up routine work.
</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 — open company website"
>
<div class="exp-card__time-row">
<span class="exp-card__period">January 2019 — December 2021</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">3 years</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 platform for building 2D and 3D games without writing code.
</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) — open company website"
>
<div class="exp-card__time-row">
<span class="exp-card__period">July 2016 — October 2017</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">1 year 4 months</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">
An international technology company specializing in custom development and engineering solutions for large enterprise clients.
</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 — open company website"
>
<div class="exp-card__time-row">
<span class="exp-card__period">October 2017 — December 2018</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">1 year 3 months</span>
</div>
<h3 class="exp-card__company">
Aegees
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
A secure messenger with end-to-end encryption and no message storage on servers, focused on maximum user privacy.
</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 — open company website"
>
<div class="exp-card__time-row">
<span class="exp-card__period">June 2015 — June 2016</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">1 year 1 month</span>
</div>
<h3 class="exp-card__company">
SpaceshipApps
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
A studio building mobile and web apps end-to-end for businesses and entrepreneurs.
</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"
>
Show all
</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">Skills</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">Nikolay M:</p>
<p class="skills-msg__text">
My experience covers both launching a product's first versions from scratch and evolving mature solutions — where the goal is not to break familiar flows but to refine them carefully.
</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">
Below are examples of real business tasks and how I approached them
</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">Product thinking &amp; interface logic</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">
Make a complex product clearer so users reach key actions.
</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I map the user journey and cut steps that don't move them toward the goal.
</p>
<p class="skill-task-card__solution">
I design flows so every step makes clear what's happening and what to do next.
</p>
<p class="skill-task-card__solution">
I make even complex features feel natural by using familiar patterns and standard UI elements.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Improve the first steps in the product and guide users to their first "aha" moment.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I remove everything that distracts from the first result: extra steps, optional fields, secondary details.
</p>
<p class="skill-task-card__solution">
I replace long explanations with small hints exactly when they're needed — no lengthy tours or complex manuals.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Reduce support load through interface design.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I collect frequent requests and, based on them, simplify the flow and UI so users can solve issues on their own.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Tie the interface to product goals, not just a feature list.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I start from the business and user problem we're solving, then build flows and UI around it.
</p>
<p class="skill-task-card__solution">
I turn scenario problems into clear hypotheses and help the PM pick what actually moves the needle.
</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">Design systems &amp; consistency</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">
Bring several products or modules to a unified look and logic.
</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I assemble a shared UI kit and core principles usable across all products.
</p>
<p class="skill-task-card__solution">
I surface repeated patterns and consolidate them into one system instead of a dozen similar solutions.
</p>
<p class="skill-task-card__solution">
I unify scattered solutions into a single design system that's comfortable for both designers and developers.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Make the interface scalable without piling up hacks.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I define simple design principles and component usage rules.
</p>
<p class="skill-task-card__solution">
I set up the design system structure so it's genuinely maintainable and extensible with new patterns.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Tidy up interfaces that grew piece by piece over time.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I merge similar solutions into common components and patterns, removing duplicates and accidental differences.
</p>
<p class="skill-task-card__solution">
I keep the interface clean and modern: readable typography, clear hierarchy, accents without visual noise.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Refresh the product's look so it doesn't feel dated next to competitors.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I start with frequently used screens and elements so the impact shows for both users and business.
</p>
<p class="skill-task-card__solution">
I align update stages with the current roadmap and dev workflow so familiar flows and releases aren't broken.
</p>
<p class="skill-task-card__solution">
I set the base style — typography, color, spacing — so the interface looks clean and modern.
</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">Research, metrics &amp; analytics</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">
Get a real picture of user behavior instead of relying on the team's guesses.
</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I talk to users: I watch how they solve their tasks in the product and what they do at each step.
</p>
<p class="skill-task-card__solution">
I turn research findings into concrete changes in the interface and flows.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Make sure key flows work before shipping them to production.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I prepare simple usability-test scenarios based on real user tasks.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Understand how interface changes affect the product's key metrics.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I help describe the key events and funnels that reflect real user steps.
</p>
<p class="skill-task-card__solution">
I look at metrics alongside real usage scenarios and suggest interface changes that make things easier for users and better for the product.
</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">Design team growth &amp; mentoring</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">Build clear processes inside the design team.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I introduce regular design reviews of shipped work, where everyone gets useful, constructive feedback.
</p>
<p class="skill-task-card__solution">
I agree on a task brief template and transparent acceptance criteria, so it's clear when a task is truly done.
</p>
<p class="skill-task-card__solution">
I set up a workflow that handles both planned work and urgent "on-fire" tasks.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">
Make design, product, and engineering work as one team, not three separate camps.
</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I act as the bridge: discuss flows with the PM, constraints with engineering, and capture decisions in the interface.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Hire and grow product designers for a complex product.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I help shape the candidate requirements.
</p>
<p class="skill-task-card__solution">
I take part in hiring: I check how a candidate handles flows, constraints, and complex cases.
</p>
<p class="skill-task-card__solution">
I structure interviews to assess thinking and tooling.
</p>
<p class="skill-task-card__solution">
I set up onboarding through real tasks and regular reviews so the designer gets up to speed and adds value faster.
</p>
<p class="skill-task-card__solution">
I run regular 1:1s with designers: we review decisions, growth areas, and next steps.
</p>
</div>
</article>
</div>
</div>
</section>
</div>
</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">Activity</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">Nikolay M:</p>
<p class="skills-msg__text">
I enjoy building small side projects and sharing something useful with the world.
</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 — open profile"
>
<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">
I publish useful files and plugins for the community
</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 — open profile"
>
<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">
Nice visuals with UI elements
</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="Design is not pizza — open Telegram channel"
>
<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">
Design is not pizza
<span class="mp-card__ext" aria-hidden="true"></span>
</h3>
<p class="mp-card__desc">
My channel about design. Posts on product design and useful links
</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 — open profile"
>
<div class="mp-card__media" aria-hidden="true">
<img
class="mp-card__image"
src="../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">
My projects and code experiments
</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 — open case"
>
<div class="mp-card__body">
<h3 class="mp-card__title">AI assistant</h3>
<ul class="mp-card__tags" aria-label="Project type">
<li class="mp-card__tag">Figma plugin</li>
</ul>
<p class="mp-card__desc">An AI assistant for any editor plan</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 — open case"
>
<div class="mp-card__body">
<h3 class="mp-card__title">Card Columns</h3>
<ul class="mp-card__tags" aria-label="Project type">
<li class="mp-card__tag">Obsidian plugin</li>
</ul>
<p class="mp-card__desc">Shows note cards in a kanban-board style</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="This site — open case"
>
<div class="mp-card__body">
<h3 class="mp-card__title">This site</h3>
<ul class="mp-card__tags" aria-label="Project type">
<li class="mp-card__tag">Built with AI IDE</li>
</ul>
<p class="mp-card__desc">The whole site-building cycle with AI</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">Contact</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">I'll reply today</span></span></a></li>
<li><a class="contact-card contact-card--link contact-card--brand-whatsapp" href="https://wa.me/qr/E2AWW5ZHE3ANJ1" 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/whatsapp.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">WhatsApp</span><span class="contact-card__hint">Stable connection</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="Copy address" aria-label="Copy email address to clipboard"><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">Email</span><span class="contact-card__hint" data-contact-copy-hint>Copy address</span></span></button></li>
</ul>
</div>
</section>
<footer class="footer">
<div class="footer__inner">
<span class="footer__chunk footer__chunk--date">© 2015–2026<span class="footer__sep" aria-hidden="true"> ·
</span></span>
<span class="footer__chunk footer__chunk--main">Website design and development — Nikolay Mamadaev</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 policy</a></span> ·<span class="footer__chunk footer__chunk--lang"><span class="footer__sep" aria-hidden="true">
</span><nav class="lang-switch" aria-label="Choose language" data-lang-switch>
<a class="lang-switch__btn" data-lang="ru" href="/">Русский</a>
</nav>
<script>
(function () {
var p = location.pathname.replace(/^\/+/, "");
var isEn = p.indexOf("en/") === 0;
var base = isEn ? p.slice(3) : p;
var links = document.querySelectorAll("[data-lang-switch] [data-lang]");
for (var i = 0; i < links.length; i++) {
var l = links[i].getAttribute("data-lang");
links[i].setAttribute("href", (l === "en" ? "/en/" : "/") + base);
}
})();
</script>
</span></div>
</footer>
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
<p class="cookie-notice__text">
This site uses cookies to ensure a smooth user experience. For more information, see the
<a href="cookie-policy/" data-cookie-policy-link>cookie policy</a>.
</p>
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
<span>Accept</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>