nickbell.dev

My portfolio site, built as a learning platform for technologies and architectures I want to work with. It runs across Netlify, Render, Supabase, and Cloudflare Pages, with the only cost being a few cents a month for OpenAI embeddings.

What It Does

Beyond the standard blog and project showcases, the site includes an AI chatbot agent called sudo — built with Laravel AI and Gemini's free tier — that can search across all content using hybrid vector and keyword retrieval with Reciprocal Rank Fusion. A Progressive Web App and Chrome Extension let me save and annotate interesting links from my phone or desktop, with automatic OpenGraph metadata extraction.

AI CHATBOT sudo 8 tools · multi-turn Gemini · Free tier SEMANTIC SEARCH Hybrid Retrieval pgvector + keyword Reciprocal Rank Fusion CROSS-DEVICE SHARING PWA + Extension Web Share Target API Auto metadata extraction HEADLESS CMS Filament v5 Rich admin panel 24h cache · auto-invalidation

Architecture

The frontend is a React 19 SPA with TypeScript, Vite 7, and Tailwind CSS v4. The backend is a Laravel 12 API with a Filament v5 admin panel, serving multiple consumers: the React frontend, the shares PWA, the Chrome extension, and the AI agent. Supabase provides PostgreSQL with pgvector for both relational data and embedding vectors.

NETLIFY React Frontend React 19 · TS · Vite 7 · Tailwind v4 SUPABASE PostgreSQL + pgvector Relational data + 1536-dim vectors RENDER Laravel 12 API PHP 8.4 · Filament v5 · Sanctum API Hub — serves all consumers REST + SSE Eloquent + pgvector CHROME Extension GEMINI AI Agent CLOUDFLARE PAGES Shares PWA CRONJOB.ORG Cache Warming Under $1/month

Caching is aggressive (24-hour TTL on all API responses) with automatic invalidation via model events and proactive cache warming triggered by cronjob.org. The result is fast responses even on Render's free tier.

Deep Dive

For the full technical breakdown, see the four-part blog series: the architecture overview, the AI agent, the sharing ecosystem, and Filament as a headless CMS.