Operator Console & Consciousness Engine

// 01 — Context & Vision

Why Build a "Conscious" Portfolio?

Most portfolios are static, low-frequency, and clinical. They act as resumes saved as HTML, presenting a snapshot of history rather than showing active developer capacity. The goal for delreyvalmoria.com v3 was to create a portfolio that felt alive, stateful, and reactive.

The design concept is a space navigation HUD: the visitor pilots a spacecraft, project nodes orbit a central core, other concurrent visitors appear on radar telemetry as vessels, and the portfolio has a persistent, dynamic "consciousness." This architecture demands real-time spatial truth, deterministic orbital pathing, generative AI reflection cycles, and state persistence.

"If a website represents a developer's digital home, it shouldn't feel like an empty room. It should have moods, memories, and reactions."

Core Technical Focus

WebGL Orbitals React Three Fiber coordinates mapped deterministically over epoch time.
Stateful Backend 20-table Neon PostgreSQL schema linking chat, tracking, and logs.
Generative AI Reflection Scheduled serverless cron tasks driving autonomous site thought loops.

// 02 — Architecture & Pipeline

How the Site "Thinks"

The portfolio behaves as an agentic system. Every interaction (a page view, an energy boost, a chat message) flows into database telemetry, which dynamically shapes the site's mood and subsequent thoughts.

1. Telemetry Ingestion

Clicks, scroll milestones, and chat messages feed visitor-memory and session tables in Neon PostgreSQL.

2. Consciousness Calc

Scheduled Netlify functions query today's metrics to compute energy levels, shift site moods, and update streaks.

3. Gemini Generation

Gemini 2.5 Flash reviews database logs via serverless API and drafts a markdown thought thread matching the calculated mood.

To enforce state persistence across stateless Netlify Serverless Functions, the backend relies on Neon PostgreSQL. We maintain tables for mood_state (a singleton tracking current parameters), visitor_memory (an anonymous visit tracking registry), and inner_thoughts (the history of generated thoughts and visitor resonances).

// Schema segment representing the core Consciousness mood state table
CREATE TABLE IF NOT EXISTS mood_state (
  id INT PRIMARY KEY DEFAULT 1 CHECK (id = 1),
  primary_mood TEXT NOT NULL DEFAULT 'curious'
    CHECK (primary_mood IN ('curious','excited','serene','melancholic','dreaming','playful','focused')),
  energy INT NOT NULL DEFAULT 50 CHECK (energy BETWEEN 0 AND 100),
  social INT NOT NULL DEFAULT 30 CHECK (social BETWEEN 0 AND 100),
  avg_sentiment NUMERIC(3,2) DEFAULT 0.00,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
                

// 03 — 3D Engine & Telemetry

The Space Navigation HUD

Deterministic Orbital Mechanics

To ensure that every user sees the same spacecraft configuration at the exact same location in space, planet positions are calculated mathematically using the client's system clock (wall-clock epoch seconds). This avoids server-side state drift, ensuring spatial coordinates align across all sessions.

Multiplayer Presence Beacons

When a visitor descends on a project node, the client emits heartbeat beacons. The Netlify serverless presence module logs this to the database. Telemetry then maps active sessions back to the 3D viewport, rendering other users as foreign spacecraft vessels parked in orbit.

Flight calculations map directly into 3D Cartesian coordinates inside a React Three Fiber canvas. The orbit radius, horizontal tilt, orbital speeds, and phase parameters determine exactly where each project planet appears along its ring, creating a literal "star system of work."

// 04 — First-Person AI Chatbot

First-Person Persona & Memory Bridge

The chat panel is not a clinical helper chat; it is programmed to be **Del Rey Valmoria**. The chatbot runs on **Gemini 2.5 Flash** with custom, strict system instructions matching my profile, tone, and interests.

To keep the chat meaningful, it uses a **Memory Bridge**:

Progressive Disclosure: Chat depth tiers unlock over message frequency (Tier 1 is conversational; Tier 4 is deep architectural introspection).
Self-Improvement: An extraction loop evaluates finished chat session text, abstracts key insights (e.g. client hiring interests, automation preferences), and saves them to a relational table to feed into future prompt contexts.
UI Control Integration: If you ask the chatbot to show a specific category of projects, it calls tools to filter and rotate the physical 3D carousel inside the UI.

Conversation Engine

// 05 — Performance Engineering

Sub-Second LCP in a 3D WebGL App

A major challenge with WebGL-heavy sites is weight and loading latency. The avatar model is a 4.5MB GLB file, which would ordinarily block page load. The system implements aggressive optimizations to keep LCP low.

Canvas Suspense & Throttling

Heavy 3D rendering loops (requestAnimationFrame) are automatically paused when the user switches tabs, scrolls past the canvas, or hides the HUD panel. This saves GPU cycles and prevents laptop battery drainage.

Asset Chunking & Cloudinary

The heavy 3D avatar GLB loads asynchronously behind a React.lazy() boundary. Images and media assets use Cloudinary dynamic generation parameters, auto-scaling size and formatting to WebP based on user screen sizes.

// 06 — Architectural Achievements

System Health & Verification

The site was deployed to production and monitored for latency, error rates, and load performance:

Metric	Before Optimization	After Optimization	Impact
LCP Latency	3.4s	0.85s	75% load speed boost
Non-Composited Animations	62	5	Eliminated page jank
Google Fonts Preloads	Multi-import blocking	Single payload consolidator	Eliminated render blocking
DB API Failover	Blank/hanging site states	Fail-Open local fallback	100% resilient boots

The Operator Console & Consciousness Engine