Clean, professional documentation structure

2025-12-06 00:35:17 +06:00 · 2025-12-06 00:35:17 +06:00 · 3b4298f9ed
commit 3b4298f9ed
17 changed files with 2149 additions and 0 deletions
--- a/admin/content-management.mdx
+++ b/admin/content-management.mdx
@ -0,0 +1,176 @@
+---
+title: "Content Management"
+description: "Managing header, about, experience, and other content sections"
+---
+
+# Content Management
+
+Manage the core content sections of your portfolio.
+
+## Header Section
+
+**URL:** `/admin/header`
+
+The header appears as the hero section on your homepage.
+
+### Fields
+
+| Field | Description |
+|-------|-------------|
+| Name | Your display name |
+| Roles | Rotating titles (e.g., "Developer", "Designer") |
+| Description | Brief introduction |
+| Profile Image | Your photo |
+| Name Font | Font for your name |
+| Roles Font | Font for rotating titles |
+| Description Font | Font for description |
+
+### Tips
+
+- Keep roles short (2-3 words each)
+- Use 3-5 rotating roles for best effect
+- Choose contrasting fonts for visual interest
+
+## About Me Section
+
+**URL:** `/admin/about`
+
+Detailed information about yourself.
+
+### Fields
+
+| Field | Description |
+|-------|-------------|
+| Vertical Name | Name displayed vertically |
+| Bio | Rich text biography |
+| Skills | List of skills/technologies |
+| Image | About section image |
+| Vertical Name Font | Font for vertical name |
+
+### Tips
+
+- Use the rich text editor for formatted bio
+- Add relevant skills that match your work
+- Keep bio concise but informative
+
+## Experience Section
+
+**URL:** `/admin/experience`
+
+Work history and professional experience.
+
+### Fields per Entry
+
+| Field | Description |
+|-------|-------------|
+| Title | Job title |
+| Company | Company/organization name |
+| Duration | Time period (e.g., "2020 - Present") |
+| Description | Role description |
+| Logo | Company logo (optional) |
+
+### Tips
+
+- List experiences in reverse chronological order
+- Focus on achievements, not just duties
+- Include relevant projects or technologies
+
+## Research Section
+
+**URL:** `/admin/research`
+
+Publications, papers, and research work.
+
+### Fields per Entry
+
+| Field | Description |
+|-------|-------------|
+| Title | Publication title |
+| Authors | Author names |
+| Journal/Conference | Where published |
+| Year | Publication year |
+| Link | URL to paper |
+| Abstract | Brief summary |
+
+## FAQ Section
+
+**URL:** `/admin/faq`
+
+Frequently asked questions.
+
+### Fields per Entry
+
+| Field | Description |
+|-------|-------------|
+| Question | The question |
+| Answer | Rich text answer |
+| Order | Display order |
+| Category | Optional grouping |
+
+### Features
+
+- Accordion-style display
+- Rich text answers (formatting, links, images)
+- Custom dividers between questions
+- Drag-and-drop reordering
+
+## Social Links
+
+**URL:** `/admin/settings/social`
+
+Social media and contact links.
+
+### Supported Platforms
+
+- GitHub
+- LinkedIn
+- Twitter/X
+- Instagram
+- Facebook
+- YouTube
+- Email
+- Website
+- Custom links
+
+### Fields per Link
+
+| Field | Description |
+|-------|-------------|
+| Platform | Social platform |
+| URL | Profile URL |
+| Icon | Auto-selected based on platform |
+| Order | Display order |
+
+## Menu Settings
+
+**URL:** `/admin/settings/menu`
+
+Configure navigation menu.
+
+### Options
+
+| Setting | Description |
+|---------|-------------|
+| Show Blog | Toggle blog in navigation |
+| Show Projects | Toggle projects in navigation |
+| Show Shop | Toggle shop in navigation |
+| Menu Items | Custom menu items |
+| Logo | Site logo |
+
+## Best Practices
+
+<Tip>
+  Keep content concise. Visitors scan quickly - make key information stand out.
+</Tip>
+
+<Tip>
+  Use consistent image sizes across sections for a polished look.
+</Tip>
+
+<Tip>
+  Preview changes on the public site before finalizing.
+</Tip>
+
+<Warning>
+  Large images slow down your site. Optimize images before uploading.
+</Warning>
--- a/admin/overview.mdx
+++ b/admin/overview.mdx
@ -0,0 +1,130 @@
+---
+title: "Admin Overview"
+description: "Admin dashboard navigation and features"
+---
+
+# Admin Panel Overview
+
+The admin panel provides complete control over your portfolio content.
+
+## Accessing Admin
+
+Navigate to `/admin` and log in with your Appwrite credentials.
+
+## Dashboard Sections
+
+### Content Management
+
+| Section | URL | Purpose |
+|---------|-----|---------|
+| Header | `/admin/header` | Homepage hero section |
+| About Me | `/admin/about` | About section content |
+| Experience | `/admin/experience` | Work experience timeline |
+| Research | `/admin/research` | Research/publications |
+| FAQ | `/admin/faq` | Frequently asked questions |
+
+### Blog
+
+| Section | URL | Purpose |
+|---------|-----|---------|
+| Blogs | `/admin/blogs` | Create and manage blog posts |
+| Categories | `/admin/blog-categories` | Blog categories |
+
+### Projects
+
+| Section | URL | Purpose |
+|---------|-----|---------|
+| Projects | `/admin/projects` | Portfolio projects |
+| Categories | `/admin/project-categories` | Project categories |
+
+### Shop
+
+| Section | URL | Purpose |
+|---------|-----|---------|
+| Products | `/admin/products` | Product catalog |
+| Categories | `/admin/shop-categories` | Product categories |
+| Orders | `/admin/orders` | Order management |
+| Coupons | `/admin/coupons` | Discount codes |
+
+### Shortlinks
+
+| Section | URL | Purpose |
+|---------|-----|---------|
+| Shortlinks | `/admin/shortlinks` | URL shortener |
+| Domains | `/admin/shortlinks/domains` | Custom domains |
+
+### Settings
+
+| Section | URL | Purpose |
+|---------|-----|---------|
+| Fonts | `/admin/settings/fonts` | Font management |
+| Menu | `/admin/settings/menu` | Navigation settings |
+| Social Links | `/admin/settings/social` | Social media links |
+
+## Navigation
+
+The admin sidebar provides quick access to all sections:
+
+```
+📊 Dashboard
+├── 📝 Content
+│   ├── Header
+│   ├── About Me
+│   ├── Experience
+│   ├── Research
+│   └── FAQ
+├── 📰 Blog
+│   ├── Posts
+│   └── Categories
+├── 📁 Projects
+│   ├── Projects
+│   └── Categories
+├── 🛒 Shop
+│   ├── Products
+│   ├── Categories
+│   ├── Orders
+│   └── Coupons
+├── 🔗 Shortlinks
+│   ├── Links
+│   └── Domains
+└── ⚙️ Settings
+    ├── Fonts
+    ├── Menu
+    └── Social
+```
+
+## Common Actions
+
+### Creating Content
+
+1. Navigate to the relevant section
+2. Click **Add New** or **Create** button
+3. Fill in the form
+4. Click **Save**
+
+### Editing Content
+
+1. Find the item in the list
+2. Click **Edit** button
+3. Make changes
+4. Click **Update**
+
+### Deleting Content
+
+1. Find the item in the list
+2. Click **Delete** button
+3. Confirm deletion
+
+<Warning>
+  Deletions are permanent. Make sure you want to remove the content.
+</Warning>
+
+## Tips
+
+<Tip>
+  Use the **Featured** toggle to highlight important content on the homepage.
+</Tip>
+
+<Tip>
+  Preview your changes by opening the public site in another tab.
+</Tip>
--- a/admin/settings.mdx
+++ b/admin/settings.mdx
@ -0,0 +1,159 @@
+---
+title: "Settings"
+description: "Configure fonts, menu, and site-wide settings"
+---
+
+# Admin Settings
+
+Configure global settings for your portfolio.
+
+## Font Management
+
+**URL:** `/admin/settings/fonts`
+
+Manage fonts used throughout your site.
+
+### Upload Custom Font
+
+1. Enter font name
+2. Select `.ttf`, `.otf`, or `.woff` file (max 5MB)
+3. Click **Upload Font**
+
+### Available Fonts
+
+- **Custom Fonts**: Uploaded fonts (purple badge)
+- **Google Fonts**: 70+ curated fonts
+- **Bangla Fonts**: 6 fonts with Bangla support (green badge)
+
+### Using Fonts
+
+Fonts appear in font selectors throughout the admin:
+- Header section (name, roles, description)
+- About section (vertical name)
+- Rich text editor
+
+See [Font Management](/features/font-management) for details.
+
+## Menu Settings
+
+**URL:** `/admin/settings/menu`
+
+Configure the navigation menu.
+
+### Toggle Sections
+
+| Setting | Effect |
+|---------|--------|
+| Show Blog | Display/hide blog in navigation |
+| Show Projects | Display/hide projects in navigation |
+| Show Shop | Display/hide shop in navigation |
+| Show Contact | Display/hide contact section |
+
+### Custom Menu Items
+
+Add custom links to the navigation:
+
+1. Click **Add Menu Item**
+2. Enter label and URL
+3. Set order
+4. Save
+
+### Logo
+
+Upload your site logo:
+- Recommended size: 200×50px
+- Formats: PNG, SVG (transparent background preferred)
+
+## Social Links
+
+**URL:** `/admin/settings/social`
+
+Manage social media links displayed in footer/header.
+
+### Add Social Link
+
+1. Click **Add Link**
+2. Select platform (GitHub, LinkedIn, Twitter, etc.)
+3. Enter profile URL
+4. Save
+
+### Supported Platforms
+
+| Platform | Icon |
+|----------|------|
+| GitHub | GitHub icon |
+| LinkedIn | LinkedIn icon |
+| Twitter/X | X icon |
+| Instagram | Instagram icon |
+| Facebook | Facebook icon |
+| YouTube | YouTube icon |
+| Email | Mail icon |
+| Website | Globe icon |
+
+### Custom Links
+
+For platforms not listed:
+1. Select "Custom"
+2. Enter label
+3. Enter URL
+4. Choose icon (optional)
+
+## Newsletter Settings
+
+**URL:** `/admin/settings/newsletter`
+
+Configure newsletter subscription.
+
+### Options
+
+| Setting | Description |
+|---------|-------------|
+| Enable | Show/hide newsletter form |
+| Provider | Email service (Mailchimp, etc.) |
+| API Key | Provider API key |
+| List ID | Subscriber list ID |
+
+## PayPal Settings
+
+For shop functionality, configure PayPal in your `.env`:
+
+```env
+VITE_PAYPAL_CLIENT_ID=your_client_id
+VITE_PAYPAL_MODE=sandbox  # or 'live'
+```
+
+Get credentials from [PayPal Developer](https://developer.paypal.com).
+
+## Environment Variables
+
+All sensitive settings should be in `.env`:
+
+```env
+# Appwrite
+VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
+VITE_APPWRITE_PROJECT_ID=your_project_id
+VITE_APPWRITE_DATABASE_ID=portfolio_db
+VITE_APPWRITE_STORAGE_ID=reactbucket
+
+# PayPal (optional)
+VITE_PAYPAL_CLIENT_ID=your_paypal_client_id
+
+# Email (optional)
+VITE_SMTP_HOST=smtp.example.com
+VITE_SMTP_USER=your_email
+VITE_SMTP_PASS=your_password
+```
+
+<Warning>
+  Never commit `.env` to version control. Add it to `.gitignore`.
+</Warning>
+
+## Backup Recommendations
+
+<Tip>
+  Regularly export your Appwrite data as backup. Go to Appwrite Console → Database → Export.
+</Tip>
+
+<Tip>
+  Keep a copy of your custom fonts locally in case you need to re-upload.
+</Tip>
--- a/appwrite/database-setup.mdx
+++ b/appwrite/database-setup.mdx
@ -0,0 +1,145 @@
+---
+title: "Database Setup"
+description: "Create collections and attributes in Appwrite"
+---
+
+# Database Collections Setup
+
+## Create Database
+
+1. Go to Appwrite Console → **Databases**
+2. Click **Create Database**
+3. Set ID: `portfolio_db`
+4. Name: `Portfolio Database`
+
+## Core Collections
+
+### blogs
+
+Main blog posts collection.
+
+| Attribute | Type | Size | Required |
+|-----------|------|------|----------|
+| `title` | String | 255 | Yes |
+| `category` | String | 100 | Yes |
+| `description` | String | 500 | Yes |
+| `thumbnailUrl` | String | 2000 | Yes |
+| `galleryUrls` | String[] | 2000 | No |
+| `likes` | Integer | - | No |
+| `featured` | Boolean | - | No |
+| `fullDescription` | String | 100000 | Yes |
+| `customSlug` | String | 255 | Yes |
+| `authorNames` | String[] | 255 | No |
+| `authorImages` | String[] | 2000 | No |
+| `publishDate` | String | 50 | Yes |
+
+**Indexes:**
+- `slug_idx` (unique) on `customSlug`
+- `category_idx` on `category`
+- `featured_idx` on `featured`
+
+### projects
+
+Portfolio projects collection.
+
+| Attribute | Type | Size | Required |
+|-----------|------|------|----------|
+| `title` | String | 255 | Yes |
+| `category` | String | 100 | Yes |
+| `description` | String | 500 | Yes |
+| `thumbnailUrl` | String | 2000 | Yes |
+| `galleryUrls` | String[] | 2000 | No |
+| `likes` | Integer | - | No |
+| `featured` | Boolean | - | No |
+| `fullDescription` | String | 100000 | Yes |
+| `customSlug` | String | 100 | Yes |
+| `useProjectPrefix` | Boolean | - | Yes |
+| `projectLink` | String | 2000 | No |
+| `projectDetails` | String[] | 500 | No |
+
+### products
+
+Shop products collection.
+
+| Attribute | Type | Size | Required |
+|-----------|------|------|----------|
+| `name` | String | 255 | Yes |
+| `price` | Float | - | Yes |
+| `discountedPrice` | Float | - | No |
+| `onSale` | Boolean | - | No |
+| `featured` | Boolean | - | No |
+| `imageUrl` | String | 2048 | No |
+| `category` | String | 255 | No |
+| `tags` | String[] | - | No |
+| `description` | String | 10000 | No |
+| `additionalInfo` | String | 10000 | No |
+| `galleryUrls` | String[] | - | No |
+
+### orders
+
+Customer orders collection.
+
+| Attribute | Type | Size | Required |
+|-----------|------|------|----------|
+| `orderId` | String | 100 | Yes |
+| `customerId` | String | 50 | Yes |
+| `customerName` | String | 200 | No |
+| `customerEmail` | String | 200 | Yes |
+| `items` | String | 10000 | Yes |
+| `subtotal` | Float | - | Yes |
+| `discount` | Float | - | No |
+| `couponCode` | String | 50 | No |
+| `total` | Float | - | Yes |
+| `status` | String | 20 | Yes |
+| `paypalOrderId` | String | 100 | No |
+
+**Status values:** `placed`, `processing`, `completed`, `cancelled`
+
+### shortlinks
+
+URL shortener collection.
+
+| Attribute | Type | Size | Required |
+|-----------|------|------|----------|
+| `customPath` | String | 100 | Yes |
+| `destinationUrl` | URL | - | Yes |
+| `previewImageUrl` | URL | - | No |
+| `title` | String | 255 | No |
+| `description` | String | 500 | No |
+| `isActive` | Boolean | - | Yes |
+| `clickCount` | Integer | - | No |
+| `createdAt` | Datetime | - | Yes |
+
+**Indexes:**
+- `customPath_idx` (unique) on `customPath`
+
+## Category Collections
+
+For `blog_categories`, `project_categories`, `shop_categories`:
+
+| Attribute | Type | Size | Required |
+|-----------|------|------|----------|
+| `name` | String | 100 | Yes |
+| `color` | String | 20 | No |
+| `order` | Integer | - | No |
+
+## Settings Collections
+
+### header_section
+
+| Attribute | Type | Size | Required |
+|-----------|------|------|----------|
+| `name` | String | 100 | Yes |
+| `roles` | String[] | 100 | No |
+| `description` | String | 1000 | No |
+| `nameFont` | String | 200 | No |
+| `rolesFont` | String | 200 | No |
+| `descriptionFont` | String | 200 | No |
+
+### custom_fonts
+
+| Attribute | Type | Size | Required |
+|-----------|------|------|----------|
+| `name` | String | 100 | Yes |
+| `fileId` | String | 100 | Yes |
+| `fileUrl` | String | 2000 | Yes |
--- a/appwrite/overview.mdx
+++ b/appwrite/overview.mdx
@ -0,0 +1,80 @@
+---
+title: "Appwrite Overview"
+description: "Backend setup with Appwrite for database and storage"
+---
+
+# Appwrite Setup Overview
+
+This portfolio uses Appwrite as the backend for:
+- **Database** - Storing all content (blogs, projects, products, settings)
+- **Storage** - Hosting images and files
+- **Authentication** - Admin login
+
+## Create Appwrite Project
+
+1. Go to [cloud.appwrite.io](https://cloud.appwrite.io)
+2. Click **Create Project**
+3. Name it (e.g., "Portfolio")
+4. Note your **Project ID**
+
+## Required Collections
+
+| Collection | Purpose |
+|------------|---------|
+| `blogs` | Blog posts |
+| `blog_categories` | Blog categories |
+| `projects` | Portfolio projects |
+| `project_categories` | Project categories |
+| `products` | Shop products |
+| `shop_categories` | Product categories |
+| `orders` | Customer orders |
+| `shortlinks` | URL shortener |
+| `shortlink_analytics` | Click tracking |
+| `shortlink_domains` | Custom domains |
+| `header_section` | Homepage header |
+| `about_me` | About section |
+| `menubar_settings` | Navigation settings |
+| `custom_fonts` | Uploaded fonts |
+
+## Required Storage Buckets
+
+| Bucket ID | Purpose |
+|-----------|---------|
+| `reactbucket` | General images |
+| `blog_images` | Blog thumbnails & content |
+| `shop-images` | Product images |
+| `editor-images` | Rich text editor uploads |
+| `shortlink-previews` | Shortlink preview images |
+| `custom-fonts` | Custom font files |
+| `order-files` | Order delivery files |
+
+## Quick Setup Checklist
+
+<Steps>
+  <Step title="Create Database">
+    Create a database named `portfolio_db`
+  </Step>
+  <Step title="Create Collections">
+    Follow the [Database Setup](/appwrite/database-setup) guide
+  </Step>
+  <Step title="Create Storage Buckets">
+    Follow the [Storage Buckets](/appwrite/storage-buckets) guide
+  </Step>
+  <Step title="Set Permissions">
+    Follow the [Permissions](/appwrite/permissions) guide
+  </Step>
+  <Step title="Add Platform">
+    Add `localhost` and your production domain to Platforms
+  </Step>
+</Steps>
+
+## Environment Variables
+
+After setup, add these to your `.env`:
+
+```env
+VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
+VITE_APPWRITE_PROJECT_ID=your_project_id
+VITE_APPWRITE_DATABASE_ID=portfolio_db
+VITE_APPWRITE_STORAGE_ID=reactbucket
+```
--- a/appwrite/permissions.mdx
+++ b/appwrite/permissions.mdx
@ -0,0 +1,133 @@
+---
+title: "Permissions"
+description: "Configure collection and bucket permissions in Appwrite"
+---
+
+# Permissions Setup
+
+## Understanding Permissions
+
+Appwrite uses role-based permissions:
+
+| Role | Description |
+|------|-------------|
+| `Any` | Anyone (including unauthenticated users) |
+| `Users` | Any authenticated user |
+| `Guests` | Unauthenticated users only |
+| `User:ID` | Specific user by ID |
+
+## Collection Permissions
+
+### Public Content (Read-Only)
+
+For collections that visitors can view but only admins can edit:
+
+**Collections:** `blogs`, `projects`, `products`, `blog_categories`, `project_categories`, `shop_categories`, `header_section`, `about_me`, `menubar_settings`
+
+| Permission | Role |
+|------------|------|
+| Read | Any |
+| Create | Users |
+| Update | Users |
+| Delete | Users |
+
+### Private Content
+
+For collections with sensitive data:
+
+**Collections:** `orders`, `shortlink_analytics`
+
+| Permission | Role |
+|------------|------|
+| Read | Users |
+| Create | Users |
+| Update | Users |
+| Delete | Users |
+
+### Admin-Only Content
+
+**Collections:** `shortlinks`, `shortlink_domains`, `custom_fonts`
+
+| Permission | Role |
+|------------|------|
+| Read | Any |
+| Create | Users |
+| Update | Users |
+| Delete | Users |
+
+## Setting Permissions in Console
+
+<Steps>
+  <Step title="Open Collection">
+    Go to **Databases** → `portfolio_db` → Select collection
+  </Step>
+  <Step title="Go to Settings">
+    Click the **Settings** tab
+  </Step>
+  <Step title="Configure Permissions">
+    Under **Permissions**, click **Add Role** and set:
+    - Select role (Any, Users, etc.)
+    - Check permissions (Read, Create, Update, Delete)
+  </Step>
+  <Step title="Save">
+    Click **Update** to save changes
+  </Step>
+</Steps>
+
+## Storage Bucket Permissions
+
+### Public Buckets (Images)
+
+For image buckets that need public viewing:
+
+| Permission | Role |
+|------------|------|
+| Read | Any |
+| Create | Users |
+| Update | Users |
+| Delete | Users |
+
+### Private Buckets
+
+For `order-files` bucket:
+
+| Permission | Role |
+|------------|------|
+| Read | Users |
+| Create | Users |
+| Update | Users |
+| Delete | Users |
+
+## Document-Level Security
+
+For orders, you may want document-level security so users can only see their own orders:
+
+1. Enable **Document Security** in collection settings
+2. When creating an order, set permissions:
+
+```javascript
+await databases.createDocument(
+  'portfolio_db',
+  'orders',
+  ID.unique(),
+  orderData,
+  [
+    Permission.read(Role.user(userId)),
+    Permission.update(Role.user(userId))
+  ]
+);
+```
+
+## Platform Configuration
+
+Don't forget to add your domains to **Settings** → **Platforms**:
+
+| Platform | Hostname |
+|----------|----------|
+| Web | `localhost` |
+| Web | `your-domain.vercel.app` |
+| Web | `yourdomain.com` |
+
+<Warning>
+  Without platform configuration, your frontend cannot communicate with Appwrite (CORS errors).
+</Warning>
--- a/appwrite/storage-buckets.mdx
+++ b/appwrite/storage-buckets.mdx
@ -0,0 +1,99 @@
+---
+title: "Storage Buckets"
+description: "Configure Appwrite storage buckets for images and files"
+---
+
+# Storage Buckets Setup
+
+## Create Buckets
+
+Go to Appwrite Console → **Storage** → **Create Bucket** for each:
+
+### reactbucket (Main Images)
+
+| Setting | Value |
+|---------|-------|
+| Bucket ID | `reactbucket` |
+| Name | Main Images |
+| Max File Size | 10 MB |
+| Allowed Extensions | `jpg, jpeg, png, gif, webp, svg` |
+| File Security | Enabled |
+
+### blog_images
+
+| Setting | Value |
+|---------|-------|
+| Bucket ID | `blog_images` |
+| Name | Blog Images |
+| Max File Size | 10 MB |
+| Allowed Extensions | `jpg, jpeg, png, gif, webp` |
+
+### shop-images
+
+| Setting | Value |
+|---------|-------|
+| Bucket ID | `shop-images` |
+| Name | Shop Images |
+| Max File Size | 10 MB |
+| Allowed Extensions | `jpg, jpeg, png, gif, webp` |
+
+### editor-images
+
+| Setting | Value |
+|---------|-------|
+| Bucket ID | `editor-images` |
+| Name | Editor Images |
+| Max File Size | 10 MB |
+| Allowed Extensions | `jpg, jpeg, png, gif, webp, svg` |
+
+<Note>
+  This bucket stores images uploaded through the rich text editor.
+</Note>
+
+### shortlink-previews
+
+| Setting | Value |
+|---------|-------|
+| Bucket ID | `shortlink-previews` |
+| Name | Shortlink Previews |
+| Max File Size | 5 MB |
+| Allowed Extensions | `jpg, jpeg, png, webp, gif` |
+
+### custom-fonts
+
+| Setting | Value |
+|---------|-------|
+| Bucket ID | `custom-fonts` |
+| Name | Custom Fonts |
+| Max File Size | 5 MB |
+| Allowed Extensions | `ttf, otf, woff, woff2` |
+
+### order-files
+
+| Setting | Value |
+|---------|-------|
+| Bucket ID | `order-files` |
+| Name | Order Delivery Files |
+| Max File Size | 50 MB |
+| Allowed Extensions | `*` (all types) |
+
+<Warning>
+  This bucket should have restricted read access - only authenticated users who own the order should access files.
+</Warning>
+
+## Bucket Permissions Summary
+
+| Bucket | Read | Create | Update | Delete |
+|--------|------|--------|--------|--------|
+| reactbucket | Any | Users | Users | Users |
+| blog_images | Any | Users | Users | Users |
+| shop-images | Any | Users | Users | Users |
+| editor-images | Any | Users | Users | Users |
+| shortlink-previews | Any | Users | Users | Users |
+| custom-fonts | Any | Users | Users | Users |
+| order-files | Users | Users | Users | Users |
+
+<Tip>
+  "Any" means public read access (images can be viewed by anyone).
+  "Users" means only authenticated users (admins) can modify.
+</Tip>
--- a/deployment.mdx
+++ b/deployment.mdx
@ -0,0 +1,95 @@
+---
+title: "Deployment"
+description: "Deploy your portfolio to Vercel"
+---
+
+# Vercel Deployment
+
+## Step 1: Push to GitHub
+
+```bash
+git add .
+git commit -m "Ready for deployment"
+git push origin main
+```
+
+## Step 2: Import to Vercel
+
+1. Go to [vercel.com/dashboard](https://vercel.com/dashboard)
+2. Click **Add New** → **Project**
+3. Import your GitHub repository
+4. Click **Deploy**
+
+## Step 3: Add Environment Variables
+
+<Warning>
+  Your site won't work without environment variables configured in Vercel!
+</Warning>
+
+1. Go to **Project Settings** → **Environment Variables**
+2. Add these variables:
+
+| Variable | Value |
+|----------|-------|
+| `VITE_APPWRITE_ENDPOINT` | `https://cloud.appwrite.io/v1` |
+| `VITE_APPWRITE_PROJECT_ID` | Your project ID |
+| `VITE_APPWRITE_DATABASE_ID` | `portfolio_db` |
+| `VITE_APPWRITE_STORAGE_ID` | `reactbucket` |
+
+3. Set for **Production**, **Preview**, and **Development**
+4. Click **Save**
+
+## Step 4: Configure CORS in Appwrite
+
+<Warning>
+  This is critical! Without CORS configuration, your deployed site cannot access Appwrite.
+</Warning>
+
+1. Go to [Appwrite Console](https://cloud.appwrite.io)
+2. Select your project → **Settings** → **Platforms**
+3. Add a **Web** platform with your Vercel domain:
+   - `https://your-project.vercel.app`
+   - `https://*.vercel.app` (for preview deployments)
+   - Your custom domain if applicable
+
+## Step 5: Redeploy
+
+After adding environment variables:
+1. Go to **Deployments** tab
+2. Click **⋯** on latest deployment
+3. Click **Redeploy**
+
+## Troubleshooting
+
+### Site shows "basic mode" or empty data
+
+**Cause:** Environment variables not set or CORS not configured.
+
+**Solution:**
+1. Check Vercel → Settings → Environment Variables
+2. Check Appwrite → Settings → Platforms
+3. Redeploy after making changes
+
+### CORS Error in Console
+
+```
+Access to XMLHttpRequest blocked by CORS policy
+```
+
+**Solution:** Add your Vercel domain to Appwrite Platforms (Step 4).
+
+### 404 on Page Refresh
+
+**Solution:** Vercel handles this automatically for Vite projects. If issues persist, add a `vercel.json`:
+
+```json
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
+}
+```
+
+## Custom Domain
+
+1. In Vercel: **Settings** → **Domains** → Add your domain
+2. Update DNS records as instructed
+3. Add the custom domain to Appwrite Platforms
--- a/features/blog-system.mdx
+++ b/features/blog-system.mdx
@ -0,0 +1,109 @@
+---
+title: "Blog System"
+description: "Full-featured blog with categories, authors, and rich content"
+---
+
+# Blog System
+
+A complete blogging platform integrated into your portfolio.
+
+## Features
+
+- Rich text editor with full formatting
+- Multiple authors per post with profile images
+- Category management with custom colors
+- Featured posts for homepage display
+- Custom URL slugs
+- Image galleries
+- Publication date scheduling
+
+## Admin URLs
+
+| Page | URL |
+|------|-----|
+| Blog Management | `/admin/blogs` |
+| Categories | `/admin/blog-categories` |
+
+## Creating a Blog Post
+
+<Steps>
+  <Step title="Create Category">
+    Go to `/admin/blog-categories` and create at least one category.
+  </Step>
+  <Step title="Add New Blog">
+    Go to `/admin/blogs` → Click **Add Blog**
+  </Step>
+  <Step title="Fill Details">
+    - **Title**: Blog post title
+    - **Category**: Select from dropdown
+    - **Description**: Short summary (shown on cards)
+    - **Thumbnail**: Upload main image
+    - **Full Description**: Use rich text editor
+  </Step>
+  <Step title="Add Authors">
+    Click **Add Author** to add multiple authors with profile images.
+  </Step>
+  <Step title="Set URL">
+    - Auto-generate slug from title, or
+    - Enter custom slug manually
+  </Step>
+  <Step title="Publish">
+    - Set publication date
+    - Toggle **Featured** for homepage display
+    - Click **Save**
+  </Step>
+</Steps>
+
+## Public URLs
+
+| Page | URL Pattern |
+|------|-------------|
+| All Blogs | `/blogs` |
+| Single Blog | `/blog/{slug}` |
+| By Category | `/blogs?category={name}` |
+
+## Database Schema
+
+### blogs Collection
+
+```javascript
+{
+  title: "Getting Started with GIS",
+  category: "Technology",
+  description: "A comprehensive guide...",
+  thumbnailUrl: "https://...",
+  fullDescription: "<h2>Introduction</h2>...",
+  customSlug: "getting-started-with-gis",
+  authorNames: ["Parvej Hossain"],
+  authorImages: ["https://..."],
+  publishDate: "2024-01-10",
+  featured: true,
+  likes: 0
+}
+```
+
+### blog_categories Collection
+
+```javascript
+{
+  name: "Technology",
+  color: "#3b82f6",
+  order: 1
+}
+```
+
+## Rich Text Features
+
+The blog editor supports:
+- Headings (H1, H2, H3)
+- Bold, italic, underline
+- Text colors and fonts
+- Bullet and numbered lists
+- Images with upload
+- Embedded videos (YouTube, Vimeo)
+- Photo grids (24 layouts)
+- Tables
+- Code blocks
+- Blockquotes
+
+See [Rich Text Editor](/features/rich-text-editor) for full documentation.
--- a/features/font-management.mdx
+++ b/features/font-management.mdx
@ -0,0 +1,155 @@
+---
+title: "Font Management"
+description: "Manage Google Fonts and custom font uploads"
+---
+
+# Font Management
+
+A comprehensive font system with 70+ Google Fonts and custom font upload support.
+
+## Features
+
+- 70+ curated Google Fonts
+- Custom font upload (.ttf, .otf, .woff)
+- Full Bangla language support
+- Live preview before applying
+- Search and filter by category
+- Reusable font selector component
+
+## Admin URL
+
+| Page | URL |
+|------|-----|
+| Font Management | `/admin/settings/fonts` |
+
+## Using Fonts
+
+### Upload Custom Font
+
+<Steps>
+  <Step title="Open Font Management">
+    Go to `/admin/settings/fonts`
+  </Step>
+  <Step title="Upload">
+    - Enter font name (e.g., "Kalpurush")
+    - Select `.ttf` file (max 5MB)
+    - Click **Upload Font**
+  </Step>
+  <Step title="Use">
+    Font appears in all font selectors with a purple "Custom" badge
+  </Step>
+</Steps>
+
+### Apply Fonts to Content
+
+1. Edit any section (Header, About Me, etc.)
+2. Find the font selector dropdown
+3. Search or browse fonts
+4. Select your font
+5. Preview updates in real-time
+6. Save changes
+
+## Available Google Fonts
+
+### Serif Fonts
+- Playfair Display
+- Merriweather
+- Lora
+- Crimson Text
+- Libre Baskerville
+- Cormorant Garamond
+
+### Sans-Serif Fonts
+- Roboto
+- Open Sans
+- Lato
+- Montserrat
+- Poppins
+- Inter
+- Nunito
+
+### Display Fonts
+- Bebas Neue
+- Oswald
+- Raleway
+- Abril Fatface
+- Righteous
+
+### Bangla Fonts
+- Noto Sans Bengali
+- Noto Serif Bengali
+- Hind Siliguri
+- Tiro Bangla
+- Mukta
+- Baloo Da 2
+
+## Font Selector Component
+
+The `FontSelector` component is reusable across admin pages:
+
+```jsx
+import FontSelector from '../components/FontSelector/FontSelector';
+
+<FontSelector
+  value={selectedFont}
+  onChange={setSelectedFont}
+  label="Title Font"
+  previewText="Preview Text"
+/>
+```
+
+### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | string | Current font value |
+| `onChange` | function | Callback when font changes |
+| `label` | string | Label text |
+| `previewText` | string | Text to show in preview |
+
+## Where Fonts Are Used
+
+| Section | Font Options |
+|---------|--------------|
+| Header | Name, Roles, Description |
+| About Me | Vertical Name |
+| Blog | Title, Content |
+| Projects | Title, Content |
+
+## Database Schema
+
+### custom_fonts Collection
+
+```javascript
+{
+  name: "Kalpurush",
+  fileId: "abc123",
+  fileUrl: "https://cloud.appwrite.io/v1/storage/..."
+}
+```
+
+## Recommended Bangla Fonts
+
+For custom Bangla fonts, download from [Ekushey Fonts](https://www.omicronlab.com/bangla-fonts.html):
+
+- Kalpurush
+- SolaimanLipi
+- Siyam Rupali
+- Nikosh
+- Akaash
+
+## Troubleshooting
+
+### Font Not Displaying
+
+1. Check file format (must be .ttf, .otf, or .woff)
+2. Verify file size < 5MB
+3. Check browser console for errors
+4. Ensure storage bucket has public read access
+
+### Bangla Text Shows Boxes
+
+The font doesn't support Bangla characters. Use:
+- Noto Sans Bengali
+- Noto Serif Bengali
+- Or upload a Bangla-compatible custom font
--- a/features/project-gallery.mdx
+++ b/features/project-gallery.mdx
@ -0,0 +1,114 @@
+---
+title: "Project Gallery"
+description: "Showcase your portfolio projects with custom URLs and galleries"
+---
+
+# Project Gallery
+
+Display your portfolio projects with rich details and custom URLs.
+
+## Features
+
+- Custom URL slugs for SEO-friendly links
+- Image galleries with lightbox
+- Category filtering
+- Featured projects for homepage
+- Rich text descriptions
+- Project details (client, date, tools, etc.)
+- External project links
+
+## Admin URLs
+
+| Page | URL |
+|------|-----|
+| Project Management | `/admin/projects` |
+| Categories | `/admin/project-categories` |
+
+## Creating a Project
+
+<Steps>
+  <Step title="Create Category">
+    Go to `/admin/project-categories` and add categories (e.g., "Web Development", "GIS", "Design").
+  </Step>
+  <Step title="Add New Project">
+    Go to `/admin/projects` → Click **Add Project**
+  </Step>
+  <Step title="Basic Info">
+    - **Title**: Project name
+    - **Category**: Select category
+    - **Description**: Short summary
+    - **Thumbnail**: Main project image
+  </Step>
+  <Step title="Gallery">
+    Upload multiple images for the project gallery.
+  </Step>
+  <Step title="Details">
+    Add project details like:
+    - Client name
+    - Completion date
+    - Technologies used
+    - Project link
+  </Step>
+  <Step title="URL Settings">
+    - **Custom Slug**: URL-friendly identifier
+    - **Use Project Prefix**: Toggle `/project/` prefix
+      - ON: `/project/my-project`
+      - OFF: `/my-project`
+  </Step>
+  <Step title="Save">
+    Toggle **Featured** if desired, then save.
+  </Step>
+</Steps>
+
+## Public URLs
+
+| Page | URL Pattern |
+|------|-------------|
+| All Projects | `/projects` |
+| Single Project | `/project/{slug}` or `/{slug}` |
+| By Category | `/projects?category={name}` |
+
+## Database Schema
+
+### projects Collection
+
+```javascript
+{
+  title: "GIS Mapping Platform",
+  category: "GIS",
+  description: "Interactive mapping solution...",
+  thumbnailUrl: "https://...",
+  galleryUrls: ["https://...", "https://..."],
+  fullDescription: "<h2>Overview</h2>...",
+  customSlug: "gis-mapping-platform",
+  useProjectPrefix: true,
+  projectLink: "https://example.com",
+  projectDetails: [
+    "Client: ABC Corp",
+    "Date: 2024",
+    "Tech: React, Leaflet"
+  ],
+  featured: true,
+  likes: 0
+}
+```
+
+## Link Management
+
+The URL system prevents collisions with:
+- Other projects
+- Blog posts
+- Static pages
+- Shortlinks
+
+When creating a custom slug, the system checks for conflicts and warns you.
+
+## Tips
+
+<Tip>
+  Use descriptive slugs like `gis-mapping-platform` instead of `project-1` for better SEO.
+</Tip>
+
+<Tip>
+  Keep thumbnails at 800×600px for consistent card displays.
+</Tip>
--- a/features/rich-text-editor.mdx
+++ b/features/rich-text-editor.mdx
@ -0,0 +1,215 @@
+---
+title: "Rich Text Editor"
+description: "Advanced content editor with embeds, photo grids, and full formatting"
+---
+
+# Rich Text Editor
+
+A powerful content editor used throughout the admin panel for blogs, projects, and products.
+
+## Text Formatting
+
+| Feature | How to Use |
+|---------|------------|
+| Bold | Select text → Click **B** or `Ctrl+B` |
+| Italic | Select text → Click **I** or `Ctrl+I` |
+| Underline | Select text → Click **U** or `Ctrl+U` |
+| Headings | Select text → Click H1, H2, or H3 |
+| Lists | Click bullet or numbered list icon |
+| Alignment | Click align left/center/right/justify |
+
+## Font & Color
+
+### Change Font
+1. Select text
+2. Click **Font** button
+3. Choose from Google Fonts or custom fonts
+4. Font applies immediately
+
+### Change Color
+1. Select text
+2. Click **Color** button
+3. Pick from palette, use color picker, or enter hex code
+4. Click **Apply**
+
+### Change Size
+1. Select text
+2. Click **Size** button
+3. Choose preset (Tiny to Huge) or enter custom size
+4. Click **Apply**
+
+## Images
+
+### Insert Image
+
+1. Click **Image** button (camera icon)
+2. Choose method:
+   - **URL**: Paste image URL
+   - **Upload**: Select file from computer
+3. Click **Insert**
+
+### Resize Image
+
+1. Click image to select (green border appears)
+2. Drag handles:
+   - **Corners**: Maintain aspect ratio
+   - **Edges**: Resize one dimension
+
+### Text Wrap
+
+1. Select image
+2. Align left or right
+3. Click **Text Wrap** button
+4. Adjust gap (0-50px)
+5. Toggle wrap ON
+
+## Embeds
+
+Embed external content like YouTube videos, Google Maps, or any iframe.
+
+### Insert Embed
+
+1. Click **Embed** button
+2. Switch to **Code View**
+3. Paste embed code:
+   ```html
+   <iframe src="https://www.youtube.com/embed/VIDEO_ID" 
+           width="560" height="315"></iframe>
+   ```
+4. Switch to **Preview** to verify
+5. Click **Insert Embed**
+
+### Customize Embed
+
+After inserting:
+- **Resize**: Drag corner/edge handles
+- **Border**: Click Border button to add/customize
+- **Align**: Use alignment buttons
+- **Edit Code**: Click Code button to modify
+
+### Supported Embeds
+
+- YouTube
+- Vimeo
+- Google Maps
+- Twitter/X
+- Instagram
+- CodePen
+- Any iframe
+
+## Photo Grids
+
+Insert beautiful image layouts with 24 pre-designed templates.
+
+### Insert Photo Grid
+
+1. Click **Grid** button (Grid3x3 icon)
+2. Browse 24 layout options
+3. Click preferred layout
+4. Add images to each cell:
+   - Click cell
+   - Choose URL or Upload
+   - Click **Add Image**
+5. Click **Insert Grid**
+
+### Layout Categories
+
+| Category | Layouts |
+|----------|---------|
+| Simple | 2-4 columns, 2x2, 3x2 grids |
+| Asymmetric | Large + small combinations |
+| Creative | Masonry, featured layouts |
+| Gallery | Portfolio-style arrangements |
+| Special | Hero + grid, collage styles |
+
+### Edit Grid
+
+1. Hover over grid in editor
+2. Click **Settings** icon to edit
+3. Click **Delete** icon to remove
+
+## Tables
+
+### Insert Table
+
+1. Click **Table** button
+2. Select dimensions (rows × columns)
+3. Table appears in editor
+
+### Edit Table
+
+- Click cells to edit content
+- Use table controls to:
+  - Add/remove rows
+  - Add/remove columns
+  - Merge cells
+  - Set alignment
+
+## Links
+
+### Link Selected Text
+
+1. Select text
+2. Click **Link** button (chain icon)
+3. Enter URL
+4. Press Enter or click **Insert**
+
+### Insert New Link
+
+1. Click **Link** button (no selection)
+2. Enter link title
+3. Enter URL
+4. Click **Insert**
+
+### Edit Link
+
+1. Click existing link
+2. Modify URL or title
+3. Click **Update** or **Remove Link**
+
+## Blockquotes
+
+### Insert Quote
+
+1. Click **Quote** button
+2. Enter quote text
+3. Customize colors:
+   - Background color
+   - Border color
+4. Click **Insert Quote**
+
+### Edit Quote
+
+1. Click existing quote
+2. Modify text or colors
+3. Click **Update Quote**
+
+## Code Blocks
+
+1. Click **Code** button
+2. Enter code
+3. Code appears with monospace formatting
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| `Ctrl+B` | Bold |
+| `Ctrl+I` | Italic |
+| `Ctrl+U` | Underline |
+| `Delete` | Delete selected image/embed |
+| `Enter` | Quick insert/update in dialogs |
+
+## Tips
+
+<Tip>
+  Use **Photo Grids** for showcasing multiple images instead of inserting them one by one.
+</Tip>
+
+<Tip>
+  **Embed dimensions** in your code determine the display size everywhere (editor, cards, modals).
+</Tip>
+
+<Warning>
+  Only embed content from trusted sources for security.
+</Warning>
--- a/features/shop-system.mdx
+++ b/features/shop-system.mdx
@ -0,0 +1,176 @@
+---
+title: "Shop System"
+description: "E-commerce with PayPal integration and order management"
+---
+
+# Shop System
+
+Full e-commerce functionality with product management, cart, and PayPal checkout.
+
+## Features
+
+- Product catalog with categories
+- Sale prices and featured products
+- Image galleries per product
+- Shopping cart (persistent)
+- PayPal checkout integration
+- Order tracking with status updates
+- Secure file delivery for digital products
+- Coupon system
+
+## Admin URLs
+
+| Page | URL |
+|------|-----|
+| Products | `/admin/products` |
+| Categories | `/admin/shop-categories` |
+| Orders | `/admin/orders` |
+| Coupons | `/admin/coupons` |
+
+## Adding Products
+
+<Steps>
+  <Step title="Create Category">
+    Go to `/admin/shop-categories` and add product categories.
+  </Step>
+  <Step title="Add Product">
+    Go to `/admin/products` → **Add Product**
+  </Step>
+  <Step title="Basic Info">
+    - **Name**: Product name
+    - **Price**: Regular price
+    - **Category**: Select category
+    - **Tags**: Add searchable tags
+  </Step>
+  <Step title="Sale Settings">
+    - Toggle **On Sale**
+    - Enter **Discounted Price**
+  </Step>
+  <Step title="Images">
+    - Upload main product image
+    - Add gallery images (shown as thumbnails)
+  </Step>
+  <Step title="Description">
+    Use rich text editor for:
+    - **Description**: Main product details
+    - **Additional Info**: Specs, sizing, etc.
+  </Step>
+  <Step title="Save">
+    Toggle **Featured** for homepage display, then save.
+  </Step>
+</Steps>
+
+## Order Management
+
+### Order Statuses
+
+| Status | Description |
+|--------|-------------|
+| `placed` | Order received |
+| `processing` | Being prepared |
+| `completed` | Delivered/fulfilled |
+| `cancelled` | Order cancelled |
+
+### Managing Orders
+
+1. Go to `/admin/orders`
+2. Click on an order to view details
+3. Update status from dropdown
+4. Add notes for each step (visible to customer)
+5. Upload delivery files for digital products
+
+### Secure File Delivery
+
+For digital products:
+1. Upload files to the order
+2. Customer receives secure, time-limited download links
+3. Links expire after 15 minutes
+4. Only the order owner can download
+
+## Customer Experience
+
+### Shopping Flow
+
+1. Browse products on `/shop`
+2. Click product to view details
+3. Add to cart
+4. View cart and adjust quantities
+5. Proceed to checkout
+6. Pay with PayPal
+7. View order status on dashboard
+
+### Customer Dashboard
+
+Customers can view their orders at `/dashboard`:
+- Order history
+- Status tracking with visual stepper
+- Download links for digital products
+- Admin notes for each step
+
+## PayPal Integration
+
+### Setup
+
+Add to your `.env`:
+
+```env
+VITE_PAYPAL_CLIENT_ID=your_paypal_client_id
+```
+
+Get your Client ID from [PayPal Developer Dashboard](https://developer.paypal.com).
+
+### Test Mode
+
+Use PayPal Sandbox for testing:
+1. Create sandbox accounts in PayPal Developer
+2. Use sandbox Client ID
+3. Test purchases with sandbox buyer account
+
+## Database Schema
+
+### products Collection
+
+```javascript
+{
+  name: "Digital Art Pack",
+  price: 29.99,
+  discountedPrice: 19.99,
+  onSale: true,
+  featured: true,
+  imageUrl: "https://...",
+  galleryUrls: ["https://...", "https://..."],
+  category: "Digital Products",
+  tags: ["art", "design", "digital"],
+  description: "<p>Beautiful digital art...</p>",
+  additionalInfo: "<p>Format: PNG, 300dpi...</p>"
+}
+```
+
+### orders Collection
+
+```javascript
+{
+  orderId: "ORD-2024-001",
+  customerId: "user123",
+  customerEmail: "customer@example.com",
+  items: "[{\"name\":\"Digital Art Pack\",\"price\":19.99,\"qty\":1}]",
+  subtotal: 19.99,
+  discount: 0,
+  total: 19.99,
+  status: "completed",
+  paypalOrderId: "PAY-123..."
+}
+```
+
+## Coupon System
+
+Create discount coupons at `/admin/coupons`:
+
+| Field | Description |
+|-------|-------------|
+| Code | Coupon code (e.g., `SAVE20`) |
+| Type | Percentage or fixed amount |
+| Value | Discount value |
+| Min Purchase | Minimum order amount |
+| Expiry | Expiration date |
+| Usage Limit | Max uses |
--- a/features/shortlink-system.mdx
+++ b/features/shortlink-system.mdx
@ -0,0 +1,149 @@
+---
+title: "Shortlink System"
+description: "URL shortener with analytics and custom domains"
+---
+
+# Shortlink System
+
+A comprehensive URL shortening solution with analytics and custom domain support.
+
+## Features
+
+- Create short URLs from long URLs
+- Custom paths (e.g., `yoursite.com/my-link`)
+- Preview images for social media
+- Click analytics (countries, devices, referrers)
+- Custom domain support
+- Collision detection with existing routes
+
+## Admin URL
+
+| Page | URL |
+|------|-----|
+| Shortlink Management | `/admin/shortlinks` |
+| Domain Management | `/admin/shortlinks/domains` |
+
+## Creating a Shortlink
+
+<Steps>
+  <Step title="Open Shortlinks">
+    Go to `/admin/shortlinks`
+  </Step>
+  <Step title="Click Create">
+    Click **Create Shortlink**
+  </Step>
+  <Step title="Enter URL">
+    Paste the long destination URL
+  </Step>
+  <Step title="Choose Path">
+    - **Auto-generate**: Random short path
+    - **Custom**: Enter your own (e.g., `winter-sale`)
+  </Step>
+  <Step title="Optional: Preview Image">
+    Upload an image for social media previews
+  </Step>
+  <Step title="Create">
+    Click **Create Shortlink**
+  </Step>
+</Steps>
+
+## Analytics
+
+Click the analytics icon on any shortlink to view:
+
+| Metric | Description |
+|--------|-------------|
+| Total Clicks | Overall click count |
+| Countries | Geographic distribution |
+| Devices | Desktop, mobile, tablet breakdown |
+| Referrers | Where clicks came from |
+| Browsers | Browser usage stats |
+
+Export analytics to CSV for further analysis.
+
+## Custom Domains
+
+### Setup Steps
+
+<Steps>
+  <Step title="Add Domain">
+    Go to Domain Management → **Add Domain**
+    Enter subdomain (e.g., `link.yourdomain.com`)
+  </Step>
+  <Step title="Configure DNS">
+    Add these records in your DNS provider:
+    
+    **CNAME Record:**
+    ```
+    Name: link
+    Value: yourdomain.com
+    ```
+    
+    **TXT Record (for verification):**
+    ```
+    Name: _shortlink-verify.link
+    Value: [verification token shown in dashboard]
+    ```
+  </Step>
+  <Step title="Verify">
+    Wait 5-10 minutes for DNS propagation, then click **Verify DNS**
+  </Step>
+  <Step title="Use">
+    Select the custom domain when creating new shortlinks
+  </Step>
+</Steps>
+
+## Database Schema
+
+### shortlinks Collection
+
+```javascript
+{
+  customPath: "winter-sale",
+  destinationUrl: "https://example.com/products?utm_source=...",
+  previewImageUrl: "https://...",
+  title: "Winter Sale 2024",
+  description: "50% off all items",
+  isActive: true,
+  clickCount: 150,
+  createdAt: "2024-01-01T00:00:00Z"
+}
+```
+
+### shortlink_analytics Collection
+
+```javascript
+{
+  shortlinkId: "abc123",
+  timestamp: "2024-01-15T10:30:00Z",
+  country: "US",
+  countryName: "United States",
+  deviceType: "mobile",
+  browser: "Chrome",
+  referrer: "https://twitter.com"
+}
+```
+
+## Collision Detection
+
+The system automatically checks if your custom path conflicts with:
+- Existing blog posts
+- Project pages
+- Static routes
+- Other shortlinks
+
+A warning appears if a collision is detected.
+
+## Best Practices
+
+<Tip>
+  Use descriptive paths like `winter-sale` instead of random strings for better memorability.
+</Tip>
+
+<Tip>
+  Add preview images to increase click-through rates by 30-50% on social media.
+</Tip>
+
+<Warning>
+  Shortlinks are case-insensitive. `My-Link` and `my-link` are the same.
+</Warning>
--- a/introduction.mdx
+++ b/introduction.mdx
@ -0,0 +1,59 @@
+---
+title: "Introduction"
+description: "A modern portfolio website built with React, Vite, Tailwind CSS, and Appwrite"
+---
+
+# Portfolio Website
+
+A comprehensive, feature-rich portfolio website with an admin dashboard for complete content management.
+
+## Tech Stack
+
+| Technology | Purpose |
+|------------|---------|
+| React 18 | Frontend framework |
+| Vite 5 | Build tool & dev server |
+| Tailwind CSS 3 | Styling |
+| Appwrite | Backend, database & storage |
+| Lucide React | Icons |
+
+## Key Features
+
+<CardGroup cols={2}>
+  <Card title="Blog System" icon="newspaper">
+    Full-featured blog with categories, multiple authors, and rich text editing
+  </Card>
+  <Card title="Project Gallery" icon="folder">
+    Showcase projects with custom URLs, galleries, and detailed descriptions
+  </Card>
+  <Card title="Shortlink System" icon="link">
+    URL shortener with analytics, custom domains, and preview images
+  </Card>
+  <Card title="Shop & Orders" icon="shopping-cart">
+    E-commerce with PayPal integration, order tracking, and secure file delivery
+  </Card>
+  <Card title="Font Management" icon="font">
+    70+ Google Fonts plus custom font uploads with Bangla support
+  </Card>
+  <Card title="Rich Text Editor" icon="pen">
+    Advanced editor with embeds, photo grids, tables, and full formatting
+  </Card>
+</CardGroup>
+
+## Project Structure
+
+```
+src/
+├── components/          # Reusable UI components
+├── pages/
+│   ├── Admin/          # Admin dashboard pages
+│   └── ...             # Public pages
+├── lib/                # Appwrite services & utilities
+└── utils/              # Helper functions
+```
+
+## Quick Links
+
+- [Quick Start Guide](/quick-start) - Get up and running in 10 minutes
+- [Appwrite Setup](/appwrite/overview) - Configure your backend
+- [Deployment Guide](/deployment) - Deploy to Vercel
--- a/mint.json
+++ b/mint.json
@ -0,0 +1,66 @@
+{
+  "$schema": "https://mintlify.com/schema.json",
+  "name": "Portfolio Documentation",
+  "logo": {
+    "dark": "/logo/dark.svg",
+    "light": "/logo/light.svg"
+  },
+  "favicon": "/favicon.svg",
+  "colors": {
+    "primary": "#1E8479",
+    "light": "#07C983",
+    "dark": "#105652",
+    "anchors": {
+      "from": "#1E8479",
+      "to": "#07C983"
+    }
+  },
+  "topbarCtaButton": {
+    "name": "Live Demo",
+    "url": "https://portfolioofparvej.mintlify.app"
+  },
+  "anchors": [
+    {
+      "name": "GitHub",
+      "icon": "github",
+      "url": "https://github.com/iu-parvej"
+    }
+  ],
+  "navigation": [
+    {
+      "group": "Getting Started",
+      "pages": ["introduction", "quick-start", "deployment"]
+    },
+    {
+      "group": "Appwrite Setup",
+      "pages": [
+        "appwrite/overview",
+        "appwrite/database-setup",
+        "appwrite/storage-buckets",
+        "appwrite/permissions"
+      ]
+    },
+    {
+      "group": "Features",
+      "pages": [
+        "features/blog-system",
+        "features/project-gallery",
+        "features/shortlink-system",
+        "features/shop-system",
+        "features/font-management",
+        "features/rich-text-editor"
+      ]
+    },
+    {
+      "group": "Admin Panel",
+      "pages": [
+        "admin/overview",
+        "admin/content-management",
+        "admin/settings"
+      ]
+    }
+  ],
+  "footerSocials": {
+    "github": "https://github.com/iu-parvej"
+  }
+}
--- a/quick-start.mdx
+++ b/quick-start.mdx
@ -0,0 +1,89 @@
+---
+title: "Quick Start"
+description: "Get your portfolio website running in 10 minutes"
+---
+
+# Quick Start Guide
+
+## Prerequisites
+
+- Node.js 18+ installed
+- Appwrite account ([cloud.appwrite.io](https://cloud.appwrite.io))
+- Git installed
+
+## Installation
+
+<Steps>
+  <Step title="Clone & Install">
+    ```bash
+    git clone <your-repo-url>
+    cd portfolio
+    npm install
+    ```
+  </Step>
+  
+  <Step title="Configure Environment">
+    Create a `.env` file in the root directory:
+    
+    ```env
+    VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
+    VITE_APPWRITE_PROJECT_ID=your_project_id
+    VITE_APPWRITE_DATABASE_ID=portfolio_db
+    VITE_APPWRITE_STORAGE_ID=reactbucket
+    ```
+    
+    <Note>
+      Get these values from your Appwrite Console after creating a project.
+    </Note>
+  </Step>
+  
+  <Step title="Start Development Server">
+    ```bash
+    npm run dev
+    ```
+    
+    Open [http://localhost:5173](http://localhost:5173) in your browser.
+  </Step>
+</Steps>
+
+## First-Time Setup
+
+### 1. Create Admin Account
+
+1. Go to `/admin` in your browser
+2. Sign up with your email
+3. Verify your email in Appwrite Console
+
+### 2. Set Up Database
+
+Follow the [Appwrite Setup Guide](/appwrite/overview) to create:
+- Required collections (blogs, projects, products, etc.)
+- Storage buckets for images
+- Proper permissions
+
+### 3. Add Your First Content
+
+| Section | Admin URL | What to Add |
+|---------|-----------|-------------|
+| Header | `/admin/header` | Name, roles, description |
+| About | `/admin/about` | Bio, skills, experience |
+| Projects | `/admin/projects` | Portfolio projects |
+| Blog | `/admin/blogs` | Blog posts |
+
+## Build for Production
+
+```bash
+npm run build
+npm run preview  # Test production build locally
+```
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="Appwrite Setup" icon="database" href="/appwrite/overview">
+    Complete database and storage configuration
+  </Card>
+  <Card title="Deployment" icon="rocket" href="/deployment">
+    Deploy to Vercel or other platforms
+  </Card>
+</CardGroup>