all projects

MJF — Interactive AI Portfolio

This website: a custom WebGL atmosphere, source-backed portfolio chat, streamed responses and animated navigation.

Full-StackAI/MLWebGLDeveloper Tools
MJF — Interactive AI Portfolio hero

About the project

I wanted a portfolio that someone could explore by browsing or by asking a question. The result is an interactive web application: project pages and personal context share a knowledge layer with a conversational interface. The custom visual environment gives it a sense of space, while reusable navigation and project components make the work easy to reach. The website is also a place to explore the engineering behind retrieval, response streaming and responsive interface motion.

What I built

  • A custom WebGL2 raymarched atmosphere and cloud shader, with animation controls and timing diagnostics.
  • A retrieval pipeline using curated profile and project records, keyword search and semantic embeddings.
  • Streamed chat responses and project presentation within the conversation.
  • Shared animated navigation, hover-aware typing, loading transitions and responsive layouts.
  • A single project catalog that feeds cards, detail pages and generated chat knowledge.
  • Reusable workspace packages for chat contracts, data access, orchestration, API and UI integration.

Keeping the experience and facts aligned

A polished interface is useful only if the answers stay connected to the work. Project content is synchronized into the retrieval records and embeddings, so the browser and chat can draw from the same descriptions. The repository also includes retrieval checks and conversation evaluations.

Motion with a purpose

The atmosphere uses real elapsed time to keep its motion consistent. Navigation springs, page loading states and the typing cycle make transitions legible without requiring the visitor to learn a different interaction on each page.

Built with

Next.jsReactTypeScriptWebGL2GLSLFramer MotionOpenAI Embeddings

Related projects