🧍♂️ Про мене
Привіт! Я — Олексій, фронтенд-розробник із філософією «код, який поважає людей».
⚙🛠 HTML, CSS, JS, WordPress, email-templates - створюю рішення без фальші та шаблонів, суворо за завданням.
🔍 Верстаю макети з адаптацією до змісту, платформи та користувача.
🧠 Знаю DOM, layout, viewport, вмію діагностувати неочевидні помилки.
💬 Спілкуюся точно, ввічливо та конструктивно.
⚙🛠 Мої навички.
- HTML
- CSS/CSS3
- JavaScript
- Weblium
- Figma, PSD, Zeplin
- WordPress
- БЕМ
🔗 Портфоліо: [olexiy1974.github.io/resume](https://olexiy1974.github.io/resume)
📌 1. Інтерактивне резюме – структура, скіли, блок «Мої проекти» – GitHub Pages | GitHub
Опис проекту на GitHub - https://github.com/Olexiy1974/resume
Сторінка для демонстрації - https://olexiy1974.github.io/resume/
📌 2. Таймер з анімацією та мультимедіа – керування таймером, звукове оформлення – GitHub Pages | GitHub
Опис проекту на GitHub - https://github.com/Olexiy1974/timer
Сторінка для демонстрації - https://olexiy1974.github.io/timer/
📌 3. Mary Cleaning - сервісний лендинг - адаптивна верстка, структура, блоки послуг, відгуки, команда - Демо
Сторінка для демонстрації - https://singular-buttercream-d57725.netlify.app/
📌 4. Бандерогусь – тематична сторінка – патріотична стилізація, форма підписки, гумор – (вставимо окремо на запит)
Сторінка для демонстрації - https://vocal-llama-849601.netlify.app/
📌 5. Промо-лендінг (Bose стилізація) – товари, переваги, адаптивний лендинг – Демо
Сторінка для демонстрації - https://admirable-sawine-5a4863.netlify.app/
📌 6. Альтернативне онлайн-резюме – лаконічна подача – Netlify
Сторінка для демонстрації – https://myinternetresume.netlify.app/
📌 7. "Психологія страху камери" - мобільна сторінка, створена в Weblium за дизайнерським макетом Adobe Photoshop
🧍♂️ В рамках замовлення від психолога Віталія я створив мобільну веб-сторінку, присвячену темі страху перед камерою. В основі його макет Photoshop, який я адаптував під конструктор Weblium, долаючи обмеження платформи.
📱 Сторінка орієнтована виключно на мобільні пристрої зі збереженням структури та стилістики макета. Я реалізував гнучку адаптивну верстку, організовані блоки контенту, форму для підписки та відповідну тематику стилізацію.
🧠 Окремим викликом стала невидима кнопка Submit у тестовій платіжній формі. Я діагностував проблему на рівні DOM і CSS, провів reflow макета через fullscreen-перемалювання і досяг повного відображення елемента без втрати функціональності.
🎯 В результаті:
– Замовник отримав точну реалізацію свого бачення, адаптовану до реальних умов конструктору.
Я показав глибоке розуміння DOM, layout, viewport та CSS, що дозволило вирішити нестандартну ситуацію без зміни дизайну.
---
💬 Цей кейс – для мене не просто технічне завдання, а приклад щирої співпраці: коли замовник має ідею, а я допомагаю їй народитися в реальності, чесно та без шаблонів.
Сторінка для демонстрації –Blank Website | Home
🔗 GitHub: [github.com/Olexiy1974] (https://github.com/Olexiy1974)
🔧 Вирішення проблеми невидимої кнопки Submit у платіжній формі
Ситуація:
При верифікації профілю на Weblancer через онлайн форму я зіткнувся з проблемою: кнопка Submit не відображалася в браузері Google Chrome, хоча її наявність була підтверджена в DOM через DevTools.
Діагностика та аналіз:
Через Chrome DevTools виявив наявність тега кнопки у HTML-структурі, але він був відсутній у рендерингу сторінки.
Проаналізував CSS-стилі елемента та батьківських блоків – зокрема padding, margin, та розміри контейнерів, що впливають на макет.
Визначив, що кнопка не потрапляє в макет сторінки через надмірні внутрішні відступи та брак вільного місця в viewport.
Рішення:
Включив режим повноекранного перегляду сторінки (fullscreen), що спричинило повторне побудова макета (reflow) всієї сторінки та її елементів.
Завдяки новому viewport макет сторінки був перерозподілений, і об'єкт кнопки Submit отримав достатньо місця для відображення.
Кнопка з'явилася на сторінці, і транзакцію було успішно завершено.
Підсумок:
Визначив та усунув причину помилки рендерингу, пов'язану з невдалим розміщенням кнопки в макеті.
Доказав, що браузер не рендерує елемент, якщо він не входить у layout-tree і продемонстрував знання принципів DOM, layout, reflow та впливу viewport.
🔍 Примітка:
Це була помилка розробника платіжної форми, яка не врахувала крайні умови viewport при верстці.
🔧 Послуги, що пропонуються:
• Верстка односторінкових сайтів (HTML/CSS)
• Адаптація під мобільні пристрої
• Додавання інтерактиву через JavaScript (таймери, перемикач теми)
• Створення онлайн-резюме та портфоліо
• Публікація на GitHub Pages
• Налаштування репозиторіїв та фіксація багів
---
📌 Що можу зробити для замовника:
• Чітко зрозуміти завдання та реалізувати його без зайвих ітерацій
• Працювати структуровано, вчасно, без затримок
• Написати чистий, адаптивний код
• Спілкуватися просто, конструктивно та у справі
• Надати результат “раз – і якісно”
💬 Готовий до нових завдань та співробітництва.
Пишу реальний код для реальних людей без фальшу та зайвого. У цьому мій профіль верифікований.
І насамкінець як дуже важливе.
Мої найважливіші для мене принципи для взаємодії та максимально продуктивної та взаємовигідної співпраці із замовником.
🧭 "Досвід співробітництва, який викликає довіру".
💬 Комунікація.
- Регулярно інформую клієнта про хід виконання проекту
- Відповідаю оперативно та у справі, без «води»
- Своєчасно і також без води відразу ж у момент їх виникнення та виявлення повідомляю про всі виявлені нюанси та проблеми, обговорюю та погоджую із замовником можливі методи та шляхи їх вирішення
- Дотримуюсь ввічливого, доброзичливого та поважного стилю спілкування
📌 Уточнення очікувань
- Перед початком проекту уточнюю вимоги, обсяг та терміни
- Пропоную рішення, якщо завдання сформульовані не до кінця
- Підтверджую всі домовленості письмово, щоб уникнути непорозуміння
🛠 Якість та відповідальність
- Виконую роботу уважно, не залишаючи «сировини» або дрібних недоліків
- Перевіряю результат перед здаванням: адаптивність, кросбраузерність, валідність
- Завжди дотримуюсь термінів, або заздалегідь повідомляю про можливі зміни
🎯 Гнучкість та повага до побажань
- Уважно ставлюся до особистих побажань клієнта як за змістом, так і за стилем.
- Якщо щось технічно неможливо — пояснюю причини та пропоную альтернативу
- Не нав'язую рішення – обговорюю, пропоную, раджу
🎯 Мій девіз якого я завжди слідую і якого завжди дотримуюсь.
- Я пишу код, який шанує людей. Без фальшу. Без шаблонів.
- І кожен реалізований мною проект – це не просто сайт, не просто робота – це справжній акт довіри з боку замовника.
🎯💡 Мої компетенції - це не просто знання, а структуроване відчуття дизайну
- Я не просто верстаю макети –я адаптую дизайн для користувача, платформи та сенсу. У моїй роботі з HTML/CSS/JS є місце і для точності, і для людей.
- Чистий код – як чиста думка.
- Адаптивність – як здатність чути контекст.
🔹 HTML, CSS, JS - не тільки синтаксис, а засоби втілення логіки та інтуїції
🔹 WordPress — не просто CMS, а екосистема, в якій я орієнтуюсь, структурую теми, працюю з ACF, та враховую потреби як розробника, так і користувача
🔹 Sendy, email-templates - адаптація комежування платформ, створення сумісних рішень для всіх поштових клієнтів
🔹 Figma, PSD, Zeplin - макет як початок діалогу, а не догма
🔹 Комунікація — моя сила: я пишу так, щоб було зрозуміло, тактовно та точно. М'яко, але впевнено, донесу думку та підтримую довіру
🔹 Готовність освоївати нові платформи - Weblium, Tilda, Wix - це виклики, під які я адаптую свої навички
🔧 Мені не потрібно перераховувати кожну технологію — я вмію ставити правильні питання та вибудовувати працюючі рішення.
🔭 Я дивлюся на код як на архітектуру значення. І кожен тег, кожен div – це випадковість, а вибір.
