Personal Developer Portfolio Built with Next.js and Payload CMS

Overview

This portfolio is a full stack personal website designed to showcase software engineering projects, technical experience, and long form engineering articles.

Instead of hardcoding portfolio content directly into the frontend, the application uses Payload CMS as a headless content management system. This provides a structured way to manage projects, articles, pages, tags, and media while Next.js handles the public facing application.

The result is a portfolio that functions as both a developer showcase and a personal technical publishing platform.

Architecture

The application uses a decoupled content architecture:

Next.js → Payload CMS → PostgreSQL

Media is stored using S3 compatible object storage, while Next.js consumes the structured content provided by Payload CMS.

This separation allows the content layer and presentation layer to evolve independently.

Content Management

Payload CMS provides the administrative interface for managing the portfolio's content.

The CMS includes collections for:

• Projects
• Articles
• Pages
• Tags
• Media

Projects contain technical descriptions, technologies, links, and other information needed to showcase engineering work.

Articles provide a structured publishing system for technical writing, including rich text content, metadata, tags, and SEO information.

Tags allow related projects and articles to be grouped together, creating connections between different areas of technical work.

Next.js Frontend

The public website is built with Next.js and is responsible for rendering the portfolio, project pages, article pages, and other site content.

The frontend uses server side rendering and static generation capabilities where appropriate to provide fast page delivery while still allowing CMS content to be updated without rebuilding the entire site.

Content revalidation is used for pages where relatively fresh CMS data is required while maintaining the performance benefits of statically generated pages.

SEO

SEO was treated as a core part of the platform rather than an afterthought.

Each article and project can have dedicated metadata, including titles and descriptions, allowing individual pages to target specific search queries.

The application also includes structured internal linking between related articles, projects, and tags to make the content easier for both users and search engines to discover.

The site uses a sitemap and search engine friendly URLs to expose its content to search engines.

Rich Content

Technical articles are managed through Payload's rich text editor, allowing long form content to contain structured headings, code examples, links, images, and other rich content.

This makes the CMS suitable for publishing technical documentation and engineering articles rather than only simple portfolio descriptions.

Media Storage

Media assets are separated from the application database and stored using S3 compatible object storage.

Payload CMS manages the relationship between content and uploaded media while the object storage layer handles the actual files.

This provides a scalable approach to managing images and other portfolio assets.

Key Features

Headless CMS

Payload CMS provides a flexible content management layer for projects, articles, pages, tags, and media.

Dynamic Project Pages

Each project has its own dedicated page containing its description, technical details, technologies, links, and supporting content.

Technical Blog

The portfolio includes a technical publishing platform for writing about software architecture, Django, Next.js, AI, RAG, AWS, and other engineering topics.

SEO Optimized Content

Articles and projects support dedicated SEO metadata and search engine friendly URLs, allowing individual pieces of content to be discovered independently.

Content Relationships

Projects, articles, and tags can be connected to create an interconnected content structure and improve navigation across related technical topics.

Responsive Frontend

The Next.js frontend is designed to provide a responsive experience across desktop and mobile devices.

Technologies

Frontend: Next.js, React, TypeScript

CMS: Payload CMS

Database: PostgreSQL

Storage: S3 compatible object storage

Deployment: Vercel

Engineering Challenges

One of the main challenges was balancing the flexibility of a headless CMS with the performance requirements of a modern Next.js application.

CMS driven pages introduce dynamic data requirements, while portfolio and article pages benefit significantly from static generation and caching. The application therefore uses Next.js's rendering and revalidation capabilities to provide a balance between fresh CMS content and fast page delivery.

Another challenge was designing the content model so that projects, articles, tags, pages, and media could remain independently manageable while still forming a coherent content graph.

What This Project Demonstrates

This project demonstrates practical experience with:

• Building full stack applications with Next.js
• Designing headless CMS architectures
• Extending and configuring Payload CMS
• PostgreSQL database integration
• S3 compatible object storage
• Static generation and incremental revalidation
• Technical SEO
• Structured content modeling
• Rich text publishing
• Content relationships
• Modern React and TypeScript development
• Deploying production applications on Vercel