[DOC] make the documentation available on github io

Author: ExtraBinoss

.github/workflows/docs.yml

@@ -0,0 +1,36 @@
+name: Deploy Documentation
+
+on:
+  push:
+    branches:
+      - main
+      - master
+
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    # Only run this job if the commit message contains [DOC]
+    if: contains(github.event.head_commit.message, '[DOC]')
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Configure Git Credentials
+        run: |
+          git config user.name github-actions[bot]
+          git config user.email 41898282+github-actions[bot]@users.noreply.github.com
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: 3.x
+
+      - name: Install MkDocs and Material Theme
+        run: |
+          pip install mkdocs-material
+
+      - name: Deploy to GitHub Pages
+        run: |
+          mkdocs gh-deploy --force

TODO.md

@@ -1,7 +1,5 @@
 TODO : 
 - Remove bad readme
-- Make a small documentation using github.io if possible
+- [x] Make a small documentation using github.io if possible
 - Make small gif of what it does
-- Make install process easier and simpler
-- Have little [I] tooltips for each option to explain briefly what it does
 - Remove all the hardcoded strings

docs/index.md

@@ -0,0 +1,20 @@
+# Welcome to BlobTrack
+
+**BlobTrack** is a computer vision tool designed to create generative visuals from video content. By leveraging the power of OpenCV, it extracts organic shapes and movements from source videos, allowing for real-time manipulation and high-quality export for VJ loops, motion graphics, and creative coding projects.
+
+![BlobTrack Interface]([Insert image of the main application window running here])
+
+---
+
+## 🚀 Key Features
+
+*   **Advanced Detection**: Isolate subjects using Edge Detection, Thresholding, or Color Ranges.
+*   **Dynamic Visuals**: Apply real-time effects like rainbow cycling, breathing colors, and shape smoothing.
+*   **Real-Time Preview**: What you see is what you get. Tweak parameters instantly.
+*   **High-Quality Export**: Render your generative art to MP4 files.
+
+## 🏁 Getting Started
+
+If you are new to BlobTrack, we recommend starting with the **[Installation](installation.md)** guide to get the software running on your machine.
+
+Once installed, check out the **[User Guide](usage.md)** to learn how to create your first visual.

docs/installation.md

@@ -0,0 +1,77 @@
+# Installation
+
+BlobTrack is built with Python 3.8+ and uses standard libraries like OpenCV and PyQt6. We provide an automated installer for convenience, but manual installation is also fully supported.
+
+## Prerequisites
+
+Before installing, ensure you have **Python 3.8** or newer installed on your system.
+You can download it from [python.org](https://www.python.org/downloads/).
+
+---
+
+## Automatic Installation (Recommended)
+
+We provide a shell script that automates the setup process, including creating a virtual environment and installing dependencies.
+
+**For Windows (Git Bash), macOS, and Linux:**
+
+1.  Open your terminal in the `BlobTrackCv` project directory.
+2.  Run the install script:
+
+    ```bash
+    ./install.sh
+    ```
+
+3.  Once the script completes, you are ready to run the app!
+
+---
+
+## Manual Installation
+
+If you prefer to configure the environment yourself, follow these steps:
+
+### 1. Create a Virtual Environment
+
+It is good practice to run Python applications in isolation.
+
+```bash
+python -m venv venv
+```
+
+### 2. Activate the Environment
+
+*   **Windows (Command Prompt / PowerShell):**
+    ```powershell
+    .\venv\Scripts\activate
+    ```
+
+*   **Windows (Git Bash):**
+    ```bash
+    source venv/Scripts/activate
+    ```
+
+*   **macOS / Linux:**
+    ```bash
+    source venv/bin/activate
+    ```
+
+### 3. Install Dependencies
+
+Install the required packages from `requirements.txt`:
+
+```bash
+pip install -r requirements.txt
+```
+
+---
+
+## Running the Application
+
+After installation, you can launch BlobTrack with:
+
+```bash
+python main.py
+```
+
+!!! tip
+    Make sure your virtual environment is activated before running the command! You should see `(venv)` in your terminal prompt.

docs/usage.md

@@ -0,0 +1,71 @@
+# User Guide
+
+This guide will walk you through the entire workflow of creating visuals with BlobTrack.
+
+## 1. The Interface
+
+The BlobTrack interface is divided into two main areas: the **Preview Window** on the left and the **Control Panel** on the right.
+
+![Interface Overview]([Insert image of the full interface here])
+
+## 2. Loading a Video
+
+To start, you need a source video file. Ideally, choose footage with good contrast between the subject and background for the best tracking results.
+
+1.  Click the **Select Video File** button at the top of the Control Panel.
+2.  Navigate to your video file (MP4, AVI, MOV, etc.) and open it.
+3.  The video will begin playing in loop mode automatically.
+
+---
+
+## 3. Detection Settings
+
+The **Detection** tab controls *what* part of the video is turned into blobs.
+
+![Detection Tab]([Insert image of the Detection tab controls here])
+
+### Detection Modes
+Select one of the following modes from the dropdown:
+
+*   **Threshold**: Uses brightness differences. Good for silhouettes.
+*   **Canny (Edges)**: Detects outlines and edges. Creates wireframe-like effects.
+*   **Color**: Isolates a specific color range.
+
+### Refining the Detection
+*   **Blur**: Smooths out video noise before detection. Increase this if your blobs are too jittery.
+*   **Min Area**: Removes small specks or noise.
+*   **Max Area**: Ignores blobs that are too large (e.g., the entire screen).
+*   **Threshold / Canny Controls**: Adjust these sliders to fine-tune the sensitivity of the detection.
+
+---
+
+## 4. Visual Styles
+
+The **Visuals** tab controls *how* the detected blobs look.
+
+![Visuals Tab]([Insert image of the Visuals tab controls here])
+
+### Shape & Outline
+*   **Fill Shapes**: Toggles whether blobs are solid or just outlines.
+*   **Smooth Mesh**: Applies smoothing to the blob contours for a more organic look.
+*   **Outline Width**: Controls the thickness of the blob borders.
+
+### Color Effects
+*   **Solid Color**: Uses a single static color (pickable via the color wheel).
+*   **Rainbow Cycle**: Automatically cycles through colors over time.
+*   **Breath**: Pulse a single color's brightness up and down.
+*   **Speed**: Controls how fast the Rainbow or Breath effects animate.
+
+---
+
+## 5. Exporting Your Work
+
+Once you are happy with your visual:
+
+1.  Click the **Export Processed Video** button.
+2.  Choose a destination for your file.
+3.  The app will process the video frame-by-frame.
+    *   *Note: This might be slower than real-time playback depending on your settings.*
+4.  Once finished, you will have a high-quality video file of your creation!
+
+![Export Dialog]([Insert image of the export progress or button here])

mkdocs.yml

@@ -0,0 +1,45 @@
+site_name: BlobTrack Documentation
+site_description: User documentation for BlobTrack - Real-time organic video visuals.
+site_author: BlobTrack Team
+
+theme:
+  name: material
+  features:
+    - navigation.tabs
+    - navigation.sections
+    - navigation.expand
+    - navigation.top
+    - toc.follow
+    - content.code.copy
+  palette:
+    - scheme: default
+      primary: indigo
+      accent: purple
+      toggle:
+        icon: material/brightness-7
+        name: Switch to dark mode
+    - scheme: slate
+      primary: indigo
+      accent: purple
+      toggle:
+        icon: material/brightness-4
+        name: Switch to light mode
+
+nav:
+  - Home: index.md
+  - Installation: installation.md
+  - User Guide: usage.md
+
+markdown_extensions:
+  - admonition
+  - pymdownx.details
+  - pymdownx.superfences
+  - pymdownx.highlight:
+      anchor_linenums: true
+  - pymdownx.inlinehilite
+  - pymdownx.snippets
+  - pymdownx.tasklist:
+      custom_checkbox: true
+
+plugins:
+  - search