The Adaptive Developer Portfolio system

What This Is 🤖

An AI-augmented portfolio website that learns from visitor behavior, classifies personas using machine learning + GPT, and dynamically adapts the entire user experience.

Motivation 🎯

Traditional portfolios fail to meet the needs of different visitor types. A recruiter wants credentials; an engineer wants architecture; a designer wants visual work. By detecting how visitors actually behave, the portfolio can present exactly what each person is looking for.

Unique Value Proposition ✨

• Persona Detection: 6 distinct visitor personas (Recruiter, Engineer, Designer, CTO, Gamer, Curious)
• Adaptive UI: Entire interface changes per persona (section order, headlines, CTAs, colors, animations)
• Privacy-First: GDPR-compliant, 7-day data retention, session-based tracking only
• AI-Powered: Hybrid ML + LLM classification for persona detection
• Notion CMS: Content synced from Notion with instant webhook revalidation

Feature Catalog ⚙️

1. Behavior Tracking & Real-Time Analysis

Captures visitor interactions (scroll, click, hover, time on page, navigation) without cookies.

Implementation: Client-side tracking logic in src/components/tracking/BehaviorTracker.tsx and an Edge runtime API at /api/track for <50ms latency. Data is stored in the PostgreSQL behavior_logs table.

2. Persona Detection Engine (K-Means + LLM)

Classifies visitors into one of 6 personas based on behavior patterns.

Implementation: Vectorization (12 dimensions) in src/lib/clustering/vectors.ts. K-Means clustering is used for a ~1ms classification, with OpenRouter LLM Fallback (2-3s) for low-confidence cases.

3. Adaptive Content Reordering

Changes section order based on detected persona.

Implementation: Section ordering logic in src/app/HomeClient.tsx using a getSectionOrder() switch statement.

Personas:

• Recruiter: ["hero", "about", "certificates", "skills", "projects", "contact"]
• Engineer: ["hero", "projects", "skills", "architecture", "about", "certificates", "contact"]
• Designer: ["hero", "projects", "case-studies", "about", "skills", "certificates", "contact"]
• CTO: ["hero", "about", "architecture", "certificates", "projects", "skills", "contact"]
• Gamer: ["hero", "projects", "skills", "about", "certificates", "contact"]
• Curious: ["hero", "about", "projects", "skills", "certificates", "contact"]

4. Notion CMS Integration

Pulls projects, case studies, architecture docs, and intake submissions from Notion.

Implementation: Notion API client and content fetchers (src/lib/notion/projects.ts, etc.). A Webhook Receiver at /api/notion/revalidate validates HMAC and triggers revalidatePath() for automatic sync via ISR (5-minute revalidation).

5. Persona-Aware AI Chatbot

Answers questions about projects, skills, experience with tone/depth adapted to the detected persona.

Implementation: Uses Groq API (Llama 3.1 8B) for 840 tokens/sec streaming, with OpenRouter as a fallback. System prompts (src/lib/ai/prompts.ts) are persona-aware.

6. Privacy-First Data Handling

GDPR-compliant behavior collection with automatic data cleanup.

Implementation: Explicit opt-in via Consent Banner. Data retention is 7 days for raw logs and 30 days for aggregated data, with automatic cleanup via a daily cron job. Only behavioral patterns are stored (session-based).

7. Admin CMS Dashboard

Authenticated interface for managing portfolio content.

Implementation: Session validation via src/middleware.ts. Pages for managing Profile, Skills, Certificates, Case Studies, Architecture, About, and Sync. Includes special features like GitHub skills auto-import.

8. Daily Behavior Aggregation Cron

Converts raw behavior logs into persona vectors, classifies visitors, and cleans up old data.

Implementation: Scheduled daily at 3am UTC via Vercel Cron. The pipeline is: Raw logs → Vectorize → K-means classify → Upsert aggregated_behaviors → Delete old logs.

Technical Implementation 🏗️

Architecture Style

Event-Driven + ML Pipeline

Visitor Behavior → Event Collection → Aggregation → Classification → Adaptation. Each layer is independently scalable and can be optimized without breaking others.

Technology Choices

Code Organization

src/
├── app/                                    # Next.js Pages & API Routes
│   ├── api/                                # Backend endpoints (Edge & Node)
│   ├── admin/                              # Admin dashboard pages
│   ├── layout.tsx                          # Root layout with providers
│   ├── page.tsx                            # Homepage (SSR)
│   └── HomeClient.tsx                      # Adaptive homepage (Client)
├── components/
│   ├── chat/                               # Chat widget UI
│   ├── notion/                             # Notion block renderer
│   ├── providers/                          # Context providers
│   ├── sections/                           # Main page sections (Hero, Projects, etc.)
│   └── tracking/                           # Behavior tracking & consent
├── hooks/
│   └── usePersona.tsx                      # Persona context + classification logic
├── lib/
│   ├── utils.ts                            # Utility helpers
│   ├── ai/                                 # Groq, OpenRouter, and prompt logic
│   ├── auth/                               # Session validation
│   ├── clustering/                         # K-means vectors & centroids
│   ├── cms/                                # CMS data fetching
│   ├── db/                                 # Drizzle ORM client & schema
│   └── notion/                             # Notion API client & content fetchers
├── types/                                  # TypeScript definitions
└── middleware.ts                           # Route protection

Repository: https://github.com/x-TheFox/portfolio