1512 lines
78 KiB
HTML
1512 lines
78 KiB
HTML
<!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="#activity">Activity</a>
|
||
<a href="#experience">Experience</a>
|
||
<a href="#skills">Skills</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 & 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 & coaching</span></li>
|
||
<li class="marquee-grid__cell"><span class="hero__tag">AI tools & 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 & 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 & 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 & 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="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--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-portfolio/"
|
||
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>
|
||
<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>
|
||
</ol>
|
||
</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 & 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 & 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 & 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 & 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="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>
|