Production-ready personal website and CMS with a commercial-style dashboard and visual editor. Built with Next.js 16 (App Router), React 19, TypeScript, Prisma, PostgreSQL, and S3-compatible storage.
- Public site pages: Home, About, Blog, Contact, and custom pages (
/page/[slug]). - Site settings (Dashboard → Content → Site settings): site name, logo, favicon, meta, navbar, footer, copyright, social links, OG image, Google Analytics. See Site settings for what each option affects.
- Dashboard management for site settings, content pages, home sections (add/remove/reorder), posts, tags, media, and analytics.
- Dashboard analytics (page views, blog view counts, CV downloads); see Environment for
ANALYTICS_SECRET/ANALYTICS_EXCLUDED_IPS. - Editor workflow with
Save Draft,Publish, undo/redo shortcuts, local recovery, and server revision history. - Shareable preview links for unpublished content.
- Scheduled publishing for custom pages.
- Media library with usage checks, cleanup analysis, and image optimization (assessment + execution).
| Layer | Technology | Notes |
|---|---|---|
| Framework | Next.js 16 | App Router, server components, dynamic OG images |
| UI | React 19 | Server + client components |
| Language | TypeScript 5 | Strict mode |
| Styling | Tailwind CSS 4 | Utility-first, @tailwindcss/typography for prose |
| Database | PostgreSQL + Prisma 5 | ORM, migrations, type-safe client |
| Auth | NextAuth.js 4 | Credentials provider, session-based |
| Deployment | Docker + Compose | Single-service app image |
| Purpose | Package |
|---|---|
| Animations | Framer Motion |
| Icons | Lucide React |
| Markdown | react-markdown, remark-gfm, rehype-pretty-code, rehype-katex |
| UI primitives | Radix UI (Slot, Tabs) |
| Drag and drop | @dnd-kit |
| State | Zustand |
| Resend or Nodemailer | |
| Object storage | AWS SDK S3 (S3-compatible API) |
| Images | Sharp (optimization, OG) |
| Testing | Jest |
| Lint / format | ESLint, eslint-config-next |
git clone https://github.com/Benedict-CS/personal-website.git personal-website
cd personal-website
cp .env.example .env
docker compose up -d --build
docker compose exec app npx prisma migrate deployThen open:
- Site:
http://localhost:3000 - Dashboard (defaults to Analytics):
http://localhost:3000/dashboard→/dashboard/analytics
Quality gate (same as CI): run npm run verify before pushing — ESLint, TypeScript, Jest, and production build. See CI/CD.
| Doc | Description |
|---|---|
| PRODUCTION_READINESS.md | Start here: verify checklist, Node 20, roadmap index |
| FEATURES.md | Platform capabilities (CMS, analytics, security, SEO, ops) |
| MIGRATION_CHECKLIST.md | Moving hosts: data, env parity, verification |
| TROUBLESHOOTING.md | Common production issues (health, analytics, previews) |
| OPERATIONS_QUICK_REFERENCE.md | One-page commands, endpoints, env, automation |
| Security policy | How to report vulnerabilities responsibly |
| GETTING_STARTED.md | First-time setup |
| ENVIRONMENT.md | Environment variables |
| ARCHITECTURE.md | System design and data flow |
| API.md | REST API reference |
| DASHBOARD_USER_GUIDE.md | Dashboard usage |
| CUSTOM_PAGES.md | Custom pages and scheduling |
| SITE_SETTINGS.md | What site settings affect (navbar, footer, meta, GA) |
| DEPLOYMENT.md, MAINTENANCE.md, RUNBOOK.md | Deploy and operations |
| OPERATIONS_AND_RELIABILITY.md | HA, health checks, scaling, migration, monitoring |
| CI_CD.md | GitHub Actions (CI/CD), local check parity |
| PHASE1_ARCHITECTURE.md | HA containers, health probes, request IDs, error recovery |
| PHASE2_CMS.md | CMS / dashboard, draft preview behavior, templates, RWD notes |
| PHASE3_OBSERVABILITY_AND_SECURITY.md | Logging, security controls, CI/CD, npm run verify |
| PHASE4_UI_AND_SEO.md | SEO (sitemap, robots, meta), light UI, RWD notes |
| PHASE1_PERSONAL_BRAND_BLOCKS.md | Personal brand blocks (hero, timeline, projects, skills, contact form) |
| Task | Command |
|---|---|
| Dev server | npm run dev |
| Build | npm run build |
| Lint + typecheck + unit tests + build (release gate) | npm run verify |
| TypeScript only | npm run typecheck |
| Tests | npm test |
| Prisma generate | npx prisma generate |
| Prisma migrate deploy | docker compose exec app npx prisma migrate deploy |