Back to projects
webFeatured

Portfolio CMS — Full Stack Developer Portfolio Platform

A production-grade portfolio platform with a full CMS backend, 100 section designs across 3 themes, Cloudflare R2 storage, analytics, and a resume generator — built entirely from scratch.

View Live
Portfolio CMS — Full Stack Developer Portfolio Platform

Overview

This is the platform you're looking at right now. Built from scratch as a full-stack portfolio CMS — not a static site, but a living system with a complete admin panel, dynamic content management, and a design system with 100 interchangeable section layouts.

The Problem

Most developer portfolios are either static files that require code changes to update, or they rely on third-party CMS platforms that add unnecessary complexity and cost. I wanted full ownership — a system I could update from a browser, deploy on my own infrastructure, and extend without limits.

What I Built

Admin CMS

A complete content management system at /admin covering every section of the portfolio. Projects, blog posts, skills, experience, services, testimonials, and site settings are all managed through a clean admin interface with real-time feedback.

  • Experience manager with drag-to-reorder, published toggle, and sort order control

  • Rich text editor (Tiptap v3) for blog posts and project content

  • Image upload with automatic WebP conversion via sharp — stored on Cloudflare R2

  • Accent color picker with 8 presets + custom hex — stored in DB, injected as CSS variable

  • Resume module: summary, education, certifications, PDF upload or auto-generation

Design System — 100 Section Variants

Every section of the portfolio has 10 interchangeable designs grouped into 3 themes:

  • Dark Pro (1–5): Sharp, minimal, developer-focused with electric accent

  • Glassmorphism (6–8): Frosted glass cards, blur effects, gradient borders

  • Brutalist (9–10): Bold typography, raw borders, high contrast editorial style

A live preview panel at /admin/preview lets you browse all variants with real data, then apply them with one click. A theme selector applies all sections at once; individual dropdowns allow per-section overrides. Changes reflect on the public site on next page load — no rebuild required.

Analytics

Privacy-respecting visitor analytics built without any third-party tools. Every page view is tracked with IP hashing (SHA-256 + secret salt — irreversible), geolocation via offline geoip-lite, device and browser detection, and bot filtering. The admin dashboard shows total views, unique visitors, top pages, countries, devices, and browsers.

Resume Module

A complete resume management system. Fill in summary, education entries, and certifications through the admin panel. Either upload a custom PDF or click "Generate PDF" to auto-generate an ATS-friendly single-column PDF from your live portfolio data (skills, experience, featured projects) using @react-pdf/renderer server-side. The generated PDF is uploaded to Cloudflare R2 and served from there. A publish toggle gates the public /resume page.

Infrastructure

Deployed on a self-hosted Coolify instance using Docker multi-stage builds. The entrypoint script runs Prisma migrations and seeds the admin user automatically on every container startup — zero manual steps after deploy. All file storage (images, PDFs) goes to Cloudflare R2 with zero egress fees.

Technical Highlights

  • Next.js 16 App Router with all async APIs (cookies(), headers(), params)

  • Prisma 7 with custom output path and @prisma/adapter-pg for direct PostgreSQL connection

  • JWT authentication via jose in httpOnly cookies — no sessions, no external auth service

  • Rate limiting on login endpoint (in-memory, 5 attempts per 15 minutes)

  • All images converted to WebP on upload (max 1920px, 85% quality) before R2 upload

  • IP hashing with SHA-256 + JWT_SECRET salt — raw IPs never stored

  • Server-side PDF generation with @react-pdf/renderer — no client-side PDF libraries

  • 100 React components across 10 sections × 10 variants, all receiving real DB data

  • Zod v4 validation on every API route, both client and server side

  • Git branching discipline — feature branches, never direct commits to deployment branch

Key Decisions

Why self-hosted over Vercel? Full control over infrastructure, no cold starts, no function timeout limits for PDF generation, and no per-seat pricing for the CMS.

Why Cloudflare R2 over S3? Zero egress fees. Images and PDFs are served directly from R2's CDN with no bandwidth cost.

Why 100 section variants? The portfolio itself demonstrates the ability to build scalable, configurable UI systems — the variant architecture is a feature, not just aesthetics.