Files
site-portfolio/public/resume.html
T

516 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ru" data-theme="dark" data-radius="medium">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta
name="description"
content="Резюме Николая Мамадаева — продуктовый дизайнер с опытом более 10 лет."
/>
<title>Резюме — Николай Мамадаев</title>
<script>
(function () {
var FONT_CSS = {
merriweather: "assets/fonts/merriweather.css",
geologica: "assets/fonts/geologica.css",
mono: "assets/fonts/mono.css",
};
try {
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
var d = document.documentElement;
var m = t.mode;
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
var eff =
m === "system"
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light"
: m;
d.dataset.theme = eff;
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
if (h !== null) d.style.setProperty("--theme-h", String(h));
if (s !== null) d.style.setProperty("--theme-s", String(s));
if (l !== null) {
var L = Number(l);
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
}
var hVal = h !== null ? h : 210;
var sVal = s !== null ? s : 90;
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
var H = (((hVal % 360) + 360) % 360) / 360;
var S = Math.min(100, Math.max(0, sVal)) / 100;
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
var r, g, b;
if (S === 0) { r = g = b = Lv; }
else {
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
var p = 2 * Lv - q;
var hue2rgb = function(p, q, t) {
if (t < 0) t += 1; if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
};
r = hue2rgb(p, q, H + 1/3);
g = hue2rgb(p, q, H);
b = hue2rgb(p, q, H - 1/3);
}
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
var rad = t.radius;
if (rad === "soft" || rad === "medium" || rad === "strong") {
d.dataset.radius = rad;
} else {
d.dataset.radius = "medium";
}
var f = t.font;
if (f === "onest") f = "geologica";
if (f === "anonymous") f = "mono";
if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
d.dataset.font = f;
var mb = t.meshBg;
if (mb === "off") {
d.dataset.meshBg = "off";
} else {
d.dataset.meshBg = "on";
}
var href = FONT_CSS[f];
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = href;
link.setAttribute("data-theme-font", f);
document.head.appendChild(link);
}
} catch (e) {}
})();
</script>
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png" />
<link rel="manifest" href="assets/favicon/site.webmanifest" />
<link rel="preload" href="assets/fonts/merriweather.css" as="style" />
<link rel="preload" href="css/main.css" as="style" />
<link rel="preload" href="js/skill-connectors.js" as="script" />
<link rel="modulepreload" href="js/main.js" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/skill-connectors.js" defer></script>
<script type="module" src="js/main.js"></script>
<style>
.resume-doc {
max-width: 48rem;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: clamp(1.5rem, 3vw, 2.5rem);
}
.resume-header {
display: flex;
gap: 1.5rem;
align-items: flex-start;
margin-bottom: 1.5rem;
flex-direction: row-reverse;
justify-content: flex-end;
}
.resume-photo {
width: 120px;
height: 120px;
border-radius: var(--radius-sm);
object-fit: cover;
border: 2px solid var(--line);
flex-shrink: 0;
}
@media (max-width: 32rem) {
.resume-header {
flex-direction: column;
align-items: center;
text-align: center;
}
.resume-photo {
width: 100px;
height: 100px;
}
}
.resume-doc h2 {
margin: 2rem 0 0.75rem;
font-size: clamp(1.15rem, 2vw, 1.35rem);
font-weight: 700;
color: var(--text);
}
.resume-doc .section__prose + .section__prose {
margin-top: 0.75rem;
}
.resume-doc .section__prose a {
color: var(--accent);
}
.resume-contacts {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.5rem;
margin: 0.75rem 0 1.5rem;
font-size: 0.92rem;
color: var(--text-muted);
}
.resume-contacts span {
white-space: nowrap;
}
.resume-contacts a {
color: var(--accent);
}
.resume-exp {
margin: 1.25rem 0;
}
.resume-exp__company {
font-weight: 700;
color: var(--text);
}
.resume-exp__role {
font-style: italic;
color: var(--text-muted);
font-size: 0.92rem;
}
.resume-exp__period {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 0.35rem;
}
.resume-exp ul {
margin: 0.35rem 0 0;
padding-left: 1.25rem;
color: var(--text-muted);
font-size: 0.92rem;
}
.resume-exp li + li {
margin-top: 0.25rem;
}
.resume-skills {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 0.75rem 0;
}
@media (max-width: 32rem) {
.resume-skills {
grid-template-columns: 1fr;
}
}
.resume-skill {
font-size: 0.92rem;
}
.resume-skill__title {
font-weight: 600;
color: var(--text);
margin-bottom: 0.15rem;
}
.resume-skill__desc {
color: var(--text-muted);
}
.resume-edu {
margin: 0.5rem 0;
}
.resume-edu__school {
font-weight: 700;
color: var(--text);
}
.resume-edu__period {
font-size: 0.85rem;
color: var(--text-muted);
}
.resume-edu__spec {
font-size: 0.92rem;
color: var(--text-muted);
}
.resume-additional h3 {
margin: 1rem 0 0.35rem;
font-size: 1rem;
font-weight: 600;
color: var(--text);
}
.resume-additional ul {
margin: 0.25rem 0;
padding-left: 1.25rem;
color: var(--text-muted);
font-size: 0.92rem;
}
.resume-additional li + li {
margin-top: 0.25rem;
}
</style>
</head>
<body>
<a class="skip-link" href="#main">К основному содержимому</a>
<header class="header" data-theme-picker>
<div class="header__inner">
<a class="logo" href="index.html" aria-label="На главную">НМ</a>
<div class="header__cluster">
<nav class="nav" aria-label="Навигация">
<a href="index.html">На главную</a>
</nav>
</div>
</div>
</header>
<div class="fab-stack" aria-label="Быстрые действия">
<div class="theme-panel-fab-wrap">
<button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
<span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
<svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
<div class="theme-picker__stack">
<section class="theme-picker__section" aria-labelledby="theme-accent-title">
<h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
<div class="colorpicker" data-colorpicker>
<div class="colorpicker__plane-box">
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
<div class="colorpicker__knob" data-sl-knob></div>
</div>
<div class="colorpicker__hue-wrap">
<label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
<input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
</div>
</div>
</section>
<section class="theme-picker__section" aria-labelledby="theme-mode-title">
<h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
<div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
</div>
</section>
<section class="theme-picker__section" aria-labelledby="theme-radius-title">
<h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
</div>
</section>
<section class="theme-picker__section" aria-labelledby="theme-typography-title">
<h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
</div>
</section>
<section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
<h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
<div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
</div>
</section>
</div>
</div>
</div>
<a class="fab fab--primary" href="index.html#contact" aria-label="Связаться">
<span class="fab-primary__ico" aria-hidden="true"></span>
</a>
</div>
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
<button
type="button"
class="fab fab--secondary glass-neutral content-edit-fab"
data-content-edit-mode-toggle
hidden
aria-pressed="false"
aria-label="Режим правок контента"
title="Режим правок"
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
stroke="currentColor"
stroke-width="1.75"
stroke-linejoin="round"
/>
</svg>
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
</button>
</div>
<main id="main" class="section section--surface section--tight">
<div class="section__inner resume-doc">
<div class="resume-header">
<img class="resume-photo" src="assets/index/me-transparentBG-1.webp" alt="Николай Мамадаев" width="120" height="120" />
<div>
<p class="hero__eyebrow">Резюме</p>
<h1 class="case-page__h1">Николай Мамадаев</h1>
<p class="section__prose"><strong>Product Designer / Senior UX/UI Designer</strong></p>
</div>
</div>
<div class="resume-contacts">
<span>Калининград, Россия · Удалённо</span>
<span>Телефон: +7 (960) 294-24-05</span>
<span>Telegram: <a href="https://t.me/mamadaevv" target="_blank" rel="noopener">@mamadaevv</a></span>
<span>Email: <a href="mailto:nik@mamadaevv.site">nik@mamadaevv.site</a></span>
<span>Сайт: <a href="https://mamadaevv.site" target="_blank" rel="noopener">mamadaevv.site</a></span>
</div>
<h2 id="profile">Профиль</h2>
<p class="section__prose">
Продуктовый дизайнер с 10+ годами опыта в UX/UI, проектировании сложных интерфейсов, исследованиях и развитии дизайн-систем для web, desktop и mobile. Работаю на стыке дизайна и продукта: перевожу бизнес-задачи, продуктовые гипотезы и сложный контент в понятные сценарии с логичной информационной архитектурой и визуально привлекательными интерфейсами. Сильные стороны — Figma, пользовательские исследования, прототипирование, дизайн-системы, работа с метриками и плотная связка с разработкой.
</p>
<h2 id="experience">Опыт работы</h2>
<div class="resume-exp">
<p class="resume-exp__company">Астратек</p>
<p class="resume-exp__role">Ведущий UI/UX дизайнер</p>
<p class="resume-exp__period">Январь 2026 — Настоящее время</p>
<ul>
<li>Разработка и поддержка цифровых систем и инструментов для повышения эффективности сотрудников.</li>
</ul>
</div>
<div class="resume-exp">
<p class="resume-exp__company">Primo RPA</p>
<p class="resume-exp__role">Ведущий UI/UX дизайнер</p>
<p class="resume-exp__period">Февраль 2023 — Ноябрь 2025 · Москва / удалённо</p>
<ul>
<li>Отвечал за развитие UX/UI нескольких продуктов: Studio, Orchestrator, Idea Hub и AI Server.</li>
<li>Проектировал и улучшал графические интерфейсы, проводил пользовательские исследования, создавал интерактивные прототипы и поддерживал UI-kit.</li>
<li>Участвовал в обновлении визуального языка продуктов компании; в веб-сервисах помог перейти к единой дизайн-системе и более целостному пользовательскому опыту.</li>
<li>Работал в связке с разработкой и сопровождал внедрение решений до реализации.</li>
</ul>
</div>
<div class="resume-exp">
<p class="resume-exp__company">Icons8</p>
<p class="resume-exp__role">UI/UX дизайнер</p>
<p class="resume-exp__period">Июль 2022 — Январь 2023</p>
<ul>
<li>Проектировал интерфейсы для редактора Lunacy, оформлял user flows и передавал решения в разработку.</li>
<li>Создавал сложные прототипы, дорабатывал иконки и предлагал улучшения функциональности продукта.</li>
</ul>
</div>
<div class="resume-exp">
<p class="resume-exp__company">MANU Video Game Maker</p>
<p class="resume-exp__role">Team Lead Product Team</p>
<p class="resume-exp__period">Январь 2019 — Декабрь 2021 · Москва</p>
<ul>
<li>Выполнил масштабный редизайн продукта и заложил новую концепцию интерфейса для сложных сценариев.</li>
<li>Спроектировал поведение интерфейса для более чем сотни пользовательских сценариев и разработал дизайн-систему.</li>
<li>Проводил исследования пользователей, создавал персоны и карты эмпатии, работал с аналитикой и продуктовыми метриками.</li>
<li>Проектировал информационную архитектуру сайта вместе с командой и курировал создание пользовательской документации.</li>
</ul>
</div>
<div class="resume-exp">
<p class="resume-exp__company">Aegees</p>
<p class="resume-exp__role">UX/UI дизайнер</p>
<p class="resume-exp__period">Октябрь 2017 — Декабрь 2018 · Сочи</p>
<ul>
<li>Занимался разработкой дизайна кроссплатформенного мессенджера для платформ Android, iOS, MacOS, Windows и Linux.</li>
<li>Контролировал процесс работы с зарубежными иллюстраторами по подготовке графических материалов.</li>
</ul>
</div>
<div class="resume-exp">
<p class="resume-exp__company">Orion Innovation (ex MERA)</p>
<p class="resume-exp__role">UI/UX дизайнер</p>
<p class="resume-exp__period">Июль 2016 — Октябрь 2017</p>
<ul>
<li>Создавал wireframes, финальный UI, сценарии, карты экранов и дизайн-концепции в составе продуктовой команды.</li>
<li>Проводил качественные usability tests, презентовал решения клиентам и сопровождал реализацию в разработке.</li>
</ul>
</div>
<div class="resume-exp">
<p class="resume-exp__company">SpaceshipApps</p>
<p class="resume-exp__role">UX/UI дизайнер</p>
<p class="resume-exp__period">Июнь 2015 — Июнь 2016 · Москва</p>
<ul>
<li>Разрабатывал дизайн для мобильного приложения социальной игры с квестами в реальном мире, приложения для записи к специалистам, сервиса заказа еды, голосовой игры с ботом, сайта и админки для сервиса регистрации авторского права, а также мобильной «белой доски» для коллаборативной работы.</li>
</ul>
</div>
<h2 id="skills">Ключевые навыки</h2>
<div class="resume-skills">
<div class="resume-skill">
<p class="resume-skill__title">Проектирование</p>
<p class="resume-skill__desc">UX/UI дизайн, product design, проектирование интерфейсов, информационная архитектура, адаптивный дизайн, работа со сложным контентом и аналитическими сценариями</p>
</div>
<div class="resume-skill">
<p class="resume-skill__title">Исследования и аналитика</p>
<p class="resume-skill__desc">Интервью, опросы, usability testing, проверка гипотез, работа с продуктовыми метриками</p>
</div>
<div class="resume-skill">
<p class="resume-skill__title">Инструменты</p>
<p class="resume-skill__desc">Figma (компоненты, auto-layout, прототипирование, библиотеки, подготовка к разработке, плагины), дизайн-системы и UI-kit</p>
</div>
<div class="resume-skill">
<p class="resume-skill__title">Процессы и коммуникация</p>
<p class="resume-skill__desc">Авторский надзор, консистентность интерфейсов, взаимодействие со стейкхолдерами, разработчиками и продуктовыми командами</p>
</div>
</div>
<h2 id="education">Образование</h2>
<div class="resume-edu">
<p class="resume-edu__school">СЛПТ (Сокольский лесопромышленный политехнический техникум)</p>
<p class="resume-edu__period">2006–2009</p>
<p class="resume-edu__spec">Эксплуатация и обслуживание электрического и электромеханического оборудования (по отраслям)</p>
</div>
<h2 id="languages">Языки</h2>
<p class="section__prose">Английский (B1)</p>
<h2 id="additional">Дополнительно</h2>
<div class="resume-additional">
<h3>AI и новые инструменты</h3>
<ul>
<li>Активно использую AI-инструменты для ресёрча, генерации идей, ускорения рутинных задач и поиска продуктовых решений. Для визуальных экспериментов — Recraft, GPT, YandexART.</li>
<li>Собрал приватный AI-плагин для дизайнерской рутины. Регулярно использую Perplexity PRO для анализа, структурирования информации и проработки идей.</li>
</ul>
<h3>Pet-проекты и профессиональная среда</h3>
<ul>
<li>Делаю pet-проекты с no-code и автоматизациями, использую n8n, REST API и PostgreSQL в собственных сценариях и связках сервисов.</li>
<li>Веду профессиональные активности вне основной работы: Telegram-каналы, Figma Community, дизайнерские наработки и эксперименты на стыке дизайна, автоматизации и AI.</li>
</ul>
</div>
</div>
</main>
<footer class="footer">
<div class="footer__inner">
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="cookie-policy.html">Политика cookie</a></span>
</div>
</footer>
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
<p class="cookie-notice__text">
Сайт использует cookie для комфортной работы. Подробнее — в
<a href="cookie-policy.html" data-cookie-policy-link>политике cookie</a>.
</p>
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
<span>Принять</span>
<span class="cookie-notice__accept-icon" aria-hidden="true">
<img src="assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
</span>
</button>
</aside>
</body>
</html>