DM

Independent design engineer

Dmitriy Popov

Creative UI/UX &High-Performance Frontend

Human-centered design. Engineered to perform.

Scroll to explore

About

[02] About

Hi, I'm Dmitriy.

A Design Engineer and Creative Frontend Developer. I build digital products where high-end visual design meets complex technical architecture.

As both the designer and developer of my projects, I don't just execute technical tasks. My process starts with deeply understanding your goals to find a visual language that reflects the core of your product.

I strive to "humanize" digital experiences – making them empathetic, intuitive, and tactile through an obsessive attention to small details and micro-interactions.

[03] About

What I bring

  1. End-to-End Design & Development

    From UX research and Figma prototyping to pixel-perfect code implementation. I ensure the final product looks exactly as intended and feels alive.

  2. Empathetic & Accessible UI

    I am aware of a ton of AI-feeling interfaces and striving to humanize the design and UX. I have experience building neuro-inclusive, stress-free interfaces with optimized accessibility (A11y), ensuring your product is comfortable for every user.

  3. Interactive 3D & Web Audio

    I use WebGL, Three.js, and Web Audio API not just for decoration, but as meaningful parts of the user experience (e.g., scroll-reactive 3D elements, real-time audio mixers).

  4. High-Performance Architecture

    Heavy visuals shouldn't mean slow websites. I use modern architectures like Astro (Partial Hydration / Islands) and Next.js to deliver 60FPS animations and Lighthouse 100 scores, even with heavy 3D assets and media grids.

  5. Complex Web Apps

    Beyond landing pages, I build robust architectures for SaaS and Web3 platforms (custom visual data trees, interactive timelines, dynamic dashboards).

Projects

[04] Projects

Vortex Foundation

High-Converting Web3 Corporate Platform

A premium B2B platform for a crypto market maker. Features scroll-animated chronological timelines, dynamic data counters for business metrics, and ergonomic verification forms.

  • Next.js
  • TypeScript
  • Tailwind CSS
  • Framer Motion
  • GSAP
View project : Vortex Foundationvortex.foundation
[05] Projects

Basic Bakery

B2B E-commerce & Management Ecosystem

An end-to-end wholesale bakery platform. Features a reactive stateful catalog, dynamic cart calculation, regional logistics validation widget, custom admin dashboard, and Telegram bot integration for staff.

  • Next.js
  • TypeScript
  • Tailwind CSS
  • Node.js
View project : Basic Bakerybasicbakery.rs

3D

[06] 3D

[PLACEHOLDER] Depth as information

[PLACEHOLDER] What I do with WebGL and Three.js: scroll-reactive scenes, point clouds, shaders that carry meaning instead of decoration.

  • Three.js
  • R3F
  • GLSL
  • Spline
[07] 3D

Matvei Brumberg Portfolio

High-Performance 3D/Motion Designer Portfolio

A visually expressive portfolio built for heavy media assets. Features optimized media grids with lazy-loading, seamless multi-level infinite marquees, and interactive local-time widgets.

  • Next.js
  • Three.js
  • Spline
  • Tailwind CSS
View project : Matvei Brumberg Portfoliomatveibrumberg.vercel.app
[08] 3D

Foam

Interactive Acoustic & Spatial Audio Simulation & Ear-Training Platform

Foam is a browser-based acoustic simulation platform that bridges the gap between theoretical spatial audio physics and practical sound production. Designed for sound engineers, producers, and students, the platform allows users to visualize and manipulate sound propagation in a 3D environment with high precision.

  • Next.js
  • Supabase
  • Three.js
  • Tone.js
  • Resonance Audio
View project : Foam[PROJECT LINK]
[09] 3D

[PLACEHOLDER] Heavy visuals, light pages

[PLACEHOLDER] Lazy-loaded scenes, capped DPR, paused render loops — keeping 60fps and Lighthouse scores with WebGL on the page.

  • Astro Islands
  • Next.js
  • Performance

Audio

[10] Audio

[PLACEHOLDER] Interfaces that listen

[PLACEHOLDER] Web Audio work: real-time mixers, visual diffs of takes, timeline comments tied to musical bars.

  • Web Audio API
  • Tone.js
  • Resonance Audio
[11] Audio

Sonicdesk

Interactive Audio SaaS for Musicians

An innovative "Git for music" workspace. Features a custom visual version-control tree, interactive audio mixer with visual diffs, and timeline-based comments tied to musical bars.

  • Next.js
  • Web Audio API
  • Tone.js
  • Motion
  • Supabase
View project : Sonicdesksonicdesk.studio
[12] Audio

Tower

Generative Ambient Radio for Sleep & Focus

A browser-based relaxation app that layers archival NASA mission and air-traffic-control radio under a generative ambient score. The aesthetic is a late-night airport: quiet, procedural, never quite silent. Built with Next.js and TypeScript, with a custom audio engine on Tone.js and Tonal.js.

  • Next.js
  • TypeScript
  • Tone.js
  • Tonal.js
View project : Tower[PROJECT LINK]
[13] Audio

Mono

ASCII Browser Synthesizer

An ASCII-styled browser-based synthesizer that combines retro-inspired aesthetics with advanced sound design capabilities, allowing users to craft and visualize audio directly in their browser.

  • Svelte
  • Tone.js
  • TypeScript
View project : Monomono-steel-xi.vercel.app
[14] Audio

[PLACEHOLDER] Spatial sound in the browser

[PLACEHOLDER] Room acoustics, spatial audio and how it becomes a teaching instrument.

  • Spatial audio
  • [STACK]

Human-first

[15] Human-first

[PLACEHOLDER] Accessible by default

[PLACEHOLDER] How accessibility shapes the work from the first sketch: contrast, focus, keyboard paths, readable type.

  • WCAG AA
  • Keyboard
  • Screen readers
[16] Human-first

Alevtyna Yakovleva

Neuro-Inclusive Psychologist Website

An empathetic, accessible landing page focusing on user psychological comfort. Features interactive 3D WebGL elements that react to scroll, built on Astro Islands architecture for 100% Lighthouse performance without sacrificing heavy visual graphics.

  • Astro
  • Three.js (R3F)
  • Tailwind CSS
  • Framer Motion
View project : Alevtyna Yakovlevaalevtina-psy.com
[17] Human-first

[PLACEHOLDER] Calm, neuro-inclusive UI

[PLACEHOLDER] Stress-free interfaces: predictable motion, gentle feedback, room to breathe.

  • Reduced motion
  • Plain language
[18] Human-first

[PLACEHOLDER] People before pixels

[PLACEHOLDER] My approach to human-centered design — research, empathy, and testing with real people.

  • UX research
  • Empathy

Stack

[19] Stack

Hard

Languages

  • JavaScript
  • TypeScript
  • HTML5
  • CSS3

Styling

  • Tailwind
  • SASS
  • CSS Modules

Frameworks

  • React
  • Next.js
  • Svelte

Data & CMS

  • RTK Query
  • React Query
  • Strapi
[20] Stack

Creative

3D & Motion

  • Three.js
  • Spline
  • Lottie

Audio

  • Tone.js
  • Resonance Audio
  • Web Audio API
[21] Stack

Process

Testing

  • Jest
  • Cypress

Tooling

  • ESLint
  • Prettier

AI

  • Claude Code
  • Claude Design
  • Cursor
  • Lovable

Principles

[22] Principles

Goals before pixels

Every project starts with understanding what the product has to achieve — the visual language follows from that.

[23] Principles

Humanize the interface

Empathetic, tactile and calm over generic, AI-feeling patterns.

[24] Principles

Details are the product

Micro-interactions and small states are where trust is built.

[25] Principles

Performance is a feature

Heavy visuals, 60fps, Lighthouse 100. Not a trade-off.

[26] Principles

Accessible by default

Neuro-inclusive, keyboard-friendly, readable. Comfortable for every user.

[27] Principles

Design and code are one craft

I design what I can build, and build exactly what I designed.

Contact

[28] Contact

Let’s build something human.

Good things start with a conversation.

End of the rail. Start of something new.

Intro