Professional Portfolio Platform

Comprehensive documentation for the Professional Portfolio enterprise platform. Build, deploy, and manage developer portfolios, case studies, and client showcases with zero configuration overhead.

ℹ️ Version Notice This documentation covers v2.4.0. Legacy v1.x docs are available in the archive. Breaking changes in v2.x are highlighted with v2+ tags.

⚡ Lightning Fast

Static-first architecture with edge caching. Lighthouse scores consistently above 95.

🔒 Enterprise Security

Role-based access control, SSO integration, and automated backup pipelines.

🌍 Multi-Region Deploy

Global CDN distribution with automatic failover and edge routing.

🔌 Extensible API

RESTful & GraphQL endpoints with webhook support for CI/CD integration.

Installation

Choose your preferred installation method. We recommend using the CLI for automated setup.

Using NPM

npm install @profolio/core @profolio/ui --save-dev

Using Yarn

yarn add @profolio/core @profolio/ui -D

Docker Deployment

docker pull profolio/platform:latest
docker run -d -p 3000:3000 --name profolio profolio/platform:latest

⚠️ Node.js Requirement Professional Portfolio requires Node.js v18.0.0 or higher. LTS versions are recommended for production environments.

Quick Start

Initialize a new portfolio project in under 60 seconds:

npx create-prof@latest my-portfolio

# Navigate into the project
cd my-portfolio

# Start local development server
npm run dev

The development server will start at http://localhost:3000. Open content/projects/ to edit portfolio entries.

Project Structure

Understanding the directory layout is essential for efficient customization:

my-portfolio/
├── content/          # Markdown/MDX portfolio entries
│   ├── projects/     # Individual case studies
│   └── team/         # Team member profiles
├── src/
│   ├── components/   # Reusable UI components
│   ├── layouts/      # Page templates
│   └── styles/       # Global & module CSS
├── public/           # Static assets (images, fonts)
├── profolio.config.js # Main configuration file
└── package.json

Configuration

Configure the platform via profolio.config.js at your project root.

Property	Type	Default	Description
`siteName`	string	"ProFolio"	Display name for browser tab & metadata
`baseURL`	string	"/"	Root path for deployment (e.g., "/portfolio/")
`analytics`	object	`{} disabled`	Tracking IDs for GA4, Plausible, or Umami
`theme`	string	"default"	Prebuilt theme: "default", "minimal", "dark", "neon"
`seo`	object	Auto-generated	OpenGraph, Twitter Cards, JSON-LD schema overrides

Theming System

Override CSS variables in src/styles/theme.css:

:root {
  --prof-primary: #6366f1;
  --prof-surface: #ffffff;
  --prof-text: #0f172a;
  --prof-radius: 12px;
}

Routing & Navigation

ProFolio uses file-based routing. Create a Markdown file in content/projects/ and it automatically becomes a route.

project-alpha.md → /projects/alpha
/enterprise/banking-app.md → /projects/enterprise/banking-app
Frontmatter controls meta, tags, and layout selection.

✅ Tip Use draft: true in frontmatter to exclude entries from production builds while keeping them in local dev.

Components API

Core components exposed via @profolio/ui:

import { ProjectCard, Timeline, TagFilter, ThemeToggle } from '@profolio/ui';

<ProjectCard 
  title="SaaS Dashboard" 
  tech={"React", "Node", "Postgres"}
  link="/projects/saas" 
  featured
/>

Prop	Type	Required	Description
`title`	string	Yes	Project headline
`tech`	string[]	No	Technology stack tags
`featured`	boolean	No	Highlights card in grid layout
`onClick`	function	No	Custom navigation handler

Hooks & Utilities

React hooks for dynamic portfolio behavior:

usePortfolioData() - Fetches cached project metadata
useTheme() - Returns current theme & toggle function
useAnalytics() - Tracked route changes & CTA clicks
formatDate(date) - i18n-aware date formatter

import { usePortfolioData } from '@profolio/core';

function Gallery() {
  const { projects, loading } = usePortfolioData();
  if (loading) return <Skeleton />;
  return projects.map(p => <Card key={p.slug} .../>>)
}

Webhooks & Sync

Trigger external services on content updates:

// profolio.config.js
module.exports = {
  webhooks: {
    onPublish: "https://your-api.com/webhooks/profolio",
    onDraft: false,
    headers: { "Authorization": "Bearer ${ENV_TOKEN}" }
  }
}

Payloads include action, projectSlug, timestamp, and diffSummary.

FAQ

Can I use custom domains?

Yes. Configure CNAME records in profolio.config.js or use the dashboard SSL provisioner.

Is there a free tier?

The core package is MIT licensed. Enterprise features (SSO, audit logs) require a commercial license.

How do I migrate from v1?

Run npx profolio migrate. It automatically converts legacy JSON to MDX and updates config schema.

Does it support i18n?

Yes. Enable i18n: true and use content/en/, content/es/ structure.

Troubleshooting

Common Issue: Build fails on Windows

Line ending differences can break MDX parsing. Run git config --global core.autocrlf input and reinstall dependencies.

Stale Cache

If updates aren't reflecting, clear the build cache: rm -rf .prof-build && npm run build

Still stuck? Check GitHub Issues or contact support at docs@profolio.dev.

Changelog

v2.4.0 (Current) - Oct 2025

Added MDX 3.0 support
Improved build time by 35%
New analytics dashboard integration

v2.3.1 - Aug 2025

Fixed routing regression on subpaths
Updated TypeScript types for hooks