Опис

Це портфоліо виконаної роботи з веб-розробки та верстки сайту для компанії WebStudio. Проєкт представляє собою веб-ресурс, розроблений для презентації послуг студії, її команди та прикладів виконаних проєктів.

Що замовляв клієнт ?
В межах індивідуального проєкту перед фронтенд-розробником стояло завдання створити адаптивний та інтерактивний сайт-візитку. Основні вимоги включали:
- верстку головної сторінки з розділами "Студія" (Studio), "Портфоліо" (Portfolio) та "Контакти" (Contacts);
- реалізацію адаптивного та чуйного (responsive/adaptive) дизайну;
- додавання інтерактивних елементів та ефектів трансформації (transform effects);
- розробку модального вікна для замовлення послуг.

Які інструменти використовувались в роботі ?
- Мова розмітки: HTML5 (семантична верстка);
- Стилізація: CSS3 (Flexbox, адаптивна сітка, ефекти переходів та трансформацій);
- Інтерактивність: JavaScript (код для відкриття та закриття модального вікна).

Що отримав клієнт у результаті ?
В результаті виконаної роботи було створено оптимізовану фронтенд-частину для сайту-візитки:
- Структура сайту та логіка блоків: Головна сторінка має послідовну структуру блоків. Вона починається з першого екрана (Hero) із закликом до дії, переходить до презентації команди компанії з посиланнями на соціальні мережі фахівців, та завершується розділом із прикладами робіт у портфоліо і контактною інформацією.
- UI/UX рішення: Для зручності взаємодії з користувачем налаштовано плавну зміну стану елементів. Кнопки, навігаційні посилання та картки реагують на наведення курсора завдяки CSS-ефектам трансформації.
- Інтегровано модальне вікно, яке відкривається при натисканні на кнопку "Order Service", що є ключовим конверсійним елементом сторінки.
- Адаптивність: Код адаптовано під різні роздільні здатності екранів, завдяки чому елементи інтерфейсу зберігають читабельність та пропорції на десктопних і мобільних пристроях.
- Технічна якість коду: Верстка виконана із використанням чистого семантичного коду без зайвих фреймворків чи важких сторонніх бібліотек, що позитивно впливає на швидкість завантаження сторінок ресурсу.

------
A website of WebStudio company. Responsive/Adaptive design, transform effects, modal window.

Tech: HTML5, CSS3, JavaScript

Role: Frontend Developer Individual project

Навички

Односторінкові сайти та лендінги, Верстка сайтів та веб-сторінок, HTML і CSS верстка

Веб-адреса

https://lkarm67.github.io/goit-markup-hw-06/

Тривалість

02-03-2025 ↔ 06-04-2025

Вкладення

Вкладення не знайдено