From 3b4298f9edce7e031307cdaf6b5a7124bf097cab Mon Sep 17 00:00:00 2001 From: "MD. PARVEJ HOSSAIN" Date: Sat, 6 Dec 2025 00:35:17 +0600 Subject: [PATCH] Clean, professional documentation structure --- admin/content-management.mdx | 176 ++++++++++++++++++++++++++++ admin/overview.mdx | 130 ++++++++++++++++++++ admin/settings.mdx | 159 +++++++++++++++++++++++++ appwrite/database-setup.mdx | 145 +++++++++++++++++++++++ appwrite/overview.mdx | 80 +++++++++++++ appwrite/permissions.mdx | 133 +++++++++++++++++++++ appwrite/storage-buckets.mdx | 99 ++++++++++++++++ deployment.mdx | 95 +++++++++++++++ features/blog-system.mdx | 109 +++++++++++++++++ features/font-management.mdx | 155 ++++++++++++++++++++++++ features/project-gallery.mdx | 114 ++++++++++++++++++ features/rich-text-editor.mdx | 215 ++++++++++++++++++++++++++++++++++ features/shop-system.mdx | 176 ++++++++++++++++++++++++++++ features/shortlink-system.mdx | 149 +++++++++++++++++++++++ introduction.mdx | 59 ++++++++++ mint.json | 66 +++++++++++ quick-start.mdx | 89 ++++++++++++++ 17 files changed, 2149 insertions(+) create mode 100644 admin/content-management.mdx create mode 100644 admin/overview.mdx create mode 100644 admin/settings.mdx create mode 100644 appwrite/database-setup.mdx create mode 100644 appwrite/overview.mdx create mode 100644 appwrite/permissions.mdx create mode 100644 appwrite/storage-buckets.mdx create mode 100644 deployment.mdx create mode 100644 features/blog-system.mdx create mode 100644 features/font-management.mdx create mode 100644 features/project-gallery.mdx create mode 100644 features/rich-text-editor.mdx create mode 100644 features/shop-system.mdx create mode 100644 features/shortlink-system.mdx create mode 100644 introduction.mdx create mode 100644 mint.json create mode 100644 quick-start.mdx diff --git a/admin/content-management.mdx b/admin/content-management.mdx new file mode 100644 index 0000000..4500119 --- /dev/null +++ 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 + + + Keep content concise. Visitors scan quickly - make key information stand out. + + + + Use consistent image sizes across sections for a polished look. + + + + Preview changes on the public site before finalizing. + + + + Large images slow down your site. Optimize images before uploading. + diff --git a/admin/overview.mdx b/admin/overview.mdx new file mode 100644 index 0000000..08e0b55 --- /dev/null +++ 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 + + + Deletions are permanent. Make sure you want to remove the content. + + +## Tips + + + Use the **Featured** toggle to highlight important content on the homepage. + + + + Preview your changes by opening the public site in another tab. + diff --git a/admin/settings.mdx b/admin/settings.mdx new file mode 100644 index 0000000..64e8c36 --- /dev/null +++ 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 +``` + + + Never commit `.env` to version control. Add it to `.gitignore`. + + +## Backup Recommendations + + + Regularly export your Appwrite data as backup. Go to Appwrite Console → Database → Export. + + + + Keep a copy of your custom fonts locally in case you need to re-upload. + diff --git a/appwrite/database-setup.mdx b/appwrite/database-setup.mdx new file mode 100644 index 0000000..b6df9c7 --- /dev/null +++ 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 | diff --git a/appwrite/overview.mdx b/appwrite/overview.mdx new file mode 100644 index 0000000..672ed18 --- /dev/null +++ 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 + + + + Create a database named `portfolio_db` + + + Follow the [Database Setup](/appwrite/database-setup) guide + + + Follow the [Storage Buckets](/appwrite/storage-buckets) guide + + + Follow the [Permissions](/appwrite/permissions) guide + + + Add `localhost` and your production domain to Platforms + + + +## 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 +``` diff --git a/appwrite/permissions.mdx b/appwrite/permissions.mdx new file mode 100644 index 0000000..29574b9 --- /dev/null +++ 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 + + + + Go to **Databases** → `portfolio_db` → Select collection + + + Click the **Settings** tab + + + Under **Permissions**, click **Add Role** and set: + - Select role (Any, Users, etc.) + - Check permissions (Read, Create, Update, Delete) + + + Click **Update** to save changes + + + +## 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` | + + + Without platform configuration, your frontend cannot communicate with Appwrite (CORS errors). + diff --git a/appwrite/storage-buckets.mdx b/appwrite/storage-buckets.mdx new file mode 100644 index 0000000..d6b8dde --- /dev/null +++ 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` | + + + This bucket stores images uploaded through the rich text editor. + + +### 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) | + + + This bucket should have restricted read access - only authenticated users who own the order should access files. + + +## 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 | + + + "Any" means public read access (images can be viewed by anyone). + "Users" means only authenticated users (admins) can modify. + diff --git a/deployment.mdx b/deployment.mdx new file mode 100644 index 0000000..251cc40 --- /dev/null +++ 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 + + + Your site won't work without environment variables configured in Vercel! + + +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 + + + This is critical! Without CORS configuration, your deployed site cannot access Appwrite. + + +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 diff --git a/features/blog-system.mdx b/features/blog-system.mdx new file mode 100644 index 0000000..17d9d7e --- /dev/null +++ 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 + + + + Go to `/admin/blog-categories` and create at least one category. + + + Go to `/admin/blogs` → Click **Add Blog** + + + - **Title**: Blog post title + - **Category**: Select from dropdown + - **Description**: Short summary (shown on cards) + - **Thumbnail**: Upload main image + - **Full Description**: Use rich text editor + + + Click **Add Author** to add multiple authors with profile images. + + + - Auto-generate slug from title, or + - Enter custom slug manually + + + - Set publication date + - Toggle **Featured** for homepage display + - Click **Save** + + + +## 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: "

Introduction

...", + 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. diff --git a/features/font-management.mdx b/features/font-management.mdx new file mode 100644 index 0000000..a2f7fe5 --- /dev/null +++ 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 + + + + Go to `/admin/settings/fonts` + + + - Enter font name (e.g., "Kalpurush") + - Select `.ttf` file (max 5MB) + - Click **Upload Font** + + + Font appears in all font selectors with a purple "Custom" badge + + + +### 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'; + + +``` + +### 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 diff --git a/features/project-gallery.mdx b/features/project-gallery.mdx new file mode 100644 index 0000000..db7f4dd --- /dev/null +++ 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 + + + + Go to `/admin/project-categories` and add categories (e.g., "Web Development", "GIS", "Design"). + + + Go to `/admin/projects` → Click **Add Project** + + + - **Title**: Project name + - **Category**: Select category + - **Description**: Short summary + - **Thumbnail**: Main project image + + + Upload multiple images for the project gallery. + + + Add project details like: + - Client name + - Completion date + - Technologies used + - Project link + + + - **Custom Slug**: URL-friendly identifier + - **Use Project Prefix**: Toggle `/project/` prefix + - ON: `/project/my-project` + - OFF: `/my-project` + + + Toggle **Featured** if desired, then save. + + + +## 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: "

Overview

...", + 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 + + + Use descriptive slugs like `gis-mapping-platform` instead of `project-1` for better SEO. + + + + Keep thumbnails at 800×600px for consistent card displays. + diff --git a/features/rich-text-editor.mdx b/features/rich-text-editor.mdx new file mode 100644 index 0000000..f97f679 --- /dev/null +++ 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 + + ``` +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 + + + Use **Photo Grids** for showcasing multiple images instead of inserting them one by one. + + + + **Embed dimensions** in your code determine the display size everywhere (editor, cards, modals). + + + + Only embed content from trusted sources for security. + diff --git a/features/shop-system.mdx b/features/shop-system.mdx new file mode 100644 index 0000000..968ad1d --- /dev/null +++ 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 + + + + Go to `/admin/shop-categories` and add product categories. + + + Go to `/admin/products` → **Add Product** + + + - **Name**: Product name + - **Price**: Regular price + - **Category**: Select category + - **Tags**: Add searchable tags + + + - Toggle **On Sale** + - Enter **Discounted Price** + + + - Upload main product image + - Add gallery images (shown as thumbnails) + + + Use rich text editor for: + - **Description**: Main product details + - **Additional Info**: Specs, sizing, etc. + + + Toggle **Featured** for homepage display, then save. + + + +## 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: "

Beautiful digital art...

", + additionalInfo: "

Format: PNG, 300dpi...

" +} +``` + +### 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 | diff --git a/features/shortlink-system.mdx b/features/shortlink-system.mdx new file mode 100644 index 0000000..af1c46a --- /dev/null +++ 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 + + + + Go to `/admin/shortlinks` + + + Click **Create Shortlink** + + + Paste the long destination URL + + + - **Auto-generate**: Random short path + - **Custom**: Enter your own (e.g., `winter-sale`) + + + Upload an image for social media previews + + + Click **Create Shortlink** + + + +## 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 + + + + Go to Domain Management → **Add Domain** + Enter subdomain (e.g., `link.yourdomain.com`) + + + 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] + ``` + + + Wait 5-10 minutes for DNS propagation, then click **Verify DNS** + + + Select the custom domain when creating new shortlinks + + + +## 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 + + + Use descriptive paths like `winter-sale` instead of random strings for better memorability. + + + + Add preview images to increase click-through rates by 30-50% on social media. + + + + Shortlinks are case-insensitive. `My-Link` and `my-link` are the same. + diff --git a/introduction.mdx b/introduction.mdx new file mode 100644 index 0000000..20d76e7 --- /dev/null +++ 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 + + + + Full-featured blog with categories, multiple authors, and rich text editing + + + Showcase projects with custom URLs, galleries, and detailed descriptions + + + URL shortener with analytics, custom domains, and preview images + + + E-commerce with PayPal integration, order tracking, and secure file delivery + + + 70+ Google Fonts plus custom font uploads with Bangla support + + + Advanced editor with embeds, photo grids, tables, and full formatting + + + +## 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 diff --git a/mint.json b/mint.json new file mode 100644 index 0000000..6d2ae1c --- /dev/null +++ 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" + } +} diff --git a/quick-start.mdx b/quick-start.mdx new file mode 100644 index 0000000..ba87dad --- /dev/null +++ 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 + + + + ```bash + git clone + cd portfolio + npm install + ``` + + + + 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 + ``` + + + Get these values from your Appwrite Console after creating a project. + + + + + ```bash + npm run dev + ``` + + Open [http://localhost:5173](http://localhost:5173) in your browser. + + + +## 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 + + + + Complete database and storage configuration + + + Deploy to Vercel or other platforms + +