A portfolio website builder designed for costume designers and creative professionals. Build and manage a beautiful portfolio with an intuitive admin interface.
This is a single-user portfolio application built with Next.js. It provides:
- Admin Dashboard — Manage your portfolio content through a clean interface
- Theme System — Three distinct visual themes to match your style
- Image Processing — Automatic responsive image generation
- Draft/Publish Workflow — Preview changes before going live
- Mobile-First Design — Works beautifully on all devices
| Theme | Description |
|---|---|
| Modern Minimal | Clean lines, generous whitespace, understated elegance |
| Classic Elegant | Traditional typography, refined details, timeless appeal |
| Bold Editorial | High contrast, dramatic layouts, magazine-inspired |
- Framework: Next.js 16 (App Router)
- Database: PostgreSQL via Prisma
- Styling: Tailwind CSS 4
- Rich Text: Tiptap editor
- Images: Sharp.js for processing
- Storage: Local filesystem or Azure Blob Storage
- Node.js 18+
- npm or yarn
- Docker Desktop (for local PostgreSQL)
# Clone the repository
git clone https://github.com/robotdad/portfolio-builder.git
cd portfolio-builder
# Install dependencies
npm install
# Copy environment file
cp .env.example .env.local
# Start the local PostgreSQL database (required before anything else)
docker-compose up -d
# Generate Prisma client
npm run db:generate
# Create database and run migrations
npm run db:setup
# Add your email to admin allowlist (REQUIRED for login)
npm run db:seed-admin your-email@gmail.com
# Start the development server
npm run devThe app will be available at http://localhost:3000.
If you've already completed the initial setup and are returning to the project, you just need two steps:
# 1. Start the database (must be running before the dev server)
docker-compose up -d
# 2. Start the development server
npm run devThe dev server requires a running PostgreSQL instance. If you see database connection errors, check that Docker is running and the postgres container is up (docker ps).
- Navigate to
http://localhost:3000 - Sign in with Google using the email you added to the allowlist
- Create your portfolio with a name and choose a theme
- Add your first project with images
- Visit the admin dashboard at
/adminto continue building
For a fully-populated portfolio to explore:
Terminal 1 - Start server:
npm run devTerminal 2 - Populate data:
# Authenticate first (one-time, credentials are saved)
npm run auth:login # Opens browser to sign in
npm run test:populate:sarahThis creates a complete portfolio for costume designer Sarah Chen with categories, projects, and images.
portfolio/
├── src/ # Next.js application
│ ├── app/ # App Router pages and API routes
│ ├── components/ # React components
│ ├── lib/ # Utilities and helpers
│ └── prisma/ # Database schema and migrations
├── scripts/ # Utility scripts
├── test-assets/ # Test data and personas
├── docs/ # Documentation
└── .amplifier/ # Agent tooling (DTU profiles, workspace memory)
Run all commands from the project root:
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run start |
Start production server |
npm run lint |
Run ESLint |
npm run format |
Format code with Prettier |
| Command | Description |
|---|---|
npm run db:generate |
Generate Prisma client |
npm run db:setup |
Create database and run migrations (initial setup) |
npm run db:reset |
Reset local database (clear all tables) |
npm run db:seed-admin <email> |
Add an allowed admin email |
npm run db:migrate:prod |
Run migrations on production |
npm run db:reset:prod |
Reset production database |
npm run db:seed-admin:prod <email> |
Add admin email to production |
| Command | Description |
|---|---|
npm run test:e2e |
Run Playwright end-to-end tests |
npm run test:e2e:ui |
Run tests with Playwright UI |
npm run test:setup |
Setup DB + populate with Sarah Chen (requires server running) |
npm run test:populate:sarah |
Populate with Sarah Chen test persona (requires server running) |
npm run test:populate:sarah:prod |
Populate production with test persona |
Note: Population scripts make API calls to the running server. Make sure Docker is running (docker-compose up -d), start npm run dev first, then run populate scripts in a separate terminal.
| Command | Description |
|---|---|
npm run auth:login |
Authenticate for production scripts |
npm run auth:status |
Check authentication status |
npm run auth:logout |
Clear stored credentials |
Copy the example environment file:
cp .env.example .env| Variable | Description | Default |
|---|---|---|
DATABASE_URL |
PostgreSQL connection string | postgresql://postgres:postgres@localhost:5432/portfolio |
AUTH_DISABLED |
Disable authentication for local dev | false (auth enabled) |
- User Guide — How to use the admin interface and manage your portfolio
- Architecture — System design overview
- API Reference — REST API documentation
- Testing Guide — Test infrastructure, patterns, and DTU acceptance environment
- Deployment Guide — Azure Container Apps deployment
The scripts/ directory includes a population script for loading test personas:
node scripts/populate-persona-api.js <persona-name>See test-assets/README.md for available test personas and their content.
This application is designed for single-user deployment on Azure Container Apps.
Architecture:
- Azure Container Apps (container hosting, managed TLS)
- Azure Container Registry (private image storage)
- Azure Database for PostgreSQL Flexible Server (VNet-private)
- Azure Blob Storage for images
- Google OAuth for authentication
- GitHub Actions CI/CD with OIDC (no stored secrets)
Estimated cost: ~$18-25/month.
See the Deployment Guide for full instructions.
This project is not currently accepting contributions. It serves as a demonstration project and personal portfolio solution.
MIT License — see LICENSE for details.