Portfolio CMS

A modern, headless portfolio CMS built with Keystone 6, Next.js 16, Prisma 7, GraphQL, and PostgreSQL.

The project provides a flexible content management backend for a personal portfolio, with Keystone handling the CMS and GraphQL API, Prisma providing database access, and PostgreSQL serving as the primary database.

• 📝 Keystone 6 headless CMS
• ⚡ Next.js 16 and React 19
• 🟢 Node.js runtime
• 🔌 Built-in GraphQL API
• 🗄️ Prisma 7 ORM
• 🐘 PostgreSQL database
• 🔗 Prisma PostgreSQL adapter (@prisma/adapter-pg)
• 🔐 Keystone authentication
• 👤 User/session management
• 📄 Document field support
• 📊 GraphQL operation logging
• ☁️ Suitable for serverless PostgreSQL deployments
• 🧩 Schema separated from Keystone configuration
• 🔄 Headless architecture for API-first content delivery

The project's dependencies include Keystone 6 core/authentication, Prisma 7, Next.js 16, React 19, and the PostgreSQL Prisma adapter.

The application follows a headless CMS architecture:

                         ┌──────────────────────┐
                         │      Portfolio       │
                         │     Next.js App      │
                         └──────────┬───────────┘
                                    │
                                    │ GraphQL
                                    ▼
                         ┌──────────────────────┐
                         │     Keystone 6       │
                         │     Headless CMS     │
                         │                      │
                         │  Authentication      │
                         │  Sessions            │
                         │  GraphQL API         │
                         └──────────┬───────────┘
                                    │
                                    │ PrismaPg
                                    ▼
                         ┌──────────────────────┐
                         │       Prisma 7       │
                         │         ORM          │
                         └──────────┬───────────┘
                                    │
                                    ▼
                         ┌──────────────────────┐
                         │     PostgreSQL       │
                         │   Serverless DB      │
                         └──────────────────────┘

1. Content is managed through the Keystone Admin UI.
2. Keystone exposes the content through its GraphQL API.
3. GraphQL operations are handled by the Keystone backend.
4. Keystone uses Prisma for database access.
5. Prisma connects to PostgreSQL through the PrismaPg adapter.
6. The Next.js application can consume the GraphQL API to render portfolio content.

The Keystone configuration explicitly uses the PostgreSQL provider and initializes PrismaPg with the POSTGRES_URL environment variable.

The Keystone configuration separates the application into dedicated schema and authentication modules:

portfolio-cms/
├── auth.ts                 # Authentication and session configuration
├── keystone.ts             # Keystone application configuration
├── schema.ts               # Keystone lists / content schema
├── prisma/
│   └── migrations/         # Prisma database migrations
├── package.json
├── tsconfig.json
├── .env                    # Local environment variables
└── README.md

The exact project structure may contain additional Next.js components, pages, utilities, and assets.

Make sure you have:

• Node.js installed
• npm or another Node.js package manager
• A PostgreSQL database
• Git

git clone <your-repository-url>

cd <project-directory>

npm install

The project runs Keystone's post-install setup automatically through the configured postinstall script.

Create a .env file in the project root:

POSTGRES_URL="postgresql://USER:PASSWORD@HOST:DATABASE"

The Keystone configuration reads the PostgreSQL connection string from:

POSTGRES_URL

For example:

POSTGRES_URL="postgresql://postgres:password@localhost:5432/portfolio"

Important: Never commit your .env file or database credentials to Git.

This project uses PostgreSQL with Prisma 7.

The Keystone configuration specifies:

provider: postgresql

and uses:

PrismaPg

as the Prisma PostgreSQL adapter.

The project provides a dedicated migration script:

npm run migrate

This executes:

prisma migrate deploy

If required during development:

npx prisma generate

Start the Keystone development server with:

npm run dev

The project defines this as:

keystone dev

Once running, Keystone's Admin UI and GraphQL API will be available according to your Keystone configuration.

Build the application:

npm run build

The project maps this command to:

keystone build

Start the production server:

npm run start

which executes:

keystone start

Keystone provides the project's GraphQL API.

The API acts as the primary interface between the CMS data layer and consuming applications.

A typical query might look like:

query {
  projects {
    id
    title
    description
  }
}

The available queries, mutations, fields, and relationships depend on the lists defined in schema.ts.

The Keystone configuration includes an Apollo plugin that logs GraphQL operations:

graphql operation <operation-name>

It also logs errors encountered during GraphQL requests.

This can be useful during development and debugging.

Authentication is configured separately from the main Keystone configuration.

The project imports:

import { withAuth, session } from './auth.ts'

and wraps the Keystone configuration with:

withAuth(...)

while providing the configured session to Keystone. This keeps authentication and session configuration separate from the core CMS configuration.

The current development configuration contains an onConnect hook that checks whether any users exist.

If no users exist, it creates an initial administrator account:

Email:    admin@example.com
Name:     admin
Password: generated automatically

The password is generated randomly at startup and printed to the console.

The existing implementation explicitly warns that this automatic user creation is intended for development and should not be used in production.

Before deploying to production, remove or replace this initialization logic with a secure administrator provisioning process.

Keystone loads the application's content schema from:

schema.ts

The main Keystone configuration imports:

import { lists } from './schema.ts'

and passes those lists into the Keystone configuration. This means your portfolio's content models and relationships can be maintained independently from the main Keystone configuration.

For example, your schema can contain models such as:

Portfolio
├── Projects
├── Skills
├── Technologies
├── Experience
├── Education
├── Categories
└── Users

The exact models should be documented from schema.ts.

These commands are defined directly in the project's package.json.

Before deploying this CMS to production:

• Use a secure PostgreSQL connection string.
• Store secrets in environment variables.
• Never commit .env files.
• Remove the automatic development admin creation.
• Use strong administrator credentials.
• Configure appropriate Keystone access controls.
• Restrict administrative access.
• Use HTTPS in production.
• Review GraphQL permissions and mutations.
• Keep dependencies updated.
• Avoid logging sensitive information.

The architecture is suitable for deployment using modern cloud and serverless infrastructure.

                         Internet
                            │
                            ▼
                   ┌─────────────────┐
                   │   Next.js App   │
                   └────────┬────────┘
                            │
                         GraphQL
                            │
                            ▼
                   ┌─────────────────┐
                   │   Keystone 6    │
                   │   CMS + API     │
                   └────────┬────────┘
                            │
                         Prisma
                            │
                            ▼
                   ┌─────────────────┐
                   │   PostgreSQL    │
                   │   Serverless    │
                   └─────────────────┘

For production deployment:

1. Configure POSTGRES_URL.
2. Install dependencies.
3. Deploy database migrations.
4. Build Keystone.
5. Start the production server.
6. Configure authentication and access control.
7. Remove development-only admin initialization.

Example:

npm install
npm run migrate
npm run build
npm run start

        ┌───────────────────┐
        │  Keystone Admin   │
        │       UI          │
        └─────────┬─────────┘
                  │
                  ▼
        ┌───────────────────┐
        │    GraphQL API    │
        └─────────┬─────────┘
                  │
                  ▼
        ┌───────────────────┐
        │     Prisma 7      │
        └─────────┬─────────┘
                  │
                  ▼
        ┌───────────────────┐
        │    PostgreSQL     │
        └─────────┬─────────┘
                  │
                  ▼
        ┌───────────────────┐
        │    Next.js App    │
        └───────────────────┘

The separation between CMS, API, database, and frontend allows portfolio content to be consumed independently from the presentation layer.

Keystone manages content independently from the frontend.

This makes it possible to reuse the same portfolio content across:

• Web applications
• Mobile applications
• Multiple frontend applications
• Static websites
• External services
• Future applications

GraphQL allows clients to request only the fields they need and provides a structured API for interacting with CMS data.

Prisma provides a type-safe database layer between Keystone and PostgreSQL.

PostgreSQL provides a robust relational database for structured portfolio content and relationships.

• Keystone headless CMS
• GraphQL API
• PostgreSQL integration
• Prisma ORM
• Authentication
• Session management
• GraphQL error logging
• Production administrator provisioning
• Image optimization/CDN
• SEO metadata management
• Draft/publishing workflow
• Content versioning
• Automated tests
• CI/CD pipeline
• API documentation
• Monitoring and observability

Contributions, suggestions, and improvements are welcome.

git checkout -b feature/my-feature

git commit -m "Add my feature"

git push origin feature/my-feature

This project is licensed under the MIT License, unless another license is specified by the repository.

Portfolio CMS is a modern headless content management system designed to manage portfolio content through Keystone 6 and expose it through a GraphQL API.

The system combines:

Next.js + KeystoneJS + GraphQL + Prisma + PostgreSQL

to provide a flexible, API-first architecture that separates content management from content presentation.

Next.js 16
     +
KeystoneJS 6
     +
GraphQL
     +
Prisma 7
     +
PostgreSQL
     =
Modern Headless Portfolio CMS