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.
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
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