126 lines
4.5 KiB
Plaintext
126 lines
4.5 KiB
Plaintext
---
|
|
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>
|