Building a personal portfolio that is fully dynamic and self-managed without relying on third-party CMS platforms or requiring frontend redeployments for every content update. The challenge was designing and delivering an entire ecosystem from scratch, a public-facing portfolio site, a headless REST API, and a CMS dashboard as one cohesive system.
The core technical hurdles included securing admin routes with JWT while keeping public content freely accessible, handling diverse media types (images, videos) with cloud storage, and ensuring the frontend remained fast and visually polished despite fetching all content dynamically from the API.
As the sole developer, I architected and built all three layers of the system end-to-end.
Frontend
- Built a fully responsive public portfolio using Next.js 16 (App Router) and TypeScript
- Implemented search and category filtering across Portfolio and Animations pages
- Added smooth page transitions and loading states with Framer Motion and Lottie Web
- Sanitized API-fetched HTML content using DOMPurify for security
- Built a contact form with honeypot-based spam protection
Backend API
- Designed and built a Node.js/Express REST API with TypeScript and PostgreSQL
- Implemented JWT authentication to protect all write operations while keeping GET endpoints public
- Built content endpoints for projects (batch up to 10 images), artworks, animations (up to 100MB video), and categories
- Integrated Cloudflare R2 via the AWS SDK for scalable cloud media storage
- Added spam prevention on the contact endpoint: honeypot fields, rate limiting (5 req/hour), and content filtering
- Configured Nodemailer SMTP for automated email notifications on contact form submissions
CMS Dashboard
- Built a bespoke admin dashboard with Next.js 16, Tailwind CSS 4, and TypeScript
- Implemented protected routes and centralized auth state via AuthContext
- Built dedicated management modules for profile, artworks, projects, animations, and categories
- Integrated Tiptap rich text editor for detailed project descriptions and case studies
- Added client-side image compression with Compressor.js before server upload
- Included a dashboard overview with productivity charts and persistent active-state recovery
Tech Stack: Next.js 16, TypeScript, Tailwind CSS 4, Express.js, PostgreSQL, JWT, Cloudflare R2, Framer Motion, Lottie Web, Tiptap, Compressor.js, Nodemailer, DOMPurify
Delivered a complete portfolio ecosystem interconnected applications built. The result is a self-sufficient platform where all content can be managed through the CMS and reflected on the public portfolio instantly. The system is secure, performant, and built to scale with future enhancements like analytics and role-based access control.