Олексій Смірнов

🧍‍♂️ Про мене

Привіт! Я — Олексій, фронтенд-розробник із філософією «код, який поважає людей».

⚙🛠 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 – це випадковість, а вибір.