Руслан Растегаєв
Запропонуйте Руслану роботу над вашим наступним проєктом або зареєструйте профіль фрилансера і починайте заробляти просто зараз.
Особисте повідомлення
Запропонувати роботу
Харків,
Україна
5 годин 54 хвилини тому
вільний для роботи
вік 33 роки
на сервісі 7 років
Рейтинг
Успішних проєктів
Середня оцінка
Рівень володіння мовами
Українська: носій
English: вище середнього
Резюме
Ви шукаєте надійного та відповідального фронтенд-розробника, який допоможе вам у виконанні ваших завдань або вашій команді?
Привіт! Мене звати Руслан. Я маю понад 9 років професійного досвіду та володію основними веб-технологіями JavaScript, HTML, CSS тощо. За цей період я отримав великий досвід у вирішенні різноманітних фронтенд завдань.
Тому я радий допомогти вам:
💻 Перетворення концепцій і файлів дизайну у функціонуючі інтерфейсні веб-додатки;
💻 Адаптивна, кросбраузерна та семантична верстка;
💻 Розробка компонентів UI React за допомогою Bootstrap, MUI, Tailwind CSS або без них;
💻 Розробка функціональності JavaScript/Typescript (Vanilla JS, React.js, Next.js);
💻 Покращення продуктивності сайту;
💻 Оптимізація швидкості завантаження сайту;
Якщо вам потрібна допомога з макетами, деякими функціональними можливостями інтерфейсу або потрібен член команди інтерфейсу – зв’яжіться. Я радий допомогти. Маю досвід роботи в команді та хороші комунікативні навички. Я тактовний, відповідальний, самодисциплінований, з хорошими манерами розробник.
P.S. Якщо вас бентежить мій рейд, не переживайте, розкажіть про свої завдання, і ми завжди можемо домовитися.
Навички та вміння
Портфоліо
-
Міграція спортивної платформи на 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
-
Frontend-розробка 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 верстання
Компанії, яка займається розробкою електронних пристроїв, дронів, систем відстеження та інших engineering-рішень, потрібен був сайт для презентації послуг, процесу розробки та реалізованих проектів.
Компанія закриває повний цикл створення пристроїв: від ідеї, концептуального дизайну, візуалізації та механічного проєктування до розробки електроніки, 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 для компанії по розробці Mob Apps
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
|
|||||
|
Калькулятор з багаторазовим змінним, сайт на WordPress
400 UAH
|
|||||
|
Правки с джавой, вёрсткой
200 UAH
|
|||||
|
Верстка из Figma
2000 UAH
|
|||||
|
Сайт студии массажа
2000 UAH
|
|||||
|
Доработать одностраничный сайт
1100 UAH
|
|||||
|
Написати скрипт для тильди
350 UAH
|
|||||
|
Адаптивная верстка сайта игрового ПО
12 000 UAH
|
|||||
|
Версталищик Фигма найдись
2500 UAH
|
