Record

Technical documentation and implementation record

Portfolio Architecture

This portfolio was built using a graph-first approach, where knowledge and content are structured as interconnected nodes in a knowledge graph. This enables:

  • Interactive 3D visualization of projects and blog posts
  • Intelligent navigation based on graph relationships
  • Dynamic content discovery through graph traversal
  • Integration with AI agents via Model Context Protocol (MCP)

Technical Stack

The application is built with modern web technologies, focusing on performance, maintainability, and user experience:

Flask Python 3 vis-network Three.js Bootstrap 5 JavaScript ES6+ NetworkX Jinja2 REST APIs

Key Features

Manufacturing Knowledge Graph:

Interactive visualization of manufacturing processes, equipment, teams, and data assets. Features include physics-based layout, cluster selection, and automated MCP tool generation.

Dynamic Knowledge Visualization:

3D graph rendering with advanced physics controls, allowing users to explore complex relationships and discover content through visual navigation.

Graph-to-Agent System:

Converts knowledge graphs into AI agents using the Model Context Protocol, enabling intelligent interaction with structured data.

Nothing Phone UI/UX:

Clean, monochromatic design inspired by Nothing Phone's aesthetic, featuring glassmorphism, smooth animations, and minimalist interactions.

Migration from Dash to Flask

This application was originally built with Plotly Dash but was completely rewritten in pure Flask to enable better integration with vanilla JavaScript libraries like vis-network. Key improvements include:

  • Direct DOM manipulation for graph controls
  • Standard HTML inputs instead of React components
  • Simpler routing and template system
  • Better performance and reduced complexity
  • Full control over frontend JavaScript behavior

Project Structure

The codebase follows a modular architecture:

  • /templates - Jinja2 HTML templates with inheritance
  • /assets - CSS, JavaScript, and static assets
  • /static - Additional static resources
  • flask_app.py - Main Flask application with routing
  • manufacturing_ontology_app.py - Manufacturing domain ontology

Data Engineering Philosophy

This portfolio embodies core data engineering principles:

  • API-First Design: Clear contracts and documentation
  • Metadata-Driven: Rich metadata for discovery and lineage
  • Graph-Based: Relationships as first-class citizens
  • Modular Architecture: Separation of concerns and reusability
  • Documentation as Code: Living documentation integrated with code

Built with Graph Intelligence

Every page, project, and article in this portfolio is represented as a node in a knowledge graph, enabling semantic navigation and intelligent content discovery. This approach mirrors how I build data platforms: structured, connected, and intelligent.