Details
ai / shipped
About this portfolio
I built this site so you can explore my work through diagrams, questions, narrated tours, and voice. The same Supabase content drives the pages, guide, navigation, citations, search, and tour targets.
Live 3D architecture
Use the navigator to move between diagrams and related work, then scroll for more details.
Typed Supabase records feed pages, navigation, guide context, citations, and search through the active revision.
Why I built it this way
The portfolio uses one content source for pages, diagrams, guide answers, tours, and voice.
Interactive by design
I wanted the portfolio to do more than route visitors through project cards. A visitor can read a case study, ask the guide a question, jump into the exact graph tab, follow a narrated tour, or use voice. Those paths need to describe the same current work.
One content source
I publish the Supabase records as a versioned JSON snapshot and select one active revision. Pages, the guide manifest, graph navigation, citations, retrieval, and tours read from that revision, so a project title or diagram label changes in one place before those paths use it.
Data model and retrieval
Supabase stores typed content records and the assistant indexes eligible current content.
Project blocks and graph keys
Supabase stores entities, project content blocks, article Markdown, scene tabs, diagram node keys, diagram edge keys, tours, and translations as typed records. Scene JSON stays structured so renderers and assistant tools can refer to the same node and edge keys.
Current retrieval content
The retrieval index is derived from current content that passes publication eligibility checks. Eligibility filters exclude private and hidden content; revision checks keep superseded chunks out of current retrieval.
Graph tools and semantic retrieval
The assistant uses exact graph tools when it needs to open a known scene, tab, or object. Semantic retrieval helps answer broader questions from matching sections, and citations point back to the content used for the answer.
Tours and voice
Authored tours, generated session tours, and speech share the same publication inputs.
Authored and default tours
I author the default tour and store its narration and actions in Supabase. Before playback, the site checks those steps against the current content and diagram identifiers.
Transient guide tours
A visitor can ask for a custom guide path during a session. That tour is generated for the session only: it can steer the browser and narration without becoming a stored publication record.
Local voice path
In supported browsers, live voice uses Silero VAD and Smart Turn to detect speech and the end of a turn, Whisper to transcribe it locally, and PocketTTS Raven to speak the answer in English or Portuguese through Web Audio. The assistant model request runs on the server.
Stack and domains
- Next.js
- React
- TypeScript
- Supabase
- Postgres
- pgvector
- Three.js
- Web Audio
- TTS
- ASR