ПР№19

Практична робота №19: Створення персонального веб-сайту "Портфоліо розробника"

Мета: Навчитися створювати сучасний багатосторінковий веб-сайт, який демонструє навички, проєкти, галерею, блог і контактну інформацію, використовуючи HTML, CSS та JavaScript.

Завдання:

1. Структура сайту

   • Використати основну HTML-структуру файлу index.html.

   • Створити такі секції:

     • Навігація.

     • Про мене.

     • Навички.

     • Проєкти.

     • Галерея.

     • Блог.

     • Відгуки.

     • Контакти.

   • Забезпечити відповідність секцій за ідентифікаторами (id) для коректної роботи навігації.

2. Дизайн

   • Використати CSS-стилі, які забезпечують адаптивність сайту для різних пристроїв.

   • Використати змінні CSS для налаштування кольорової гами та темної теми.

   • Налаштувати шрифти через підключення Google Fonts.

3. Інтерактивність

   • Реалізувати модальне вікно для детальної інформації про проєкти.

   • Додати перемикач темної/світлої теми.

   • Реалізувати функцію "Повернутися наверх".

   • Додати фільтрацію проєктів за тегами.

4. Контактна форма

   • Створити інтерактивну контактну форму з перевіркою обов’язкових полів.

   • Реалізувати повідомлення про успішне надсилання (без реальної відправки даних).

5. Додаткові бібліотеки

   • Використати AOS (Animate On Scroll) для анімації елементів при прокручуванні.

   • Використати Font Awesome для іконок.

6. Галерея

   • Використати адаптивний макет для відображення зображень у вигляді сітки.

   • Реалізувати ефект масштабування при наведенні на зображення.

7. Перевірка

   • Переконатися, що сайт коректно відображається на різних розмірах екранів.

   • Перевірити роботу всіх інтерактивних елементів, таких як модальне вікно, перемикач теми, кнопка "Повернутися наверх", фільтри.