Files
site-portfolio/src/pages/index.html
T

580 lines
34 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ru" data-theme="dark" data-radius="medium">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta
name="description"
content="Продуктовый дизайнер и вайбкодер с опытом более 10 лет. Проектирую цифровые продукты, интерфейсы и дизайн‑системы, совмещая UX, no-code и код для аккуратных рабочих решений."
/>
<title>Николай Мамадаев — продуктовый дизайнер</title>
{{> head-links}}
</head>
<body>
{{> header-home}}
{{> fab-stack}}
<main id="main">
<section class="hero" aria-labelledby="hero-title">
<div class="hero__grid">
<div class="hero__text">
<p class="hero__eyebrow">Николай Мамадаев</p>
<h1 id="hero-title" class="hero__title">
Укрощаю сложные интерфейсы
<span class="hero-rotator" data-hero-rotator aria-label="web, mobile, desktop">
<span class="hero-rotator__word" data-hero-rotator-word>web</span>
</span>
</h1>
<div class="hero__actions">
<a class="btn btn--primary btn--flat" href="#contact"><span class="btn__icon" aria-hidden="true"></span><span>Написать мне</span></a>
<a class="btn btn--secondary btn--flat" href="#projects"><span class="btn__icon" aria-hidden="true"></span><span>Смотреть портфолио</span></a>
<a class="btn btn--secondary btn--flat btn--resume" href="resume/"><span class="btn__icon" aria-hidden="true"></span><span>Резюме</span></a>
</div>
</div>
<div class="hero__visual" aria-hidden="true">
<div class="hero__portrait-shell">
<div class="hero__portrait">
<div class="hero__portrait-inner">
<div class="hero__portrait-layers">
<div class="hero__portrait-layer hero__portrait-layer--bg">
<img
class="hero__photo-bg"
src="assets/index/me_static.webp"
alt=""
width="320"
height="320"
loading="eager"
decoding="async"
/>
</div>
<div class="hero__portrait-layer hero__portrait-layer--motion" data-hero-motion-layer>
<video
class="hero__photo-motion"
data-hero-motion-video
data-src="assets/index/me_motion.webm"
poster="assets/index/me_motion.webp"
muted
loop
playsinline
preload="none"
aria-hidden="true"
></video>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="marquee" aria-hidden="true" data-reveal>
<div class="marquee__track">
<div class="marquee__content">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ лет опыта</span>
<span class="hero__tag">Продуктовое мышление</span>
<span class="hero__tag">Дизайн-системы</span>
<span class="hero__tag">Менторство и наставничество</span>
<span class="hero__tag">AI инструменты и вайбкодинг</span>
</div>
<div class="marquee__content" aria-hidden="true">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ лет опыта</span>
<span class="hero__tag">Продуктовое мышление</span>
<span class="hero__tag">Дизайн-системы</span>
<span class="hero__tag">Менторство и наставничество</span>
<span class="hero__tag">AI инструменты и вайбкодинг</span>
</div>
<div class="marquee__content" aria-hidden="true">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ лет опыта</span>
<span class="hero__tag">Продуктовое мышление</span>
<span class="hero__tag">Дизайн-системы</span>
<span class="hero__tag">Менторство и наставничество</span>
<span class="hero__tag">AI инструменты и вайбкодинг</span>
</div>
</div>
</section>
{{> projects-section-mp}}{{> projects-section}}
<section id="experience" class="section section--surface" aria-labelledby="experience-title" data-reveal>
<div class="section__inner">
<h2 id="experience-title" class="section__title">Опыт работы</h2>
<ol id="experience-list" class="experience-grid">
<li class="experience-grid__item">
<div class="exp-card" data-exp-order="1">
<div class="exp-card__time-row">
<span class="exp-card__period">Январь 2026 — Настоящее время</span>
</div>
<h3 class="exp-card__company">
Astratech
</h3>
<p class="exp-card__desc">
Разработка и поддержка цифровых систем и инструментов для повышения эффективности сотрудников.
</p>
</div>
</li>
<li class="experience-grid__item">
<a
class="exp-card exp-card--link"
href="https://primo-rpa.com/"
target="_blank"
rel="noopener noreferrer"
data-exp-order="2"
aria-label="Primo RPA — открыть сайт компании"
>
<div class="exp-card__time-row">
<span class="exp-card__period">Февраль 2023 — Ноябрь 2025</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">2 года 10 месяцев</span>
</div>
<h3 class="exp-card__company">
Primo RPA
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
Платформа для автоматизации бизнес‑процессов с комплексом продуктов: студией для создания роботов, оркестратором для их управления, Idea Hub для отбора процессов и AI‑серверами для работы с моделями и распознаванием данных.
</p>
</a>
</li>
<li class="experience-grid__item">
<a
class="exp-card exp-card--link"
href="https://icons8.com/lunacy"
target="_blank"
rel="noopener noreferrer"
data-exp-order="3"
aria-label="Icons8 (Lunacy) — открыть сайт компании"
>
<div class="exp-card__time-row">
<span class="exp-card__period">Июль 2022 — Январь 2023</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">7 месяцев</span>
</div>
<h3 class="exp-card__company">
Icons8 (Lunacy)
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
Векторный редактор для UI/UX и веб‑дизайна с поддержкой Sketch‑файлов, встроенной библиотекой иконок/фото/иллюстраций и набором AI‑инструментов для ускорения рутинных задач.
</p>
</a>
</li>
<li class="experience-grid__item">
<a
class="exp-card exp-card--link"
href="https://manu.co/"
target="_blank"
rel="noopener noreferrer"
data-exp-order="4"
aria-label="MANU Video Game Maker — открыть сайт компании"
>
<div class="exp-card__time-row">
<span class="exp-card__period">Январь 2019 — Декабрь 2021</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">3 года</span>
</div>
<h3 class="exp-card__company">
MANU Video Game Maker
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
No-code/low-code платформа для создания 2D и 3D игр без необходимости писать код.
</p>
</a>
</li>
<li class="experience-grid__item" data-exp-extra hidden>
<a
class="exp-card exp-card--link"
href="https://www.orioninnovation.com/"
target="_blank"
rel="noopener noreferrer"
data-exp-order="6"
aria-label="Orion Innovation (ex MERA) — открыть сайт компании"
>
<div class="exp-card__time-row">
<span class="exp-card__period">Июль 2016 — Октябрь 2017</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">1 год 4 месяца</span>
</div>
<h3 class="exp-card__company">
Orion Innovation (ex MERA)
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
Международная технологическая компания, специализирующаяся на заказной разработке и инженерных решениях для крупных корпоративных клиентов.
</p>
</a>
</li>
<li class="experience-grid__item" data-exp-extra hidden>
<a
class="exp-card exp-card--link"
href="https://aegees.com/"
target="_blank"
rel="noopener noreferrer"
data-exp-order="5"
aria-label="Aegees — открыть сайт компании"
>
<div class="exp-card__time-row">
<span class="exp-card__period">Октябрь 2017 — Декабрь 2018</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">1 год 3 месяца</span>
</div>
<h3 class="exp-card__company">
Aegees
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
Защищённый мессенджер с end‑to‑end шифрованием и отсутствием хранения сообщений на серверах, сфокусированный на максимальной приватности пользователей.
</p>
</a>
</li>
<li class="experience-grid__item" data-exp-extra hidden>
<a
class="exp-card exp-card--link"
href="https://spaceshipapps.ru/"
target="_blank"
rel="noopener noreferrer"
data-exp-order="7"
aria-label="SpaceshipApps — открыть сайт компании"
>
<div class="exp-card__time-row">
<span class="exp-card__period">Июнь 2015 — Июнь 2016</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">1 год 1 месяц</span>
</div>
<h3 class="exp-card__company">
SpaceshipApps
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
Студия разработки мобильных и веб‑приложений под ключ для бизнеса и предпринимателей.
</p>
</a>
</li>
</ol>
<div class="experience__actions">
<button
type="button"
class="btn btn--secondary btn--flat experience__toggle"
data-exp-toggle
aria-expanded="false"
aria-controls="experience-list"
>
Показать все
</button>
</div>
</div>
</section>
<section id="skills" class="section section--tight" aria-labelledby="skills-title" data-reveal>
<div class="section__inner">
<h2 id="skills-title" class="section__title">Навыки</h2>
<div
class="skills-intro skills-intro--chat section__prose"
data-skills-intro
role="region"
aria-labelledby="skills-title"
>
<div class="skills-msg" data-skills-msg>
<div class="skills-msg__body">
<p class="skills-msg__author">Николай М:</p>
<p class="skills-msg__text">
В моём опыте есть и запуск первых версий продукта с нуля, и развитие уже зрелых решений, где важно не
сломать привычный сценарий, а аккуратно улучшить его.
</p>
<time class="skills-msg__time" datetime="" data-skills-msg-time></time>
</div>
</div>
<div class="skills-msg" data-skills-msg>
<div class="skills-msg__body">
<p class="skills-msg__text">
Ниже я собрал примеры задач от бизнеса и то, как я их решал
</p>
<time class="skills-msg__time" datetime="" data-skills-msg-time></time>
</div>
</div>
</div>
<div class="skills-categories">
<section class="skills-category" aria-labelledby="skills-cat-1-heading">
<div class="skills-category__layout">
<h3 id="skills-cat-1-heading" class="skills-category__title">
<button
class="skills-category__toggle"
type="button"
aria-expanded="false"
aria-controls="skills-cat-1"
data-skills-accordion-toggle
>
<span class="skills-category__title-text">Продуктовый подход и логика в интерфейсах</span>
<span class="skills-category__chevron" aria-hidden="true"></span>
</button>
</h3>
<div id="skills-cat-1" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
<article class="skill-task-card">
<p class="skill-task-card__task">
Сделать сложный продукт понятнее, чтобы пользователи доходили до ключевых действий.
</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Анализирую путь пользователя и убираю шаги, которые не помогают ему продвинуться к цели.
</p>
<p class="skill-task-card__solution">
Проектирую флоу так, чтобы в каждом шаге было понятно, что происходит и что делать дальше.
</p>
<p class="skill-task-card__solution">
Делаю так, чтобы даже сложный функционал выглядел естественно, использовал знакомые паттерны и привычные
элементы интерфейса.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Улучшить первые шаги в продукте и подвести человека к первой ценности.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Убираю всё, что отвлекает от первого результата: лишние шаги, необязательные поля, второстепенные детали.
</p>
<p class="skill-task-card__solution">
Заменяю длинные объяснения небольшими подсказками в момент, когда они действительно нужны без
длинных туров и сложных инструкций.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Снизить нагрузку на техподдержку за счёт интерфейса.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Собираю частые обращения и на их основе упрощаю сценарий и интерфейс так, чтобы человек мог решить
вопрос самостоятельно.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Связать интерфейс с целями продукта, а не только с набором фич.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Начинаю с того, какую задачу бизнеса и пользователя мы решаем, и уже под это собираю сценарии и
интерфейс.
</p>
<p class="skill-task-card__solution">
Перевожу проблемы в сценариях в понятные гипотезы и помогаю продакту выбрать, что действительно даёт
эффект.
</p>
</div>
</article>
</div>
</div>
</section>
<section class="skills-category" aria-labelledby="skills-cat-2-heading">
<div class="skills-category__layout">
<h3 id="skills-cat-2-heading" class="skills-category__title">
<button
class="skills-category__toggle"
type="button"
aria-expanded="false"
aria-controls="skills-cat-2"
data-skills-accordion-toggle
>
<span class="skills-category__title-text">Дизайн‑системы и консистентность</span>
<span class="skills-category__chevron" aria-hidden="true"></span>
</button>
</h3>
<div id="skills-cat-2" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
<article class="skill-task-card">
<p class="skill-task-card__task">
Привести несколько продуктов или модулей к единому виду и логике.
</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Собираю общий UI‑kit и базовые принципы, которые можно использовать во всех продуктах.
</p>
<p class="skill-task-card__solution">
Выделяю повторяющиеся паттерны и свожу их к одной системе, вместо десятка похожих решений.
</p>
<p class="skill-task-card__solution">
Перевожу разрозненные решения в общую дизайн‑систему, чтобы ей было удобно пользоваться и дизайнерам,
и разработчикам.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Сделать интерфейс так, чтобы его можно было спокойно расширять и не городить костыли.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Формулирую простые дизайн‑принципы и правила использования компонентов.
</p>
<p class="skill-task-card__solution">
Настраиваю структуру дизайн‑системы так, чтобы её было реально поддерживать и дополнять новыми паттернами.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Навести порядок в интерфейсах, которые долго росли кусками.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Объединяю похожие решения в общие компоненты и паттерны, убираю дубли и случайные отличия.
</p>
<p class="skill-task-card__solution">
Слежу за тем, чтобы интерфейс выглядел аккуратно и современно: читаемая типографика, иерархия, акценты
без визуального шума.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Обновить внешний вид продукта, чтобы он не выглядел устаревшим на фоне конкурентов.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Начинаю с часто используемых экранов и элементов, чтобы эффект был заметен и для пользователей, и для
бизнеса.
</p>
<p class="skill-task-card__solution">
Подстраиваю этапы обновления под текущую дорожную карту и работу разработки, чтобы не ломать привычные
сценарии и релизы.
</p>
<p class="skill-task-card__solution">
Настраиваю базовый стиль: типографика, цвет, отступы — чтобы интерфейс выглядел аккуратно и современно.
</p>
</div>
</article>
</div>
</div>
</section>
<section class="skills-category" aria-labelledby="skills-cat-3-heading">
<div class="skills-category__layout">
<h3 id="skills-cat-3-heading" class="skills-category__title">
<button
class="skills-category__toggle"
type="button"
aria-expanded="false"
aria-controls="skills-cat-3"
data-skills-accordion-toggle
>
<span class="skills-category__title-text">Исследования, метрики и аналитика</span>
<span class="skills-category__chevron" aria-hidden="true"></span>
</button>
</h3>
<div id="skills-cat-3" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
<article class="skill-task-card">
<p class="skill-task-card__task">
Получить реальную картину поведения пользователей, а не полагаться на догадки команды.
</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Общаюсь с пользователями: смотрю, как они решают свои задачи в продукте и что делают на каждом шаге.
</p>
<p class="skill-task-card__solution">
Перевожу выводы из исследований в конкретные изменения в интерфейсе и сценариях.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Убедиться, что ключевые сценарии работают, прежде чем выкатывать их в прод.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Готовлю простые сценарии юзабилити‑тестов под реальные задачи пользователей.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Понимать, как изменения в интерфейсе влияют на ключевые метрики продукта.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Помогаю описать ключевые события и воронки, которые отражают реальные шаги пользователя.
</p>
<p class="skill-task-card__solution">
Смотрю на метрики вместе с реальными сценариями использования и предлагаю, что в интерфейсе поменять,
чтобы людям было проще и продукт работал лучше.
</p>
</div>
</article>
</div>
</div>
</section>
<section class="skills-category" aria-labelledby="skills-cat-4-heading">
<div class="skills-category__layout">
<h3 id="skills-cat-4-heading" class="skills-category__title">
<button
class="skills-category__toggle"
type="button"
aria-expanded="false"
aria-controls="skills-cat-4"
data-skills-accordion-toggle
>
<span class="skills-category__title-text">Развитие команды дизайнеров и наставничество</span>
<span class="skills-category__chevron" aria-hidden="true"></span>
</button>
</h3>
<div id="skills-cat-4" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
<article class="skill-task-card">
<p class="skill-task-card__task">Выстроить понятные процессы внутри дизайн-команды.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Ввожу регулярные дизайн‑ревью с разбором реализованных задач, где каждый может получить полезную
экологичную обратную связь.
</p>
<p class="skill-task-card__solution">
Договариваюсь о шаблоне постановки задачи и прозрачных критериях приёмки, чтобы всем было ясно,
когда задачу считать действительно законченой.
</p>
<p class="skill-task-card__solution">
Настраиваю порядок работ, который позволяет выполнять как плановые задачи, так и "горящие".
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">
Сделать так, чтобы дизайн, продукт и разработка работали как одна команда, а не три отдельных лагеря.
</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Беру на себя роль связующего: обсуждаю сценарии с продактом, ограничения — с разработкой и фиксирую
решения в интерфейсе.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Нанять и вырастить продуктовых дизайнеров для работы над сложным продуктом.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
Помогаю сформировать необходимые требования к кандидату.
</p>
<p class="skill-task-card__solution">
Участвую в отборе: проверяю, как кандидат работает со сценариями, ограничениями и сложными кейсами.
</p>
<p class="skill-task-card__solution">
Выстраиваиваю интервью так, чтобы можно было оценить ход мысли и используемые инструменты.
</p>
<p class="skill-task-card__solution">
Настраиваю онбординг через реальные задачи и регулярные разборы, чтобы дизайнер быстрее разобрался в
продукте и начал приносить пользу.
</p>
<p class="skill-task-card__solution">
Провожу регулярные созвоны один на один с дизайнерами: разбираем решения, точки роста и следующие шаги.
</p>
</div>
</article>
</div>
</div>
</section>
</div>
</div>
</section>
{{> mini-projects-section}}
{{> contact-section}}
{{> footer}}
{{> cookie-notice}}
{{> nav-more-floating}}
</body>
</html>