База знань 📚

Вигляд:

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

Репозиторій Демо-сторінка

Можливості

✔Адаптивний дизайн: Гнучкий макет, що бездоганно підлаштовується під екрани комп’ютерів, планшетів та телефонів.

✔Динамічний Hero-блок: Привітальний розділ з випадковим фоновим зображенням та надихаючою цитатою під час кожного відвідування.

✔Плавний анімований FAQ-акордеон для компактного відображення інформації.

✔Ефект паралаксу у фоні Hero-блоку на основі Rellax.js.

✔Легка анімація появи контенту під час скролу з anime.js.

✔Опційна святкова анімація падаючого снігу.

✔Темна/світла тема: Автоматично визначає системні налаштування та дозволяє ручне перемикання. Вибір зберігається у local storage.

✔Можливість приховати Intro: Користувач може вимкнути Hero-блок для швидшого доступу до основного контенту.

✔Розширене копіювання: Виділення будь-якого тексту з атрибутом `[data-selectable]` відкриває кастомне контекстне меню з опціями «Копіювати» або «Копіювати з підписом», а також перемикачем для додавання привітання «Hi!».

✔Форма зворотного зв’язку: Модальне вікно з формою контакту, що надсилає повідомлення безпосередньо у Telegram-чат через Telegram Bot API.

✔Калькулятор відсотків: Простий pop-up інструмент для швидких розрахунків денних та річних відсотків.

Використані технології

HTML

SCSS (BEM)

JavaScript

Структура проєкту

├── 📁 css/               # Скомпільовані CSS-файли
├── 📁 fonts/             # Кастомні іконкові шрифти
├── 📁 img/               # Фонові зображення, лого та інші ресурси
├── 📁 js/                # JavaScript-файли
│   ├── 📄 main.js        # Основна логіка застосунку, обробка подій та анімації
│   ├── 📄 plugins.js     # Зібрані та мінімізовані сторонні бібліотеки
│   ├── 📄 snowy.js       # Скрипт ефекту падаючого снігу
├── 📁 scss/              # Вихідні SCSS-файли, організовані за призначенням
│   ├── 📁 components/    # Стилі для повторно використовуваних елементів UI (кнопки, інпути тощо)
│   ├── 📁 layouts/       # Стилі для основних секцій сторінки (хедер, футер, інтро)
│   ├── 📁 utils/         # Змінні, міксіни, анімації та шрифти SCSS
│   ├── 🎨 _base.scss     # Базові стилі SCSS
│   └── 🎨 main.scss      # Головний SCSS-файл, що імпортує всі інші
└── 🌐 index.html         # Основний HTML-файл із усім контентом