← Back to archive
Project

tncp.web.id — Personal Portfolio & KANAL Blog Platform

Period
Ongoing
Stack
Next.js · TypeScript · Payload CMS · SQLite · Docker · Turborepo · pnpm · Cloudflare Tunnel
Cover image for tncp.web.id — Personal Portfolio & KANAL Blog Platform

A single self-hosted platform serving both a personal portfolio (tncp.web.id) and the KANAL blog (blog.tncp.web.id) from one Next.js application, built and maintained end-to-end as the sole developer.

Key features

  • Embedded CMS: Payload CMS 3 runs inside the Next.js App Router process, powering the public site, the /admin panel, and REST/GraphQL APIs without a separate CMS service.
  • Bilingual content model: every content field supports Indonesian and English.
  • Secure automation boundary: an INGEST_SECRET-guarded ingest API lets an external content pipeline create draft blog posts, but publishing and deletion remain exclusively human actions through the admin panel.
  • Portfolio and blog content types: projects, work experience, and education entries with visibility/ordering controls; blog articles with categories, tags, reading time, RSS, and a sitemap.
  • Zero-downtime publishing: drafts go live instantly on publish with no rebuild or restart required.

Tech stack: Next.js (App Router), TypeScript, Payload CMS 3, SQLite (WAL mode), pnpm workspaces + Turborepo monorepo, Docker, Cloudflare Tunnel for self-hosting, GitHub Actions CI/CD (build → GHCR → docker compose pull && up -d on the VPS).

Role: designed and built the full monorepo architecture, embedded CMS integration, bilingual data model, ingest API security model, and the CI/CD deployment pipeline.

Gallery

GitHubDemo

tncp.web.id — Personal Portfolio & KANAL Blog Platform · Tionusa Catur Pamungkas