---
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. Built for developers, designers, and creators who want full control over their online presence.

## Why This Portfolio?

<CardGroup cols={3}>
  <Card title="No Coding Required" icon="wand-magic-sparkles">
    Manage all content through an intuitive admin panel
  </Card>
  <Card title="Fully Customizable" icon="palette">
    Change fonts, colors, and layouts without touching code
  </Card>
  <Card title="Production Ready" icon="rocket">
    Optimized for performance, SEO, and accessibility
  </Card>
</CardGroup>

## Tech Stack

| Technology | Purpose | Why Chosen |
|------------|---------|------------|
| React 18 | Frontend framework | Component-based, large ecosystem |
| Vite 5 | Build tool & dev server | Lightning fast HMR, optimized builds |
| Tailwind CSS 3 | Styling | Utility-first, highly customizable |
| Appwrite | Backend, database & storage | Open-source, self-hostable, generous free tier |
| Lucide React | Icons | Consistent, lightweight, 1000+ icons |

## Key Features

<CardGroup cols={2}>
  <Card title="Blog System" icon="newspaper" href="/features/blog-system">
    Full-featured blog with categories, multiple authors, rich text editing, and SEO-friendly URLs
  </Card>
  <Card title="Project Gallery" icon="folder" href="/features/project-gallery">
    Showcase projects with custom URLs, image galleries, and detailed descriptions
  </Card>
  <Card title="Shortlink System" icon="link" href="/features/shortlink-system">
    URL shortener with click analytics, geographic tracking, and custom domain support
  </Card>
  <Card title="Shop & Orders" icon="shopping-cart" href="/features/shop-system">
    E-commerce with PayPal integration, order tracking, coupons, and secure file delivery
  </Card>
  <Card title="Font Management" icon="font" href="/features/font-management">
    70+ Google Fonts plus custom font uploads with full Bangla language support
  </Card>
  <Card title="Rich Text Editor" icon="pen" href="/features/rich-text-editor">
    Advanced editor with embeds, photo grids, tables, and complete formatting options
  </Card>
</CardGroup>

## What's Included

### Public Pages
- **Homepage** - Hero section, featured content, about preview
- **Blog** - List view, single post, category filtering
- **Projects** - Gallery view, detailed project pages
- **Shop** - Product catalog, cart, checkout
- **Contact** - Contact form with validation

### Admin Dashboard
- **Content Management** - Header, about, experience, FAQ
- **Blog Management** - Posts, categories, authors
- **Project Management** - Projects, categories, galleries
- **Shop Management** - Products, orders, coupons
- **Shortlinks** - URL shortener, analytics, custom domains
- **Settings** - Fonts, menu, social links

## Project Structure

```
portfolio/
├── src/
│   ├── components/      # Reusable UI components
│   │   ├── Header/
│   │   ├── Footer/
│   │   ├── RichTextEditor/
│   │   └── ...
│   ├── pages/
│   │   ├── Admin/       # Admin dashboard (protected)
│   │   ├── HomePage.jsx
│   │   ├── BlogPage.jsx
│   │   └── ...
│   ├── lib/             # Appwrite services
│   ├── utils/           # Helper functions
│   └── context/         # React context providers
├── public/              # Static assets
├── docs/                # Documentation
└── .env                 # Environment variables
```

## Quick Links

<CardGroup cols={2}>
  <Card title="Quick Start" icon="play" href="/quick-start">
    Get up and running in 10 minutes
  </Card>
  <Card title="Appwrite Setup" icon="database" href="/appwrite/overview">
    Configure your backend services
  </Card>
  <Card title="Deployment" icon="cloud-arrow-up" href="/deployment">
    Deploy to Vercel or other platforms
  </Card>
  <Card title="Troubleshooting" icon="wrench" href="/troubleshooting">
    Common issues and solutions
  </Card>
</CardGroup>

## Requirements

Before you begin, ensure you have:

- **Node.js 18+** - [Download](https://nodejs.org/)
- **npm or yarn** - Comes with Node.js
- **Appwrite Account** - [Sign up free](https://cloud.appwrite.io)
- **Git** - [Download](https://git-scm.com/)

<Note>
  Appwrite Cloud offers a generous free tier that's sufficient for most portfolio sites. You can also self-host Appwrite if preferred.
</Note>