Knowledge Base 📚

View:

This repository contains a highly interactive and visually appealing personal knowledge base. It's designed as a single-page application that runs entirely in the browser, requiring no backend or build process for viewing. The project serves as a dynamic and customizable container for notes, references, and frequently asked questions, enhanced with smooth animations and user-friendly features. This project is presented in both English and Ukrainian.

Repository Demo page

Features

✔Responsive Design: A fluid layout that adapts seamlessly to desktop, tablet, and mobile screens.

✔Dynamic Hero Section: A welcoming intro section that displays a randomly selected background image and an inspirational quote on each visit.

✔Smooth, animated FAQ accordion for concisely displaying information.

✔Parallax scrolling effects on the hero background, powered by Rellax.js.

✔Subtle on-scroll reveal animations for content blocks using anime.js.

✔An optional and festive falling snow animation for visual flair.

✔Dark/Light Mode: Automatically detects system theme preferences and allows manual toggling. The user's choice is saved in local storage for persistence.

✔Hide Intro: Users can opt to hide the hero section for quicker access to the main content.

✔Advanced Copy-Paste: Selecting any `[data-selectable]` text block opens a custom context menu with options to "Copy" or "Copy with signature", and a toggle to add a "Hi!" greeting.

✔Feedback Form: A modal with a contact form that sends submissions directly to a Telegram chat via the Telegram Bot API.

✔Percentage Calculator: A simple pop-up utility for quick daily vs. yearly percentage calculations.

Technologies Used

HTML

SCSS (BEM)

JavaScript

Project Structure

├── 📁 css/               # Compiled CSS files
├── 📁 fonts/             # Custom icon fonts
├── 📁 img/               # Background images, logos, and other assets
├── 📁 js/                # JavaScript files
│   ├── 📄 main.js        # Core application logic, event handling, and animations
│   ├── 📄 plugins.js     # Bundled and minified third-party libraries
│   ├── 📄 snowy.js       # The falling snow effect script
├── 📁 scss/              # Source SCSS files organized by function
│   ├── 📁 components/    # Styles for reusable UI elements (buttons, inputs, etc.)
│   ├── 📁 layouts/       # Styles for major page sections (header, footer, intro)
│   ├── 📁 utils/         # SCSS variables, mixins, animations, and fonts
│   ├── 🎨 _base.scss     # Base SCSS styles
│   └── 🎨 main.scss      # Main SCSS file importing all others
└── 🌐 index.html         # The main HTML file