feat(glass): Liquid Glass эффект через SVG displacement-фильтр (по статье Хабра)
- PNG карта мелкого равномерного шума (public/assets/liquid-glass/displacement.png) - инлайн SVG feDisplacementMap инъецируется во все страницы сборщиком (build-pages.mjs) - glass-neutral + шапка/панели/FAB/overflow получают url(#filter) blur в Chromium - Safari/Firefox: детект через @supports not (hanging-punctuation:first), остаётся чистый blur - токены --v12-glass-neutral-filter-lg / -elevated-lg для обеих тем
This commit is contained in:
1 parent
e3acfa072c
commit
5fd8324b47
41 files changed
+535
-137
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
@@ -289,6 +289,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="ai-assistant">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -313,7 +313,14 @@
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -324,6 +324,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -313,7 +313,14 @@
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="ai-platform-primo-rpa">
|
||||
<body data-current-case="ai-platform-primo-rpa">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -380,6 +380,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="card-columns">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -550,7 +550,14 @@
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#main">К основному содержимому</a>
|
||||
|
||||
<header class="header" data-theme-picker>
|
||||
|
||||
@@ -304,7 +304,14 @@
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="lunacy">
|
||||
<body data-current-case="lunacy">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -281,7 +281,14 @@
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="manu-game-maker">
|
||||
<body data-current-case="manu-game-maker">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -491,7 +491,14 @@
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#main">К основному содержимому</a>
|
||||
|
||||
<header class="header" data-theme-picker>
|
||||
|
||||
@@ -281,7 +281,14 @@
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="mobile-clinic-app">
|
||||
<body data-current-case="mobile-clinic-app">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -289,6 +289,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -300,7 +300,14 @@
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="orc-automation-panel">
|
||||
<body data-current-case="orc-automation-panel">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -289,6 +289,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="site-with-ai-ide">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -281,7 +281,14 @@
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="task-distribution-concept">
|
||||
<body data-current-case="task-distribution-concept">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -303,7 +303,14 @@
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="task-tracker">
|
||||
<body data-current-case="task-tracker">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -280,7 +280,14 @@
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#main">К основному содержимому</a>
|
||||
|
||||
<header class="header" data-theme-picker>
|
||||
|
||||
@@ -248,7 +248,14 @@
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#main">К основному содержимому</a>
|
||||
|
||||
<header class="header" data-theme-picker>
|
||||
|
||||
@@ -5111,6 +5111,9 @@ html[data-theme="dark"] {
|
||||
inset 0 1px 0 hsla(0, 0%, 100%, 0.09);
|
||||
--v12-glass-neutral-filter: blur(16px) saturate(118%);
|
||||
--v12-glass-neutral-filter-elevated: blur(18px) saturate(125%);
|
||||
/* Liquid Glass (Хабр): displacement + blur — только для Chromium */
|
||||
--v12-glass-neutral-filter-lg: url(#liquid-glass-displacement) blur(15px) saturate(118%);
|
||||
--v12-glass-neutral-filter-elevated-lg: url(#liquid-glass-displacement) blur(17px) saturate(125%);
|
||||
}
|
||||
|
||||
html[data-theme="light"] {
|
||||
@@ -5126,6 +5129,9 @@ html[data-theme="light"] {
|
||||
inset 0 -1px 0 hsla(0, 0%, 0%, 0.04);
|
||||
--v12-glass-neutral-filter: blur(12px) saturate(124%);
|
||||
--v12-glass-neutral-filter-elevated: blur(14px) saturate(130%);
|
||||
/* Liquid Glass (Хабр): displacement + blur — только для Chromium */
|
||||
--v12-glass-neutral-filter-lg: url(#liquid-glass-displacement) blur(11px) saturate(124%);
|
||||
--v12-glass-neutral-filter-elevated-lg: url(#liquid-glass-displacement) blur(13px) saturate(130%);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .header--scrolled .header__inner,
|
||||
@@ -5164,6 +5170,37 @@ html[data-theme="light"] .fab.glass-neutral:not(.fab--primary):focus-visible {
|
||||
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated);
|
||||
}
|
||||
|
||||
/* Liquid Glass (Хабр): Chromium-only displacement.
|
||||
Safari/Firefox НЕ рендерят url()-фильтр в backdrop-filter — остаётся чистый blur.
|
||||
Детект: Chrome не поддерживает hanging-punctuation, Safari/Firefox — поддерживают. */
|
||||
@supports not (hanging-punctuation: first) {
|
||||
/* Базовый (не-elevated) слой — только .glass-neutral */
|
||||
html[data-theme="dark"] .glass-neutral,
|
||||
html[data-theme="light"] .glass-neutral {
|
||||
backdrop-filter: var(--v12-glass-neutral-filter-lg);
|
||||
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-lg);
|
||||
}
|
||||
|
||||
/* Elevated-слой: шапка, панели, FAB при наведении, overflow-меню */
|
||||
html[data-theme="dark"] .header--scrolled .header__inner,
|
||||
html[data-theme="light"] .header--scrolled .header__inner,
|
||||
html[data-theme="dark"] .theme-picker__panel.glass-neutral,
|
||||
html[data-theme="dark"] .cookie-notice.glass-neutral,
|
||||
html[data-theme="light"] .theme-picker__panel.glass-neutral,
|
||||
html[data-theme="light"] .cookie-notice.glass-neutral,
|
||||
html[data-theme="dark"] .fab.glass-neutral:not(.fab--primary):hover,
|
||||
html[data-theme="dark"] .fab.glass-neutral:not(.fab--primary):focus-visible,
|
||||
html[data-theme="light"] .fab.glass-neutral:not(.fab--primary):hover,
|
||||
html[data-theme="light"] .fab.glass-neutral:not(.fab--primary):focus-visible,
|
||||
html[data-theme="dark"] .nav-more__dock,
|
||||
html[data-theme="light"] .nav-more__dock,
|
||||
html[data-theme="dark"] #nav-more-menu-floating,
|
||||
html[data-theme="light"] #nav-more-menu-floating {
|
||||
backdrop-filter: var(--v12-glass-neutral-filter-elevated-lg);
|
||||
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated-lg);
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .nav-more__dock,
|
||||
html[data-theme="light"] .nav-more__dock,
|
||||
html[data-theme="dark"] #nav-more-menu-floating,
|
||||
|
||||
@@ -289,6 +289,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="ai-assistant">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">Skip to case content</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -314,6 +314,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">Skip to case content</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -324,6 +324,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">Skip to case content</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -314,6 +314,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="ai-platform-primo-rpa">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">Skip to case content</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -380,6 +380,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="card-columns">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">Skip to case content</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -551,6 +551,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#main">Skip to main content</a>
|
||||
|
||||
<header class="header" data-theme-picker>
|
||||
|
||||
@@ -305,6 +305,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="lunacy">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">Skip to case content</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -282,6 +282,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="manu-game-maker">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">Skip to case content</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -492,6 +492,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#main">Skip to main content</a>
|
||||
|
||||
<header class="header" data-theme-picker>
|
||||
|
||||
@@ -282,6 +282,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="mobile-clinic-app">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">Skip to case content</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -289,6 +289,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">Skip to case content</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -301,6 +301,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="orc-automation-panel">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">Skip to case content</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -289,6 +289,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="site-with-ai-ide">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">Skip to case content</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -282,6 +282,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="task-distribution-concept">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">Skip to case content</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -304,6 +304,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="task-tracker">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#case-main">Skip to case content</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
|
||||
@@ -281,6 +281,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#main">Skip to main content</a>
|
||||
|
||||
<header class="header" data-theme-picker>
|
||||
|
||||
@@ -249,6 +249,13 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#main">Skip to main content</a>
|
||||
|
||||
<header class="header" data-theme-picker>
|
||||
|
||||
@@ -189,6 +189,13 @@
|
||||
|
||||
</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="28" 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>
|
||||
|
||||
|
||||
+110
-62
@@ -206,6 +206,13 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#main">Skip to main content</a>
|
||||
|
||||
<header class="header" data-theme-picker>
|
||||
@@ -310,21 +317,30 @@
|
||||
<div>
|
||||
<h4 class="resume-exp__label">Responsibilities</h4>
|
||||
<ul>
|
||||
<li>Worked on interface design</li>
|
||||
<li>Creating production-ready interfaces</li>
|
||||
<li>Breaking down ideas and concepts and turning them into design tasks</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="resume-exp__label">Achievements</h4>
|
||||
<ul>
|
||||
<li>Successfully completed assigned tasks</li>
|
||||
<li>Set up a configured environment for delivering interfaces to production</li>
|
||||
<li>Ran more than 15 hypothesis tests on working prototypes without involving the development department</li>
|
||||
<li>Sped up processing of user testing results by applying AI tools (summarization, classification, transcription)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="resume-exp__label">Stack</h4>
|
||||
<ul>
|
||||
<li>Figma</li>
|
||||
<li>HTML/CSS</li>
|
||||
<li>HTML/CSS/JS</li>
|
||||
<li>AI/LLM</li>
|
||||
<li>GitHub</li>
|
||||
<li>Gitea</li>
|
||||
<li>Coolify</li>
|
||||
<li>CI/CD</li>
|
||||
<li>Hermes Agent</li>
|
||||
<li>Zed IDE</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -336,7 +352,8 @@
|
||||
<h3 class="resume-exp__company">Primo RPA</h3>
|
||||
<p class="resume-exp__meta-row"><span><time datetime="2023-02">February 2023</time> — <time datetime="2025-11">November 2025</time> (2 years and 10 months)</span><a href="https://primo-rpa.com/" target="_blank" rel="noopener noreferrer">·primo-rpa.com</a></p>
|
||||
</div>
|
||||
<p class="resume-exp__desc">A Russian enterprise-grade RPA platform: a suite of desktop robot development environments and web services for management, analytics, and ML. I worked as a lead designer on the entire product line, consisting of 6 products.</p>
|
||||
<p class="resume-exp__desc">A Russian enterprise-grade B2B RPA platform: a suite of desktop robot development environments and web services for management, analytics, and ML.<br />
|
||||
I worked as a lead designer on the entire product line, consisting of 6 products.</p>
|
||||
<div class="resume-exp__section">
|
||||
<h4 class="resume-exp__section-title">AI Server Platform (SaaS)</h4>
|
||||
<p class="resume-exp__desc">A control panel for training, running, testing, and other operations involving neural networks deployed within the company’s internal network.</p>
|
||||
@@ -344,20 +361,17 @@
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Responsibilities</h5>
|
||||
<ul>
|
||||
<li>Designing the model management interface: training, deployment, testing, versioning, and monitoring</li>
|
||||
<li>Developing workflows for Smart OCR—extracting data from various types of documents</li>
|
||||
<li>Designing document markup and validating recognition results</li>
|
||||
<li>Design a web interface for the local LLM control panel. Enable the following scenarios: dataset creation, training of narrowly focused models, rapid testing, and administration of deployment on the client’s local infrastructure.</li>
|
||||
<li>Improve how Smart OCR is configured for more accurate data extraction from documents of various types</li>
|
||||
<li>Managing the states of long-running processes: model training, progress, errors, rollback</li>
|
||||
<li>Preparing interactive prototypes and overseeing implementation</li>
|
||||
<li>Conducting interviews with ML engineers and business users to validate behavioral models</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Achievements</h5>
|
||||
<ul>
|
||||
<li>Packaged complex ML logic into an interface that is understandable not only to ML engineers but also to business analysts without a technical background</li>
|
||||
<li>Streamlined work with models into a single, predictable 4-step workflow instead of 9 disparate screens</li>
|
||||
<li>Reduced the time required to configure a new model from 40 to 15 minutes, based on test results</li>
|
||||
<li>Created an intuitive interface for handling the complex setup of LLM models. This significantly lowered the barrier to entry for users without deep neural network expertise.</li>
|
||||
<li>Reduced setup time from 3–5 days to 2 hours, based on conversations with users</li>
|
||||
<li>Designed a document annotation interface that reduced support requests on this topic by 60%</li>
|
||||
<li>Conducted 8 usability sessions and, based on the results, revised the key model training scenario</li>
|
||||
</ul>
|
||||
@@ -365,7 +379,11 @@
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Stack</h5>
|
||||
<ul>
|
||||
<li>ML / neural networks</li>
|
||||
<li>Figma</li>
|
||||
<li>React</li>
|
||||
<li>Ant Design</li>
|
||||
<li>Hope UI</li>
|
||||
<li>LLM core</li>
|
||||
<li>Smart OCR</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -390,10 +408,10 @@
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Achievements</h5>
|
||||
<ul>
|
||||
<li>Updated the product’s visual language to the Windows 10/11 standard—components are now a generation more modern</li>
|
||||
<li>Redesigned over 80 screens and dialogs, bringing them into a unified grid and typography</li>
|
||||
<li>Compiled a library of 140 components, covering 90% of the interface’s needs</li>
|
||||
<li>Converted icons and some illustrations to vector graphics: ensuring correct display at any zoom level and DPI</li>
|
||||
<li>Updated the product’s visual language to the Windows 11 standard—components are now a generation more modern</li>
|
||||
<li>Redesigned dozens of screens and modal windows, bringing them into a single token-based design system.</li>
|
||||
<li>Built a library of more than 50 reusable components, making it possible to design new functionality scenarios while preserving established behavior patterns</li>
|
||||
<li>Redrew all legacy raster icons as vectors. This produced a library of over 300 unique icons that display perfectly at any UI scale and DPI</li>
|
||||
<li>Reduced the time it took the team to build a new screen from 2 days to 4 hours by using pre-built components</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -402,7 +420,10 @@
|
||||
<ul>
|
||||
<li>Desktop IDE</li>
|
||||
<li>Windows 10/11</li>
|
||||
<li>Component library</li>
|
||||
<li>Figma</li>
|
||||
<li>AI tools</li>
|
||||
<li>DevExpress UI</li>
|
||||
<li>Handy Controls</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -415,27 +436,28 @@
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Responsibilities</h5>
|
||||
<ul>
|
||||
<li>Adapting the Studio design for the Linux version using the Avalonia framework</li>
|
||||
<li>Designing components while taking into account the framework’s technical limitations</li>
|
||||
<li>Synchronizing the visual language between the Windows and Linux versions of the product</li>
|
||||
<li>Collaborating with the development team to determine what is technically feasible in Avalonia and what requires workarounds</li>
|
||||
<li>Designing the IDE interface for Linux, based on the selected feature set and the already implemented Windows version</li>
|
||||
<li>Designing components with the technical constraints of the Avalonia Suki UI framework in mind</li>
|
||||
<li>Preparing component behavior specifications for implementation</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Achievements</h5>
|
||||
<ul>
|
||||
<li>Compiled an extensive library of 95 components for Avalonia, which did not exist in the project before I joined</li>
|
||||
<li>Ensured product consistency across two platforms with different technology stacks</li>
|
||||
<li>Reduced the number of visual discrepancies between versions from several dozen to just a few isolated cases</li>
|
||||
<li>Provided the Linux version team with a ready-made set of solutions instead of having to design each screen from scratch</li>
|
||||
<li>Built a component library based on Suki UI that lets me quickly assemble interfaces in Figma and hand them off to developers</li>
|
||||
<li>Developed a product style that meets international standards, which will support expansion into foreign markets</li>
|
||||
<li>Handed developers design instructions for assembling screens, so they can build interfaces for new features on their own and ship releases according to the roadmap</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Stack</h5>
|
||||
<ul>
|
||||
<li>Avalonia</li>
|
||||
<li>.NET</li>
|
||||
<li>Suki UI</li>
|
||||
<li>Figma</li>
|
||||
<li>AI tools</li>
|
||||
<li>Cursor IDE</li>
|
||||
<li>MobaXterm RDP</li>
|
||||
<li>Linux</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -468,9 +490,9 @@
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Stack</h5>
|
||||
<ul>
|
||||
<li>Analytics / Dashboards</li>
|
||||
<li>KPIs</li>
|
||||
<li>Data Visualization</li>
|
||||
<li>Figma</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -502,9 +524,12 @@
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Stack</h5>
|
||||
<ul>
|
||||
<li>Monitoring</li>
|
||||
<li>Schedules / Queues</li>
|
||||
<li>Notifications / Alerts</li>
|
||||
<li>Figma</li>
|
||||
<li>Ant Design</li>
|
||||
<li>Storybook</li>
|
||||
<li>AI tools</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -518,7 +543,7 @@
|
||||
<h5 class="resume-exp__label">Responsibilities</h5>
|
||||
<ul>
|
||||
<li>Designing workflows for posting questions, providing answers, and searching the accumulated knowledge base</li>
|
||||
<li>Designing the portal interface based on the company’s common design system</li>
|
||||
<li>Designing the portal interface under the constraints of the PHP engine used for a QnA-type site.</li>
|
||||
<li>Developing a role model: user, expert, support team, moderator</li>
|
||||
<li>Designing search mechanics and suggestions for similar questions when posting</li>
|
||||
</ul>
|
||||
@@ -535,9 +560,10 @@
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Stack</h5>
|
||||
<ul>
|
||||
<li>Web portal</li>
|
||||
<li>PHP QnA Engine</li>
|
||||
<li>Figma</li>
|
||||
<li>Design system</li>
|
||||
<li>Knowledge base</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -546,14 +572,18 @@
|
||||
<div class="resume-exp__section">
|
||||
<h4 class="resume-exp__section-title">Company-wide</h4>
|
||||
<ul>
|
||||
<li>I initiated a visual refresh of the entire product line—the company decided to redesign the products upon my arrival</li>
|
||||
|
||||
<li>I developed and implemented a unified design system for web services, integrating the company’s brand identity with the new interface structure</li>
|
||||
<li>The design system was adopted by four product teams; it includes 210 components and theming tokens</li>
|
||||
|
||||
<li>Reduced the average time to prepare mockups across the product line by 35%</li>
|
||||
<li>Created and maintained a UI kit to ensure consistency and accelerate development</li>
|
||||
<li>Conducted more than 20 user studies and usability sessions during my tenure</li>
|
||||
<li>Oversaw implementation, participated in design reviews, product discussions, and release planning</li>
|
||||
<li>Served as the sole lead designer for an entire product line consisting of 6 products and two platforms</li>
|
||||
<li>Hired 4 interface designers for different company projects</li>
|
||||
<li>Conducted more than 30 interviews, including introducing the WhiteBoard Interview format</li>
|
||||
<li>Developed test assignments tailored to the needs of specific roles and tasks</li>
|
||||
<li>Introduced an internal video call system based on Jitsi within the company’s internal network, together with the technical support department</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
@@ -572,27 +602,26 @@
|
||||
<li>Designing the graphic editor’s interface: tools, property panels, working with the canvas and layers</li>
|
||||
<li>Documenting solutions as user flows and handing them off to developers</li>
|
||||
<li>Creating complex interactive prototypes in Protopie to demonstrate tool behavior</li>
|
||||
<li>Illustrating missing icons in the product’s style</li>
|
||||
<li>Making suggestions for improving the editor’s functionality</li>
|
||||
<li>Participating in discussions about product solutions with the team</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="resume-exp__label">Achievements</h4>
|
||||
<ul>
|
||||
<li>Designed 6 functional blocks for the editor, including work with components and styles</li>
|
||||
<li>Created 15+ prototypes in Protopie, which helped eliminate unsuccessful solutions before development</li>
|
||||
<li>Some of my feature suggestions were included in product releases</li>
|
||||
<li>Designed over 60 icons to complement the editor’s system set</li>
|
||||
<li>Worked on a product for a professional audience of designers, where the requirements for interface details are higher than usual</li>
|
||||
<li>Built a Protopie prototype for a new feature: editing multi-layered realistic object shadows with complex behavior logic, almost indistinguishable from the production solution. Not counting smaller, simple prototypes.</li>
|
||||
<li>Validated 3 hypotheses for improving the editor with real users. 1 made it into the release.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="resume-exp__label">Stack</h4>
|
||||
<ul>
|
||||
<li>Protopie</li>
|
||||
<li>Graphics editor</li>
|
||||
<li>Icons / Illustrations</li>
|
||||
<li>Figma</li>
|
||||
<li>Design system</li>
|
||||
<li>Avalonia Custom UI</li>
|
||||
<li>Windows</li>
|
||||
<li>Linux</li>
|
||||
<li>macOS</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -640,9 +669,14 @@
|
||||
<div>
|
||||
<h4 class="resume-exp__label">Stack</h4>
|
||||
<ul>
|
||||
<li>Tilda</li>
|
||||
<li>Integromat / Zapier</li>
|
||||
<li>User research</li>
|
||||
|
||||
<li>Zapier</li>
|
||||
<li>Figma</li>
|
||||
<li>Miro</li>
|
||||
<li>Mailchimp</li>
|
||||
<li>Windows</li>
|
||||
<li>Notion</li>
|
||||
<li>Airtable</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -706,14 +740,14 @@
|
||||
<li>Worked in a design department with up to 8 people</li>
|
||||
<li>Creating user personas and mapping product functionality based on user needs</li>
|
||||
<li>Creating wireframes and designing the final UI</li>
|
||||
<li>Designing use cases, screen maps, and micro-animation demos</li>
|
||||
|
||||
<li>Preparing mood boards and design concepts, and discussing them with clients</li>
|
||||
<li>Preparing and delivering presentations on design concepts</li>
|
||||
|
||||
<li>Turning mockups into prototypes, writing scripts, and conducting qualitative usability testing</li>
|
||||
<li>Making revisions based on test results</li>
|
||||
<li>Overseeing the implementation of designs by developers</li>
|
||||
|
||||
|
||||
<li>Participating in design reviews: analyzing colleagues’ work and defending your own decisions</li>
|
||||
<li>Direct communication with international clients to discuss design and receive project briefs</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
@@ -721,17 +755,27 @@
|
||||
<ul>
|
||||
<li>Conducted 10 usability testing sessions, from writing the test script to implementing changes</li>
|
||||
<li>Learned to work with the Smart TV platform, which was new to me, and brought the project to successful release in the app store</li>
|
||||
<li>Conducted research and reverse-engineering of app design for the Roku TV platform and created a client app design development workflow that includes: idea formation, clickable prototype development, usability testing on the actual device, and design control in the app built by our developers</li>
|
||||
<li>Communicated directly with international clients, without intermediaries</li>
|
||||
<li>Actively participated in improving the company’s design department workflow</li>
|
||||
<li>Completed the full product design cycle on 5 client projects</li>
|
||||
<li>Introduced the team to using Miro (ex. Realtime Board) for storing research artifacts</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="resume-exp__label">Stack</h4>
|
||||
<ul>
|
||||
<li>Sketch</li>
|
||||
<li>Miro</li>
|
||||
<li>Android</li>
|
||||
<li>iOS</li>
|
||||
<li>ROKU TV Box</li>
|
||||
<li>Smart TV</li>
|
||||
<li>Usability testing</li>
|
||||
<li>Mood boards / design concepts</li>
|
||||
<li>Marvel App</li>
|
||||
<li>ProtoPie</li>
|
||||
<li>Framer</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -770,8 +814,12 @@
|
||||
<ul>
|
||||
<li>Mobile</li>
|
||||
<li>Web</li>
|
||||
<li>Dashboards</li>
|
||||
<li>Graphics</li>
|
||||
<li>Adobe Photoshop</li>
|
||||
<li>After Effects</li>
|
||||
<li>Adobe Illustrator</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -809,10 +857,10 @@
|
||||
<section id="about" class="resume-section" aria-labelledby="about-title">
|
||||
<h2 id="about-title" class="resume-section__title">About Me</h2>
|
||||
<p class="section__prose resume-about">
|
||||
I’ve been in design for over 10 years, building interfaces for web apps, B2B SaaS, and desktop software on Windows, Linux, and macOS. I work as a product designer: research and hypotheses first, mockups second. I run interviews and usability sessions, shape features together with product managers, help set priorities, and carry decisions through to release.
|
||||
I specialize in SaaS products and desktop applications. I design clear, scalable, and efficient interfaces for complex workflows, so users solve their tasks faster and the product becomes more convenient and useful.
|
||||
</p>
|
||||
<p class="section__prose resume-about">
|
||||
I care about workflows as much as about the UI itself. Together with the team we build working scenarios that don’t trip you up at every step, and I push for services and tools that raise the team’s efficiency.
|
||||
I work across every stage of product design: researching user needs, shaping information architecture, designing user flows, building interactive prototypes with vibe coding, and creating scalable design systems with Figma + Storybook.
|
||||
</p>
|
||||
<p class="section__prose resume-about">
|
||||
I stay active in the community: I run the Telegram channel “Design Isn’t Pizza,” share resources on Figma Community, spoke about voice skill analytics at a Yandex meetup, and talked about a designer’s toolkit at a business forum. I’ve won hackathons more than once.
|
||||
|
||||
+8
-1
@@ -188,7 +188,14 @@
|
||||
|
||||
|
||||
</head>
|
||||
<body class="home">
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<div class="page-mesh-bg" aria-hidden="true"></div>
|
||||
<a class="skip-link" href="#main">К основному содержимому</a>
|
||||
|
||||
|
||||
+110
-62
@@ -206,6 +206,13 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<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="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<a class="skip-link" href="#main">К основному содержимому</a>
|
||||
|
||||
<header class="header" data-theme-picker>
|
||||
@@ -298,10 +305,10 @@
|
||||
<section id="about" class="resume-section" aria-labelledby="about-title">
|
||||
<h2 id="about-title" class="resume-section__title">О себе</h2>
|
||||
<p class="section__prose resume-about">
|
||||
Больше 10 лет в дизайне. Проектировал интерфейсы для веб-приложений, B2B SaaS и десктопных программ под Windows, Linux и macOS. Работаю продуктово: сначала исследования и гипотезы, потом макеты. Провожу интервью и юзабилити-сессии, вместе с продактом формулирую фичи, помогаю расставить приоритеты и веду решения до релиза.
|
||||
Специализируюсь на SaaS-продуктах и desktop-приложениях. Проектирую понятные, масштабируемые и эффективные интерфейсы для сложных рабочих процессов — чтобы пользователи быстрее решали свои задачи, а продукт становился удобнее и полезнее.
|
||||
</p>
|
||||
<p class="section__prose resume-about">
|
||||
Процессам уделяю не меньше внимания, чем макетам. Вместе с командой собираем сценарии работы, в которых не спотыкаешься на каждой мелочи, и предлагаю сервисы и инструменты, которые поднимают эффективность.
|
||||
Работаю на всех этапах продуктового дизайна: изучаю потребности пользователей, формирую информационную архитектуру, проектирую пользовательские сценарии, создаю интерактивные прототипы используя вайбкоддинг и масштабируемые дизайн-системы в связке Figma + Storybook.
|
||||
</p>
|
||||
<p class="section__prose resume-about">
|
||||
Участвую в жизни сообщества: веду Telegram-канал «Дизайн не пицца», выкладываю полезности в Figma Community, выступал на митапе Яндекса с докладом про аналитику голосовых навыков и на бизнес-форуме с рассказом про инструменты дизайнера. Неоднократно побеждал на хакатонах.
|
||||
@@ -323,21 +330,30 @@
|
||||
<div>
|
||||
<h4 class="resume-exp__label">Обязанности</h4>
|
||||
<ul>
|
||||
<li>Занимался дизайном интерфейсов</li>
|
||||
<li>Создание готовых к продакшену интерфейсов</li>
|
||||
<li>Разбор идей и концепций и трансформация их в дизайнерские задачи</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="resume-exp__label">Достижения</h4>
|
||||
<ul>
|
||||
<li>Успешно закрывал входящие задачи</li>
|
||||
<li>Реализовал настроенную среду доставки интерфейсов до продакшена</li>
|
||||
<li>Провёл более 15 тестов гипотез на рабочих прототипах без привлечения отдела разработки</li>
|
||||
<li>Ускорил процесс обработки результатов пользовательского тестирования за счёт применения AI инструментов (суммаризация, классификация, трансрибация)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="resume-exp__label">Стэк</h4>
|
||||
<ul>
|
||||
<li>Figma</li>
|
||||
<li>HTML/CSS</li>
|
||||
<li>HTML/CSS/JS</li>
|
||||
<li>AI/LLM</li>
|
||||
<li>GitHub</li>
|
||||
<li>Gitea</li>
|
||||
<li>Coolify</li>
|
||||
<li>CI/CD</li>
|
||||
<li>Hermes Agent</li>
|
||||
<li>Zed IDE</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -349,7 +365,8 @@
|
||||
<h3 class="resume-exp__company">Primo RPA</h3>
|
||||
<p class="resume-exp__meta-row"><span><time datetime="2023-02">Февраль 2023</time> — <time datetime="2025-11">Ноябрь 2025</time> (2 года и 10 месяцев)</span><span class="resume-exp__sep">·</span><a href="https://primo-rpa.com/" target="_blank" rel="noopener noreferrer">primo-rpa.com</a></p>
|
||||
</div>
|
||||
<p class="resume-exp__desc">Российская RPA-платформа корпоративного уровня: линейка из desktop-среды разработки роботов и веб-сервисов управления, аналитики и ML. Работал ведущим дизайнером на всю продуктовую линейку из 6 продуктов.</p>
|
||||
<p class="resume-exp__desc">Российская B2B RPA-платформа корпоративного уровня: линейка из desktop-среды разработки роботов и веб-сервисов управления, аналитики и ML.<br />
|
||||
Работал ведущим дизайнером на всю продуктовую линейку из 6 продуктов.</p>
|
||||
<div class="resume-exp__section">
|
||||
<h4 class="resume-exp__section-title">AI Server platform (SaaS)</h4>
|
||||
<p class="resume-exp__desc">Панель управления для обучения/запуска/тестирования и других операций с нейросетями, развёрнутыми внутри контура компании.</p>
|
||||
@@ -357,20 +374,17 @@
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Обязанности</h5>
|
||||
<ul>
|
||||
<li>Проектирование интерфейса управления моделями: обучение, запуск, тестирование, версионирование, мониторинг</li>
|
||||
<li>Проработка сценариев работы с Smart OCR — извлечение данных из документов различных типов</li>
|
||||
<li>Проектирование разметки документов и валидации результатов распознавания</li>
|
||||
<li>Спроектировать web интерфейс панели управления локальных LLM. Реализовать возможность выполнения сценариев: создание датасетов, обучение узконаправленных моделей, быстрое тестирование и администрирование развёртыванием на локальной инфраструктуре клиента.</li>
|
||||
<li>Улучшить способ конфигурирования работы Smart OCR для более точного извлечения данных из документов различного типа</li>
|
||||
<li>Работа с состояниями долгих процессов: обучение модели, прогресс, ошибки, откат</li>
|
||||
<li>Подготовка интерактивных прототипов и авторский надзор за реализацией</li>
|
||||
<li>Проведение интервью с ML-инженерами и бизнес-пользователями для сверки моделей поведения</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Достижения</h5>
|
||||
<ul>
|
||||
<li>Упаковал сложную ML-логику в интерфейс, понятный не только ML-инженеру, но и бизнес-аналитику без технического бэкграунда</li>
|
||||
<li>Свёл работу с моделями к единому предсказуемому сценарию из 4 шагов вместо 9 разрозненных экранов</li>
|
||||
<li>Сократил время настройки новой модели с 40 до 15 минут по результатам замеров на тестировании</li>
|
||||
<li>Создал интуитивный интерфейс для работы со сложной настройкой LLM моделей. Таким образом существенно снизил порог входа для пользователей без глубокой экспертизы в работе нейросетей.</li>
|
||||
<li>Сократил время настройки с 3-5 дней до 2 часов по результатам общения с пользователями</li>
|
||||
<li>Спроектировал интерфейс разметки документов, который снял 60% обращений в поддержку по этой теме</li>
|
||||
<li>Провёл 8 юзабилити-сессий, по итогам переработал ключевой сценарий обучения модели</li>
|
||||
</ul>
|
||||
@@ -378,7 +392,11 @@
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Стэк</h5>
|
||||
<ul>
|
||||
<li>ML / нейросети</li>
|
||||
<li>Figma</li>
|
||||
<li>React</li>
|
||||
<li>Ant Design</li>
|
||||
<li>Hope UI</li>
|
||||
<li>LLM core</li>
|
||||
<li>Smart OCR</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -403,10 +421,10 @@
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Достижения</h5>
|
||||
<ul>
|
||||
<li>Обновил визуальный язык продукта до уровня Windows 10/11 — компоненты стали на поколение современнее</li>
|
||||
<li>Переработал 80+ экранов и диалогов, приведя их к единой сетке и типографике</li>
|
||||
<li>Собрал библиотеку из 140 компонентов, закрывшую 90% потребностей интерфейса</li>
|
||||
<li>Перевёл иконки и часть иллюстраций на векторную графику: корректное отображение при любом масштабировании и DPI</li>
|
||||
<li>Обновил визуальный язык продукта до уровня Windows 11 — компоненты стали на поколение современнее</li>
|
||||
<li>Переработал 10-ки экранов и модальных окон, приведя их к единой дизайн-системе основанной на токенах.</li>
|
||||
<li>Собрал библиотеку из более чем 50-ти компонентов, которые можно переиспользовать и проектировать сценарии нового функционала с сохранением заложенных паттернов поведения</li>
|
||||
<li>Перерисовал все старые растровые иконки в новые векторные. Таким образом появилась библиотека уникальных иконок количеством более 300 штук. Идеально отображаются на любом масштабе UI и DPI</li>
|
||||
<li>Сократил время сборки нового экрана командой с 2 дней до 4 часов за счёт готовых компонентов</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -415,7 +433,10 @@
|
||||
<ul>
|
||||
<li>Desktop IDE</li>
|
||||
<li>Windows 10/11</li>
|
||||
<li>Компонентная библиотека</li>
|
||||
<li>Figma</li>
|
||||
<li>AI инструменты</li>
|
||||
<li>DevExpress UI</li>
|
||||
<li>Handy Controls</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -428,27 +449,28 @@
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Обязанности</h5>
|
||||
<ul>
|
||||
<li>Адаптация дизайна Студии под Linux-версию на фреймворке Avalonia</li>
|
||||
<li>Проектирование компонентов с учётом технических ограничений фреймворка</li>
|
||||
<li>Синхронизация визуального языка между Windows- и Linux-версиями продукта</li>
|
||||
<li>Совместная работа с разработкой над тем, что технически реализуемо в Avalonia, а что требует обходных решений</li>
|
||||
<li>Разработка интерфейса IDE для платформы Linux с учётом выбранного функционала на основе реализованной версии под Windows</li>
|
||||
<li>Проектирование компонентов с учётом технических ограничений фреймворка Avalonia Suki UI</li>
|
||||
<li>Подготовка спецификаций поведения компонентов для реализации</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Достижения</h5>
|
||||
<ul>
|
||||
<li>Собрал расширенную библиотеку из 95 компонентов для Avalonia, которой в проекте не существовало до меня</li>
|
||||
<li>Обеспечил единообразие продукта на двух платформах при разных технологических стеках</li>
|
||||
<li>Сократил количество визуальных расхождений между версиями с нескольких десятков до единичных случаев</li>
|
||||
<li>Дал команде Linux-версии готовый набор решений вместо дизайна каждого экрана с нуля</li>
|
||||
<li>Собрал библиотеку компонентов основанную на библиотеке Suki UI из которых можно быстро собирать интерфейс в Figma и передавать разработчикам</li>
|
||||
<li>Разработал стиль программы, которая соответствует международному уровню, что положительно скажется при экспансии зарубежных рынков</li>
|
||||
<li>Передал дизайн-инструкции по сборке экранов разработчикам, чтобы они могли самостоятельно собирать интерфейс под новые функции и выпускать релизы согласно роадмэп</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Стэк</h5>
|
||||
<ul>
|
||||
<li>Avalonia</li>
|
||||
<li>.NET</li>
|
||||
<li>Suki UI</li>
|
||||
<li>Figma</li>
|
||||
<li>AI инструменты</li>
|
||||
<li>Cursor IDE</li>
|
||||
<li>MobaXterm RDP</li>
|
||||
<li>Linux</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -481,9 +503,9 @@
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Стэк</h5>
|
||||
<ul>
|
||||
<li>Аналитика / дашборды</li>
|
||||
<li>KPI</li>
|
||||
<li>Визуализация данных</li>
|
||||
<li>Figma</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -515,9 +537,12 @@
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Стэк</h5>
|
||||
<ul>
|
||||
<li>Мониторинг</li>
|
||||
<li>Расписания / очереди</li>
|
||||
<li>Уведомления / алерты</li>
|
||||
<li>Figma</li>
|
||||
<li>Ant Design</li>
|
||||
<li>Storybook</li>
|
||||
<li>AI инструменты</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -531,7 +556,7 @@
|
||||
<h5 class="resume-exp__label">Обязанности</h5>
|
||||
<ul>
|
||||
<li>Проектирование сценариев публикации вопроса, ответа и поиска по накопленной базе знаний</li>
|
||||
<li>Дизайн интерфейса портала на базе общей дизайн-системы компании</li>
|
||||
<li>Дизайн интерфейса портала в условиях ограничения используемого PHP движка для QnA типа сайта.</li>
|
||||
<li>Проработка ролевой модели: пользователь, эксперт, служба поддержки, модератор</li>
|
||||
<li>Проектирование механики поиска и подсказок похожих вопросов при публикации</li>
|
||||
</ul>
|
||||
@@ -548,9 +573,10 @@
|
||||
<div>
|
||||
<h5 class="resume-exp__label">Стэк</h5>
|
||||
<ul>
|
||||
<li>Веб-портал</li>
|
||||
<li>PHP QnA Engine</li>
|
||||
<li>Figma</li>
|
||||
<li>Дизайн-система</li>
|
||||
<li>База знаний</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -559,14 +585,18 @@
|
||||
<div class="resume-exp__section">
|
||||
<h4 class="resume-exp__section-title">Общее по компании</h4>
|
||||
<ul>
|
||||
<li>Инициировал обновление внешнего вида всей продуктовой линейки — решение о редизайне компания приняла с моим приходом</li>
|
||||
|
||||
<li>Собрал и внедрил единую дизайн-систему для веб-сервисов, соединив фирменный стиль компании с новой структурой интерфейсов</li>
|
||||
<li>Дизайн-систему приняли 4 продуктовые команды; она включает 210 компонентов и токены темизации</li>
|
||||
|
||||
<li>Сократил среднее время подготовки макетов по линейке на 35%</li>
|
||||
<li>Создавал и поддерживал UI-kit для консистентности и ускорения разработки</li>
|
||||
<li>Провёл более 20 пользовательских исследований и юзабилити-сессий за время работы</li>
|
||||
<li>Вёл авторский надзор за реализацией, участвовал в дизайн-ревью, продуктовых обсуждениях и планировании релизов</li>
|
||||
<li>Был единственным ведущим дизайнером на всю линейку из 6 продуктов и двух платформ</li>
|
||||
<li>Нанял 4 дизайнеров интерфейсов для разных проектов компании</li>
|
||||
<li>Провел больше 30 собеседований, в том числе внедрил формат WhiteBoard Interview</li>
|
||||
<li>Разрабатывал тестовые задания с учётом потребностей конкретной должности и задач</li>
|
||||
<li>Внедрил внутреннюю систему видеозвонков на основе Jitsi во внутреннем контуре компании совместно с отделом технической поддержки компании</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
@@ -585,27 +615,26 @@
|
||||
<li>Проектирование интерфейса графического редактора: инструменты, панели свойств, работа с холстом и слоями</li>
|
||||
<li>Оформление решений в виде юзерфлоу и передача разработчикам</li>
|
||||
<li>Создание сложных интерактивных прототипов в Protopie для демонстрации поведения инструментов</li>
|
||||
<li>Отрисовка недостающих иконок в стилистике продукта</li>
|
||||
<li>Внесение предложений по улучшению функциональности редактора</li>
|
||||
<li>Участие в обсуждениях продуктовых решений с командой</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="resume-exp__label">Достижения</h4>
|
||||
<ul>
|
||||
<li>Спроектировал 6 функциональных блоков редактора, включая работу с компонентами и стилями</li>
|
||||
<li>Собрал 15+ прототипов в Protopie, что позволило отсечь неудачные решения до разработки</li>
|
||||
<li>Часть моих предложений по функциональности вошла в релизы продукта</li>
|
||||
<li>Отрисовал более 60 иконок, дополнивших системный набор редактора</li>
|
||||
<li>Работал над продуктом для профессиональной аудитории дизайнеров, где требования к деталям интерфейса выше обычных</li>
|
||||
<li>Собрал прототип нового функционала в Protopie для редактирования многослойной реалистичной тени от объекта со сложной логикой поведения, практически не отличимый от решения в продакшене. Не считая мелких простых прототипов.</li>
|
||||
<li>Провалидировал 3 гипотезы относительно улучшений работы редактора на реальных пользователях. 1 ушла в релиз.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="resume-exp__label">Стэк</h4>
|
||||
<ul>
|
||||
<li>Protopie</li>
|
||||
<li>Графический редактор</li>
|
||||
<li>Иконки / иллюстрации</li>
|
||||
<li>Figma</li>
|
||||
<li>Дизайн-система</li>
|
||||
<li>Avalonia Custom UI</li>
|
||||
<li>Windows</li>
|
||||
<li>Linux</li>
|
||||
<li>macOS</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -653,9 +682,14 @@
|
||||
<div>
|
||||
<h4 class="resume-exp__label">Стэк</h4>
|
||||
<ul>
|
||||
<li>Tilda</li>
|
||||
<li>Integromat / Zapier</li>
|
||||
<li>Исследования пользователей</li>
|
||||
|
||||
<li>Zapier</li>
|
||||
<li>Figma</li>
|
||||
<li>Miro</li>
|
||||
<li>Mailchimp</li>
|
||||
<li>Windows</li>
|
||||
<li>Notion</li>
|
||||
<li>Airtable</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -719,14 +753,14 @@
|
||||
<li>Работа в дизайн-отделе численностью до 8 человек</li>
|
||||
<li>Создание анкет персон и составление карты функциональности продукта в соответствии с потребностями персон</li>
|
||||
<li>Вайрфреймы и отрисовка конечного UI интерфейсов</li>
|
||||
<li>Проектирование юзкейсов, карт экранов, демонстрации микроанимаций</li>
|
||||
|
||||
<li>Подготовка мудбордов и дизайн-концепций, обсуждение их с клиентами</li>
|
||||
<li>Подготовка и проведение презентаций дизайн-концепций</li>
|
||||
|
||||
<li>Линковка мокапов в прототипы, написание сценариев и проведение качественных юзабилити-тестирований</li>
|
||||
<li>Внесение правок по результатам тестирований</li>
|
||||
<li>Авторский надзор над реализацией дизайна разработчиками</li>
|
||||
|
||||
|
||||
<li>Участие в дизайн-ревью: разбор работ коллег и защита собственных решений</li>
|
||||
<li>Прямая коммуникация с зарубежными клиентами для обсуждения дизайна и получения задач</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
@@ -734,17 +768,27 @@
|
||||
<ul>
|
||||
<li>Провёл 10 сессий юзабилити-тестирования от написания сценария до внесения правок</li>
|
||||
<li>Освоил новую для себя платформу Smart TV и довёл проект до успешной публикации в магазине приложений</li>
|
||||
<li>Провёл исследования и реверс-инжиниринг дизайна приложений для платформы Roku TV и создал рабочий процесс разработки дизайна приложения заказчика, включающий: формирование идеи, разработку кликабельных прототипов, тестирование юзабилити на рабочем устройстве, контроль дизайна в приложении, разработанном нашими разработчиками</li>
|
||||
<li>Вёл коммуникацию с зарубежными заказчиками напрямую, без посредников</li>
|
||||
<li>Активно участвовал в улучшении рабочего процесса дизайн-отдела компании</li>
|
||||
<li>Прошёл полный цикл продуктового дизайна на 5 клиентских проектах</li>
|
||||
<li>Внедрил в команду использование Miro (ex. Realtime Board) для хранения артефактов исследований</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="resume-exp__label">Стэк</h4>
|
||||
<ul>
|
||||
<li>Sketch</li>
|
||||
<li>Miro</li>
|
||||
<li>Android</li>
|
||||
<li>iOS</li>
|
||||
<li>ROKU TV Box</li>
|
||||
<li>Smart TV</li>
|
||||
<li>Юзабилити-тестирование</li>
|
||||
<li>Мудборды / дизайн-концепции</li>
|
||||
<li>Marvel App</li>
|
||||
<li>ProtoPie</li>
|
||||
<li>Framer</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -783,8 +827,12 @@
|
||||
<ul>
|
||||
<li>Мобайл</li>
|
||||
<li>Веб</li>
|
||||
<li>Админ-панели</li>
|
||||
<li>Графика</li>
|
||||
<li>Adobe Photoshop</li>
|
||||
<li>After Effects</li>
|
||||
<li>Adobe Illustrator</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,6 +11,16 @@ const outDir = path.join(rootDir, "public");
|
||||
const LOCALES = ["ru", "en"];
|
||||
const DEFAULT_LOCALE = "ru";
|
||||
|
||||
// Liquid Glass: инлайн SVG displacement-фильтр, инъецируется во все страницы.
|
||||
// PNG-карта — мелкий равномерный шум (см. статью Хабра), даёт «живое» стекло в Chromium.
|
||||
// В Safari/Firefox url()-фильтр в backdrop-filter не рендерится — там остаётся чистый blur.
|
||||
const LIQUID_GLASS_FILTER = `<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="{{LG_ASSET_PREFIX}}assets/liquid-glass/displacement.png" xlink:href="{{LG_ASSET_PREFIX}}assets/liquid-glass/displacement.png" preserveAspectRatio="none" result="lgMap"/>
|
||||
<feDisplacementMap in="SourceGraphic" in2="lgMap" scale="28" xChannelSelector="R" yChannelSelector="G"/>
|
||||
</filter>
|
||||
</svg>`;
|
||||
|
||||
// --- SEO ---
|
||||
const SITE_ORIGIN = "https://mamadaevv.site";
|
||||
const OG_IMAGE_DEFAULT = `${SITE_ORIGIN}/assets/og/og-default.png`;
|
||||
@@ -401,6 +411,9 @@ function build() {
|
||||
if (isCase) {
|
||||
rendered = stripCurrentCasePortfolioCarouselItem(rendered, omitFile);
|
||||
}
|
||||
// Liquid Glass: инъецируем инлайн SVG displacement-фильтр сразу после <body>.
|
||||
const lgSvg = LIQUID_GLASS_FILTER.replace(/{{LG_ASSET_PREFIX}}/g, vars.assetPrefix);
|
||||
rendered = rendered.replace(/(<body[^>]*>)/, `$1\n ${lgSvg}\n`);
|
||||
ensureDir(path.dirname(outPath));
|
||||
fs.writeFileSync(outPath, rendered, "utf8");
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user