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

558 lines
27 KiB
HTML

<!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="Product designer and vibe coder with over 10 years of experience. I design digital products, interfaces and design systems, combining UX, no-code and code for clean, working solutions."
/>
<title>Nikolay Mamadaev — Product Designer</title>
{{> head-links}}
</head>
<body class="home">
{{> 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">Nikolay Mamadaev</p>
<h1 id="hero-title" class="hero__title">
Taming complex interfaces
<span class="hero-rotator" data-hero-rotator aria-label="web, mobile, desktop">
<span class="hero-rotator__word" data-hero-rotator-word>web</span>
</span>
</h1>
<div class="hero__actions">
<a class="btn btn--primary btn--flat" href="#contact"><span class="btn__icon" aria-hidden="true"></span><span>Get in touch</span></a>
<a class="btn btn--secondary btn--flat" href="#portfolio"><span class="btn__icon" aria-hidden="true"></span><span>View portfolio</span></a>
<a class="btn btn--secondary btn--flat btn--resume" href="resume/"><span class="btn__icon" aria-hidden="true"></span><span>Resume</span></a>
</div>
</div>
<div class="hero__visual" aria-hidden="true">
<div class="hero__portrait-shell">
<div class="hero__portrait">
<div class="hero__portrait-inner">
<div class="hero__portrait-layers">
<div class="hero__portrait-layer hero__portrait-layer--bg">
<img
class="hero__photo-bg"
src="{{assetPrefix}}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="{{assetPrefix}}assets/index/me_motion.webm"
poster="{{assetPrefix}}assets/index/me_motion.webp"
muted
loop
playsinline
preload="none"
aria-hidden="true"
></video>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section marquee marquee--grid" aria-hidden="true" data-reveal>
<div class="section__inner">
<ul class="marquee-grid">
<li class="marquee-grid__cell"><span class="hero__tag">UX/UI</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">10+ years of experience</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Product thinking</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Design systems</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Mentoring &amp; coaching</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">AI tools &amp; vibe coding</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">User Research</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Prototyping</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Usability Testing</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Figma</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">CJM / UJM</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">JTBD</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Information Architecture</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Product-Market Fit</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">ARPU / ARPPU</span></li>
</ul>
</div>
</section>
{{> 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">Experience</h2>
<ol id="experience-list" class="experience-grid">
<li class="experience-grid__item">
<div class="exp-card" data-exp-order="1">
<div class="exp-card__time-row">
<span class="exp-card__period">January 2026 — Present</span>
</div>
<h3 class="exp-card__company">
Astratech
</h3>
<p class="exp-card__desc">
Development and support of digital systems and tools that boost team efficiency.
</p>
</div>
</li>
<li class="experience-grid__item">
<a
class="exp-card exp-card--link"
href="https://primo-rpa.com/"
target="_blank"
rel="noopener noreferrer"
data-exp-order="2"
aria-label="Primo RPA — open company website"
>
<div class="exp-card__time-row">
<span class="exp-card__period">February 2023 — November 2025</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">2 years 10 months</span>
</div>
<h3 class="exp-card__company">
Primo RPA
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
A business process automation platform with a suite of products: a studio for building bots, an orchestrator to manage them, an Idea Hub for process selection, and AI servers for models and data recognition.
</p>
</a>
</li>
<li class="experience-grid__item">
<a
class="exp-card exp-card--link"
href="https://icons8.com/lunacy"
target="_blank"
rel="noopener noreferrer"
data-exp-order="3"
aria-label="Icons8 (Lunacy) — open company website"
>
<div class="exp-card__time-row">
<span class="exp-card__period">July 2022 — January 2023</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">7 months</span>
</div>
<h3 class="exp-card__company">
Icons8 (Lunacy)
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
A vector editor for UI/UX and web design with Sketch support, a built-in library of icons/photos/illustrations, and a set of AI tools to speed up routine work.
</p>
</a>
</li>
<li class="experience-grid__item">
<a
class="exp-card exp-card--link"
href="https://manu.co/"
target="_blank"
rel="noopener noreferrer"
data-exp-order="4"
aria-label="MANU Video Game Maker — open company website"
>
<div class="exp-card__time-row">
<span class="exp-card__period">January 2019 — December 2021</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">3 years</span>
</div>
<h3 class="exp-card__company">
MANU Video Game Maker
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
No-code/low-code platform for building 2D and 3D games without writing code.
</p>
</a>
</li>
<li class="experience-grid__item" data-exp-extra hidden>
<a
class="exp-card exp-card--link"
href="https://www.orioninnovation.com/"
target="_blank"
rel="noopener noreferrer"
data-exp-order="6"
aria-label="Orion Innovation (ex MERA) — open company website"
>
<div class="exp-card__time-row">
<span class="exp-card__period">July 2016 — October 2017</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">1 year 4 months</span>
</div>
<h3 class="exp-card__company">
Orion Innovation (ex MERA)
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
An international technology company specializing in custom development and engineering solutions for large enterprise clients.
</p>
</a>
</li>
<li class="experience-grid__item" data-exp-extra hidden>
<a
class="exp-card exp-card--link"
href="https://aegees.com/"
target="_blank"
rel="noopener noreferrer"
data-exp-order="5"
aria-label="Aegees — open company website"
>
<div class="exp-card__time-row">
<span class="exp-card__period">October 2017 — December 2018</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">1 year 3 months</span>
</div>
<h3 class="exp-card__company">
Aegees
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
A secure messenger with end-to-end encryption and no message storage on servers, focused on maximum user privacy.
</p>
</a>
</li>
<li class="experience-grid__item" data-exp-extra hidden>
<a
class="exp-card exp-card--link"
href="https://spaceshipapps.ru/"
target="_blank"
rel="noopener noreferrer"
data-exp-order="7"
aria-label="SpaceshipApps — open company website"
>
<div class="exp-card__time-row">
<span class="exp-card__period">June 2015 — June 2016</span>
<span class="exp-card__sep" aria-hidden="true">·</span>
<span class="exp-card__duration">1 year 1 month</span>
</div>
<h3 class="exp-card__company">
SpaceshipApps
<span class="exp-card__ext" aria-hidden="true"></span>
</h3>
<p class="exp-card__desc">
A studio building mobile and web apps end-to-end for businesses and entrepreneurs.
</p>
</a>
</li>
</ol>
<div class="experience__actions">
<button
type="button"
class="btn btn--secondary btn--flat experience__toggle"
data-exp-toggle
aria-expanded="false"
aria-controls="experience-list"
>
Show all
</button>
</div>
</div>
</section>
<section id="skills" class="section section--tight" aria-labelledby="skills-title" data-reveal>
<div class="section__inner">
<h2 id="skills-title" class="section__title">Skills</h2>
<div
class="skills-intro skills-intro--chat section__prose"
data-skills-intro
role="region"
aria-labelledby="skills-title"
>
<div class="skills-msg" data-skills-msg>
<div class="skills-msg__body">
<p class="skills-msg__author">Nikolay M:</p>
<p class="skills-msg__text">
My experience covers both launching a product's first versions from scratch and evolving mature solutions — where the goal is not to break familiar flows but to refine them carefully.
</p>
<time class="skills-msg__time" datetime="" data-skills-msg-time></time>
</div>
</div>
<div class="skills-msg" data-skills-msg>
<div class="skills-msg__body">
<p class="skills-msg__text">
Below are examples of real business tasks and how I approached them
</p>
<time class="skills-msg__time" datetime="" data-skills-msg-time></time>
</div>
</div>
</div>
<div class="skills-categories">
<section class="skills-category" aria-labelledby="skills-cat-1-heading">
<div class="skills-category__layout">
<h3 id="skills-cat-1-heading" class="skills-category__title">
<button
class="skills-category__toggle"
type="button"
aria-expanded="false"
aria-controls="skills-cat-1"
data-skills-accordion-toggle
>
<span class="skills-category__title-text">Product thinking &amp; interface logic</span>
<span class="skills-category__chevron" aria-hidden="true"></span>
</button>
</h3>
<div id="skills-cat-1" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
<article class="skill-task-card">
<p class="skill-task-card__task">
Make a complex product clearer so users reach key actions.
</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I map the user journey and cut steps that don't move them toward the goal.
</p>
<p class="skill-task-card__solution">
I design flows so every step makes clear what's happening and what to do next.
</p>
<p class="skill-task-card__solution">
I make even complex features feel natural by using familiar patterns and standard UI elements.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Improve the first steps in the product and guide users to their first "aha" moment.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I remove everything that distracts from the first result: extra steps, optional fields, secondary details.
</p>
<p class="skill-task-card__solution">
I replace long explanations with small hints exactly when they're needed — no lengthy tours or complex manuals.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Reduce support load through interface design.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I collect frequent requests and, based on them, simplify the flow and UI so users can solve issues on their own.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Tie the interface to product goals, not just a feature list.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I start from the business and user problem we're solving, then build flows and UI around it.
</p>
<p class="skill-task-card__solution">
I turn scenario problems into clear hypotheses and help the PM pick what actually moves the needle.
</p>
</div>
</article>
</div>
</div>
</section>
<section class="skills-category" aria-labelledby="skills-cat-2-heading">
<div class="skills-category__layout">
<h3 id="skills-cat-2-heading" class="skills-category__title">
<button
class="skills-category__toggle"
type="button"
aria-expanded="false"
aria-controls="skills-cat-2"
data-skills-accordion-toggle
>
<span class="skills-category__title-text">Design systems &amp; consistency</span>
<span class="skills-category__chevron" aria-hidden="true"></span>
</button>
</h3>
<div id="skills-cat-2" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
<article class="skill-task-card">
<p class="skill-task-card__task">
Bring several products or modules to a unified look and logic.
</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I assemble a shared UI kit and core principles usable across all products.
</p>
<p class="skill-task-card__solution">
I surface repeated patterns and consolidate them into one system instead of a dozen similar solutions.
</p>
<p class="skill-task-card__solution">
I unify scattered solutions into a single design system that's comfortable for both designers and developers.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Make the interface scalable without piling up hacks.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I define simple design principles and component usage rules.
</p>
<p class="skill-task-card__solution">
I set up the design system structure so it's genuinely maintainable and extensible with new patterns.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Tidy up interfaces that grew piece by piece over time.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I merge similar solutions into common components and patterns, removing duplicates and accidental differences.
</p>
<p class="skill-task-card__solution">
I keep the interface clean and modern: readable typography, clear hierarchy, accents without visual noise.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Refresh the product's look so it doesn't feel dated next to competitors.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I start with frequently used screens and elements so the impact shows for both users and business.
</p>
<p class="skill-task-card__solution">
I align update stages with the current roadmap and dev workflow so familiar flows and releases aren't broken.
</p>
<p class="skill-task-card__solution">
I set the base style — typography, color, spacing — so the interface looks clean and modern.
</p>
</div>
</article>
</div>
</div>
</section>
<section class="skills-category" aria-labelledby="skills-cat-3-heading">
<div class="skills-category__layout">
<h3 id="skills-cat-3-heading" class="skills-category__title">
<button
class="skills-category__toggle"
type="button"
aria-expanded="false"
aria-controls="skills-cat-3"
data-skills-accordion-toggle
>
<span class="skills-category__title-text">Research, metrics &amp; analytics</span>
<span class="skills-category__chevron" aria-hidden="true"></span>
</button>
</h3>
<div id="skills-cat-3" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
<article class="skill-task-card">
<p class="skill-task-card__task">
Get a real picture of user behavior instead of relying on the team's guesses.
</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I talk to users: I watch how they solve their tasks in the product and what they do at each step.
</p>
<p class="skill-task-card__solution">
I turn research findings into concrete changes in the interface and flows.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Make sure key flows work before shipping them to production.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I prepare simple usability-test scenarios based on real user tasks.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Understand how interface changes affect the product's key metrics.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I help describe the key events and funnels that reflect real user steps.
</p>
<p class="skill-task-card__solution">
I look at metrics alongside real usage scenarios and suggest interface changes that make things easier for users and better for the product.
</p>
</div>
</article>
</div>
</div>
</section>
<section class="skills-category" aria-labelledby="skills-cat-4-heading">
<div class="skills-category__layout">
<h3 id="skills-cat-4-heading" class="skills-category__title">
<button
class="skills-category__toggle"
type="button"
aria-expanded="false"
aria-controls="skills-cat-4"
data-skills-accordion-toggle
>
<span class="skills-category__title-text">Design team growth &amp; mentoring</span>
<span class="skills-category__chevron" aria-hidden="true"></span>
</button>
</h3>
<div id="skills-cat-4" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
<article class="skill-task-card">
<p class="skill-task-card__task">Build clear processes inside the design team.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I introduce regular design reviews of shipped work, where everyone gets useful, constructive feedback.
</p>
<p class="skill-task-card__solution">
I agree on a task brief template and transparent acceptance criteria, so it's clear when a task is truly done.
</p>
<p class="skill-task-card__solution">
I set up a workflow that handles both planned work and urgent "on-fire" tasks.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">
Make design, product, and engineering work as one team, not three separate camps.
</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I act as the bridge: discuss flows with the PM, constraints with engineering, and capture decisions in the interface.
</p>
</div>
</article>
<article class="skill-task-card">
<p class="skill-task-card__task">Hire and grow product designers for a complex product.</p>
<div class="skill-task-card__solutions">
<p class="skill-task-card__solution">
I help shape the candidate requirements.
</p>
<p class="skill-task-card__solution">
I take part in hiring: I check how a candidate handles flows, constraints, and complex cases.
</p>
<p class="skill-task-card__solution">
I structure interviews to assess thinking and tooling.
</p>
<p class="skill-task-card__solution">
I set up onboarding through real tasks and regular reviews so the designer gets up to speed and adds value faster.
</p>
<p class="skill-task-card__solution">
I run regular 1:1s with designers: we review decisions, growth areas, and next steps.
</p>
</div>
</article>
</div>
</div>
</section>
</div>
</div>
</section>
{{> mini-projects-section}}
{{> contact-section}}
{{> footer}}
{{> cookie-notice}}
{{> nav-more-floating}}
</body>
</html>