FR Portfolio — Full-Stack Portfolio & CMS

The FR Portfolio is the site you're looking at right now. It's a full-stack web application serving two purposes simultaneously: a public-facing creative portfolio and a private single-user CMS — built entirely from scratch, designed to the FR brand system, and deployed on Vercel.

Why build a custom CMS

Most portfolio sites are static or rely on third-party CMS platforms that impose their own design constraints. This one doesn't. Every piece of content — projects, skills, blog posts, about information, and contact messages — is managed through a custom admin panel built specifically for this brand. No external dashboard, no off-brand UI, no compromises.

What's inside

The public site covers six sections: Hero, About, Projects, Skills, Blog, and Contact. The admin panel provides full CRUD across all content entities with form validation, image upload via Cloudinary, publish/draft toggles, and a messages inbox. Dark and light mode are supported across the entire public site via next-themes with per-section CSS custom properties.

Technical build

Built on Next.js 16.2 with the App Router and TypeScript throughout. Clerk handles authentication with a single admin user pattern — no public sign-ups. MongoDB with Mongoose manages all content. Cloudinary handles media uploads via a custom upload API route. Tailwind CSS v4 with a CSS-first config drives the styling, aligned to the FR Brand Identity Guide. Deployed on Vercel with Turbopack as the default bundler.

Design system

Every UI decision follows the FR Brand Identity Guide — Obsidian, Electric Amber, Bone White, and Deep Slate as the core palette; Barlow for display and headings; DM Sans for body copy. The admin panel is permanently dark. The public site toggles between dark and light with theme-aware CSS variables scoped per section.