Switch to English?
Yes
Переключитись на українську?
Так
Переключиться на русскую?
Да
Przełączyć się na polską?
Tak

Руслан Растегаєв

Нерешаемых задач - не существует! Спешка - противоположник качеству!
Предложите Руслану работу над вашим следующим проектом или зарегистрируйте профиль фрилансера и начинайте зарабатывать прямо сейчас.

Украина Харьков, Украина
8 часов 56 секунд назад
Свободен для работы свободен для работы
возраст 33 года
на сервисе 7 лет
  • mongodb
  • websockets
  • GraphQL
  • PostgreeSQL
  • antdesign
  • HTML5/CSS3/SCSS/SASS
  • RTK Query
  • MUI
  • TaillwindCSS
  • redux tool kit
  • javascript
  • REST API
  • Next.js
  • TypeScript
  • React.js

Рейтинг

Успешных проектов
Нет данных
Средняя оценка
Нет данных
Рейтинг
370
Веб-программирование
Javascript и Typescript

Уровень владения языками

Українська Українська: носитель
English English: выше среднего

Навыки и умения

Портфолио


  • Миграция спортивной платформы на Next.js без потери SEO

    Веб-программирование
    Британская B2C-платформа, которая агрегирует информацию о спортивных событиях по всему миру и дает пользователям возможность переходить к покупке билетов через партнеров.

    Проект уже существовал и имел органический трафик, поэтому основная задача заключалась не просто в "переработке сайта", а в переносе его на современный технологический стек, обновлении интерфейсов, повышении производительности и при этом сохранении SEO-структуры, которая уже работала.

    === МОЯ ЗАДАЧА ===

    Участвовать в миграции существующей платформы на Next.js, реализовать новый frontend-функционал, оптимизировать производительность ключевых страниц и помочь сохранить поисковую структуру сайта во время перехода на новый фреймворк.

    === ЧТО БЫЛО СДЕЛАНО ===

    • реализовывал новые страницы и компоненты на основе обновленного дизайна;
    • разработал высокопроизводительную страницу поиска спортивных событий для стабильной работы во время пиковых нагрузок;
    • воспроизвел структуру блога и SEO-контента на новом стеке;
    • спроектировал маршрутизацию так, чтобы она повторяла существующую иерархию URL-адресов;

    === ОСОБЕННОСТИ ПРОЕКТА ===

    Главная сложность заключалась в том, что сайт уже имел органический трафик и наработанные позиции в Google. Поэтому миграция на Next.js должна была быть осторожной: нужно было не просто перенести страницы, а воспроизвести URL-структуру для блога, новостей и SEO-контента так, чтобы поисковые системы корректно восприняли обновленную версию сайта.

    Для этого я использовал Screaming Frog, анализировал текущую структуру страниц и построил маршрутизацию на новом стеке без хаотичных изменений в ссылках.

    Вторая важная часть — страница поиска спортивных событий. В пиковые часы она должна была выдерживать очень высокие нагрузки (200,000+ пользователей одновременно), поэтому нужно было внимательно работать с производительностью: избегать лишних ререндеров, не перегружать DOM, правильно обрабатывать большие списки событий и не ухудшать пользовательский опыт.

    Это был не просто UI-проект, а техническая миграция существующей платформы, где нужно было балансировать между новым дизайном, производительностью, SEO и стабильностью работы продукта.

    === РЕЗУЛЬТАТ ===

    Клиент получил обновленную frontend-часть платформы на Next.js с современным интерфейсом, улучшенной производительностью и сохраненной логикой SEO-структуры. Страница поиска событий была оптимизирована для работы с большими объемами данных и высоким нагрузками в пиковые периоды.

    Миграция позволила перевести существующий продукт на современный технологический стек без хаотичной потери важных страниц, URL-структуры и SEO-логики.

    === ТЕХНОЛОГИИ ===

    Next.js, TypeScript, Material UI, React Hook Form, Redux, React Query, REST API, Screaming Frog

    #NextJS #React #TypeScript #FrontendDevelopment #SEO #TechnicalSEO #Migration #WebApp #SportsPlatform #HighLoad #PerformanceOptimization #ReactQuery #Redux #MaterialUI #ReactHookForm #RESTAPI #FrontendOptimization #B2CPlatform
  • Фронтенд-разработка SaaS для ресторанного бизнеса

    Веб-программирование
    SaaS-платформа для ресторанного бизнеса на рынке Израиля.

    Продукт должен был закрывать две части: интерфейс для клиентов ресторана и внутреннюю систему для персонала. Клиенты могли бронировать столик, делать заказы и оплачивать их, а менеджеры, официанты, супервайзеры и администраторы — управлять рестораном, сотрудниками, заказами, инвентарем и запасами.

    Заказчик пришел с готовым дизайном в Figma и предварительной оценкой сроков от других разработчиков. Моей задачей было полностью реализовать frontend-часть продукта с нуля и довести ее до рабочего MVP.

    === МОЯ ЗАДАЧА ===

    Разработать frontend-архитектуру SaaS-продукта и реализовать полную клиентскую часть веб-приложения на React и TypeScript: от базовой структуры проекта до сложной бизнес-логики, real-time функционала, ролей пользователей, доступов по подпискам и адаптивных интерфейсов.

    === ЧТО БЫЛО СДЕЛАНО ===

    • спроектировал архитектуру всей frontend-части приложения;
    • реализовал интерфейс для клиентов ресторана: бронирование столика, создание заказа, просмотр меню и оплата;
    • реализовал интерфейсы для персонала ресторана: менеджеров, официантов, супервайзеров и администраторов;
    • реализовал real-time отслеживание заказов, инвентаря и запасов через WebSockets;
    • построил логику доступа к функциям в зависимости от роли пользователя и тарифного плана подписки;
    • реализовал subdomain-based логику для ресторанов, чтобы разные рестораны могли работать через собственные поддомены;
    • реализовал весь UI с дизайн-системой Ant Design и TailwindCSS;
    • отвечал за производительность, доступность, безопасность и качество frontend-кода;
    • помогал junior-разработчику: делегировал задачи, проводил code review и объяснял подходы к реализации.

    === ОСОБЕННОСТИ ПРОЕКТА ===

    Главная сложность проекта заключалась не в отдельных экранах, а в бизнес-логике продукта.
    Потребовалось реализовать multi-tenant архитектуру, где каждый ресторан имеет свою логику, свои данные и собственный поддомен, но при этом вся система работает как единый SaaS-продукт.
    Отдельно сложной частью была система доступов. В продукте нужно было учитывать не только роли пользователей — manager, supervisor, waiter, admin, — но и тарифный план ресторана. Например, часть функций могла быть доступна только для определенной подписки: добавление сотрудников, real-time inventory tracking, расширенная аналитика и другие возможности.

    Еще одной важной задачей была реализация оплаты в условиях cross-domain flow. Корзина формировалась на поддомене ресторана, а оплата проходила через основной домен. Для этого нужно было безопасно передавать данные между разными доменами, не нарушая пользовательский сценарий.

    Также проект имел ограничения по срокам. Нужно было быстро определять приоритеты для MVP и не пренебрегать архитектурными решениями для дальнейшего масштабирования проекта.

    === РЕЗУЛЬТАТ ===

    Клиент получил полностью рабочий MVP SaaS-платформы для ресторанного бизнеса.
    Frontend-часть была реализована с нуля: с адаптивными интерфейсами для клиентов и персонала, real-time обновлением заказов, системой ролей, ограничениями по подпискам, subdomain-based логикой для ресторанов и сложным сценарием оплаты между доменами.
    Проект был доведен до рабочего MVP в сжатые сроки, несмотря на изменение требований и более сложную реальную логику, чем было заложено в первоначальной оценке.

    === ТЕХНОЛОГИИ ===

    React.js, TypeScript, Redux Toolkit, RTK Query, Ant Design, TailwindCSS, WebSockets, pusher.js, laravel-echo, window.postMessage()

    #React #TypeScript #FrontendDevelopment #SaaS #MVP #ReduxToolkit #RTKQuery #AntDesign #TailwindCSS #WebSockets #FrontendArchitecture #MultiTenant #Subdomains #AccessControl #RestaurantSaaS #RestaurantManagement #WebApp #JavaScript
  • Германия | Сайт для бьюти-мастера с SEO под заявки из Google

    HTML и CSS верстка
    Сайт для бьюти-мастера в Германии, который работает в собственном кабинете и предоставляет услуги перманентного макияжа и ламинирования ресниц.

    Сначала у клиента была страница, собранная на конструкторе. Нужно было перенести её на чистую валидную верстку, расширить сайт отдельными страницами под каждую процедуру, добавить новые секции и подготовить сайт к органическому продвижению в Google по ключевым услугам.

    === МОЯ ЗАДАЧА ===

    Переверстать сайт с конструктора на чистую, быструю и адаптивную верстку, сохранив основной стиль бренда, расширить структуру сайта отдельными страницами под услуги и подготовить страницы к SEO-продвижению в Google.

    === ЧТО БЫЛО СДЕЛАНО ===

    • переверстал главную страницу с конструктора на чистую HTML/CSS/JS-верстку;
    • убрал избыточный код конструктора и переписал JS-функционал интерактивных элементов;
    • сохранил основную визуальную стилистику сайта: цвета, настроение, подачу бренда;
    • разработал структуру сайта: главная страница, 7 страниц под отдельные процедуры, страница политики конфиденциальности и юридическое уведомление;
    • реализовал секции для повышения конверсий: кому подходит процедура, карточка процедуры, примеры работ, галерея студии, отзывы и FAQ;
    • реализовал уникальные интерактивные элементы: галерея работ в стиле Instagram-ленты, слайдер в стиле Instagram Stories, FAQ-секцию в формате онлайн-чата;
    • подготовил адаптивную верстку для desktop, tablet и mobile;
    • реализовал Cookie Policy для соответствия европейским требованиям;

    SEO
    • провел анализ ключевых фраз, по которым пользователи ищут процедуры в Германии, в городе Кёльн;
    • вместе с мастером подготовил тексты для страниц услуг с учетом релевантных ключевых запросов;
    • добавил schema.org-разметку для лучшего понимания услуг поисковыми системами;
    • создал и настроил Google Business Profile для отображения кабинета мастера в Google Maps;
    • подключил Google Search Console для анализа индексации и технического состояния сайта;
    • оптимизировал скорость загрузки страниц до зеленой зоны Google PageSpeed.

    === ОСОБЕННОСТИ ПРОЕКТА ===

    В проекте не было готового дизайна в Figma, поэтому нужно было работать от уже существующей страницы на конструкторе. Я сохранил основную цветовую палитру и стиль, но перенес сайт на чистую, контролируемую и значительно легкую верстку без лишнего кода конструктора.
    Отдельная сложность была в том, чтобы переверстать главную страницу и не потерять текущие позиции в органической выдаче Google. Поэтому важно было перенести структуру, контент, ключевые страницы, технические SEO-элементы и не сломать индексацию.
    Еще один важный момент — контент для немецкой целевой аудитории. Сам мастер не из Германии, поэтому сайт должен был не просто выглядеть красиво, а вызывать доверие у локальных клиентов: через структуру страниц, объяснения процедур, примеры работ, отзывы, юридические страницы и корректную подачу услуг.

    === РЕЗУЛЬТАТ ===

    Клиент получил полноценный многостраничный сайт вместо страницы на конструкторе: с чистой валидной версткой, быстрым загрузкой, адаптивом для всех основных устройств и отдельными SEO-страницами под ключевые процедуры.
    Сайт был подготовлен к органическому продвижению в Google, а страницы топовых процедур начали отображаться в органической выдаче по релевантным поисковым запросам, что дало мастеру дополнительный канал привлечения клиентов без оплаты за рекламу.

    === ТЕХНОЛОГИИ ===

    HTML5, SCSS, JavaScript, Gulp, CDN Image Service, schema.org, Google Search Console, Google Business Profile

    #верстка #адаптивнаяВерстка #responsiveDesign #HTML #SCSS #JavaScript #SEO #SchemaOrg #GoogleSearchConsole #GoogleBusinessProfile #PageSpeed #бьютиСайт #сайтДляМастера #сайтУслуг
  • Адаптивная верстка сайта для компании электронных разработок

    HTML и CSS верстка
    Компания, занимающаяся разработкой электронных устройств, дронов, систем отслеживания и других инженерных решений, нуждалась в сайте для презентации услуг, процесса разработки и реализованных проектов.

    Компания закрывает полный цикл создания устройств: от идеи, концептуального дизайна, визуализации и механического проектирования до разработки электроники, IT-части, прототипирования, промышленного дизайна и поддержки серийного производства.

    === МОЯ ЗАДАЧА ===

    Подготовить адаптивную, кроссбраузерную и анимированную верстку по Figma-дизайну для главной страницы в формате лендинга и страницы отдельного кейса компании.

    Отдельный вызов — в дизайне была только desktop-версия, поэтому адаптив для tablet и mobile нужно было продумать и реализовать самостоятельно.

    === ЧТО БЫЛО СДЕЛАНО ===

    • сверстал главную страницу в формате лендинга;
    • сверстал страницу отдельного проекта / кейса;
    • реализовал адаптивную верстку для desktop, tablet и mobile;
    • подготовил верстку для корректного отображения на больших экранах, включая 9K-мониторы;
    • реализовал появление контента с анимацией во время скролла;
    • добавил анимации для основных блоков страницы;
    • реализовал зацикленные анимации декоративных фоновых элементов;
    • настроил слайдеры и галерею;
    • написал JavaScript-логику для интерактивных элементов;

    === ОСОБЕННОСТИ ПРОЕКТА ===

    Главная задача заключалась не просто в верстке страниц, а в том, чтобы сайт выглядел живым, технологичным и динамичным.

    Для этого была реализована система анимаций: основные элементы появлялись во время скролла, а декоративные фоновые элементы имели зацикленное движение. Это создавало эффект "живой" страницы без перегрузки интерфейса.

    Отдельной сложностью была адаптация сайта под очень большие экраны, включая 9K-мониторы. Чтобы интерфейс не выглядел мелким или сломанным на таких разрешениях, в верстке использовались относительные единицы измерения и пропорциональное масштабирование элементов.

    Также в проекте не было готового mobile-дизайна, поэтому адаптивное поведение блоков нужно было придумать самостоятельно, сохранив логику, стиль, анимацию и визуальный характер desktop-версии.

    === РЕЗУЛЬТАТ ===

    Клиент получил адаптивную и кроссбраузерную верстку сайта, которая корректно работает на различных устройствах — от мобильных экранов до 9K-мониторов.

    Сайт получил плавное появление контента, живую анимацию декоративных элементов, интерактивные блоки, слайдеры и галерею. Верстка сохранила технологический характер дизайна и была готова для дальнейшей разработки.

    === ТЕХНОЛОГИИ ===

    HTML5, SCSS, JavaScript, BEM, Lightgallery.js, Swiper.js, GSAP.js, Gulp

    #верстка #адаптивнаяВерстка #HTML #SCSS #JavaScript #BEM #GSAP #SwiperJS #Lightgallery #Gulp #лендинг #анімаціяСайту #engineering #електроніка #дрони #responsiveLayout
  • Адаптивная верстка интернет-магазина украшений на WordPress

    HTML и CSS верстка
    Украинскому бренду авторских ювелирных изделий нужен был нестандартный интернет-магазин для презентации коллекций, отдельных изделий, галереи и дальнейшей интеграции в WordPress.

    === МОЯ ЗАДАЧА ===

    Подготовить адаптивную, кроссбраузерную и интерактивную верстку по дизайну в Figma для дальнейшей передачи WordPress-разработчику.

    === ЧТО БЫЛО СДЕЛАНО ===

    • сверстаны основные страницы сайта: Home, Collection, Collection slug, Product, Single object, Gallery, Static page;
    • реализована адаптивная верстка для desktop, tablet и mobile;
    • подготовлена верстка с учетом будущей интеграции в WordPress;
    • реализована фронтенд-логика для интерактивных элементов;
    • реализованы слайдеры, анимации и интерактивные блоки;
    • подготовлена нестандартная сетка товаров;
    • реализованы анимированные баннеры для страниц коллекций;
    • оптимизирована верстка, чтобы макет имел зеленые показатели в Google Speed Test.

    === ОСОБЕННОСТИ ПРОЕКТА ===

    Главная особенность проекта — нестандартный дизайнерский подход к интернет-магазину. Это был не типичный e-commerce шаблон, а визуально выразительный сайт для авторских украшений с нестандартными сетками, анимациями и отдельной логикой отображения коллекций. Особенно сложной была страница коллекций. На desktop она была реализована в формате полноэкранного вертикального слайдера со скроллом и анимированным появлением элементов баннера. На mobile эта же логика была адаптирована в другой UX-формат: горизонтальный слайдер изображений с описанием под ним. Отдельно была проработана верстка кастомной корзины и checkout.

    === РЕЗУЛЬТАТ ===

    Клиент получил адаптивный рабочий макет всех основных страниц интернет-магазина с готовым фронтенд-функционалом для дальнейшей интеграции в WordPress. Верстка сохранила нестандартную визуальную концепцию дизайна, корректно работала на различных устройствах и была подготовлена для передачи WordPress-разработчику.

    === ТЕХНОЛОГИИ ===

    HTML5, SCSS, JavaScript, jQuery, BEM, Animate.css, Slick.js, WordPress-ready layout, Gulp

    #верстка #адаптивнаяВерстка #HTML #SCSS #JavaScript #jQuery #WordPress #Figma #PixelPerfect #BEM #Gulp #интернетМагазин #eCommerce #ювелирныйБренд #handmadeJewelry #SlickJS
  • Верстка WordPress-сайта для мобильного приложения компании

    HTML и CSS верстка
    Адаптивная верстка многостраничного сайта для компании по разработке мобильных приложений. Компании нужен был корпоративный сайт для презентации услуг, экспертизы, кейсов, блога, вакансий и сбора заявок от потенциальных клиентов.

    === МОЯ ЗАДАЧА ===

    Подготовить чистую, адаптивную и кроссбраузерную верстку по дизайну в Figma для дальнейшей интеграции в WordPress.

    === ЧТО БЫЛО СДЕЛАНО ===

    • сверстаны основные страницы сайта: Home, Expertise, About Us, Cases, Case, Blog, Article, Career, Contact Us, Privacy Policy, 404;
    • реализована pixel-perfect верстка;
    • подготовлен полный адаптив для desktop, tablet и mobile;
    • написана JS-логика для интерактивных элементов;
    • реализовано бургер-меню, слайдеры, попапы, аккордеоны;
    • настроен lazy loading для YouTube-видео с отзывами;
    • реализована валидация форм с учетом структуры WordPress-плагина;
    • подготовлена HTML/CSS/JS-структура для передачи WordPress-разработчику;
    • оптимизирована верстка до зеленых показателей в Google Speed Test.

    === ОСОБЕННОСТИ ПРОЕКТА ===

    Отдельная сложность заключалась в адаптивной верстке баннеров для кейсов. У каждого кейса были разные пропорции и форматы ключевых изображений, поэтому нельзя было использовать одно универсальное решение. Для каждого баннера отдельно прорабатывалась адаптивная поведение, чтобы изображения корректно выглядели на разных экранах и не ломали композицию дизайна.

    === РЕЗУЛЬТАТ ===

    Клиент получил чистую, валидную, адаптивную и оптимизированную верстку, готовую для дальнейшей интеграции в WordPress.

    === ТЕХНОЛОГИИ ===

    HTML5, SCSS, JavaScript, jQuery, BEM, Slick.js, Gulp

    #верстка #адаптивнаяВерстка #HTML #SCSS #JavaScript #jQuery #WordPress #Figma #PixelPerfect #BEM #Gulp #корпоративныйСайт #сайтДляITКомпании #GooglePageSpeed

Активность

  Последние ставки 10
Универсальная верстка поп-ап для любого сайта
500 UAH
Оптимизация сss/html
3000 UAH
Калькулятор с множестовом переменных, сайт на Вордпрессе
400 UAH
Правки с джавой, вёрсткой
200 UAH
Верстка из Figma
2000 UAH
Сайт студии массажа
2000 UAH
Доработать одностраничный сайт
1100 UAH
Написать скрипт для тильды
350 UAH
Адаптивная верстка сайта игрового ПО
12 000 UAH
Версталищик Фигма найдись
2500 UAH