Bridges

What a resume flattens, this site makes explorable.

Comment

Inspiration

Traditional resumes flatten the pattern that matters most in my career: the transfer of thinking across mathematics, finance, consulting, and AI. I wanted to build a portfolio that lets people discover those bridges instead of just reading claims about them.

What it does

Bridges is a dark, gallery-style portfolio site that makes my interdisciplinary background legible through interaction instead of summary.

It has three core layers:

  1. An interactive About grid where 49 skills connect across 8 professional domains and 9 selected projects. Click any item to focus only its bridges and reveal how the fields relate.
  2. Sophie, an AI conversational agent named after Sophie Germain and powered by Gemini 3 Flash. She knows my projects, writing, career narrative, original AI role memos, and a Gartner 2026 landscape on AI evaluation platforms. She thinks out loud in collapsible reasoning blocks and can navigate the site or open linked artifacts directly.
  3. A canvas-based navigation system with smooth pan transitions between Landing, About, Writing, and Projects, so the interaction style itself communicates range.

How I built it

I built Bridges with spec-driven development from start to finish.

Workflow: /onboard -> /scope -> /prd -> /spec -> /checklist -> /build -> /iterate

I created the planning documents first, then used AI coding agents in autonomous mode to implement against that spec with regular human verification.

Frontend: React 19, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, Motion v12

Backend: FastAPI streaming Gemini over SSE, with a markdown knowledge base loaded at startup and Supabase for chat logging

Deployment: GCP Cloud Run with two services: portal-api and portal-web

Challenges I ran into

  • Streaming Gemini through FastAPI without blocking the async event loop
  • Parsing tags when streamed chunks split tags across SSE events
  • Fixing position: fixed behavior inside transformed canvas containers using React portals
  • Cleaning malformed anchor links from model output so navigation stayed reliableer

Accomplishments that I am proud of

The About grid is the feature I’m proudest of. It turns an interdisciplinary career pattern into something visitors can actually explore. I’m also proud that Sophie demonstrates how I think instead of just describing my background.

What I learned

  • Spec-driven development works very well with AI coding agents
  • The quality of the knowledge base directly shapes the quality of the AI agent
  • The About grid’s focus mode was the highest-leverage interaction in the whole project

What's next for Bridges

Improve mobile responsiveness, deepen Sophie, and connect the About grid more tightly to conversation so clicking a skill or domain can trigger an explanation automatically. Longer term, Bridges becomes my permanent professional site.

Built With

Share this project:

Updates