# jayanthcsv/complete_portfolio architecture

> Architecture diagram of the GitHub repository jayanthcsv/complete_portfolio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jayanthcsv/complete_portfolio
- Repository: https://github.com/jayanthcsv/complete_portfolio

## Overview

This repository is a Flask-backed personal portfolio with a resume-question chatbot. A visitor uses the portfolio UI to submit a question; the browser posts it to Flask, which retrieves relevant resume content and returns a concise answer from an LLM. The backend’s document loading, chunking, embedding, indexing, retrieval, prompt, and response-chain stages are visible in `app.py`. The README also describes responsive navigation, project cards, and chatbot styling; their detailed markup and styling interactions were not sampled.

Main entry points: [`app.py`](https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py) (Flask Chat Endpoint), [`script.js`](https://github.com/jayanthcsv/complete_portfolio/blob/main/script.js) (Browser Interactions), [`assets/chatbot_data.pdf`](https://github.com/jayanthcsv/complete_portfolio/blob/main/assets/chatbot_data.pdf) (Resume PDF), [`index.html`](https://github.com/jayanthcsv/complete_portfolio/blob/main/index.html) (Portfolio Page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio UI"]
  node_portfolio_page["Portfolio Page<br/>[index.html]"]
  node_responsive_styles["Responsive Styles<br/>[style.css]"]
  node_media_styles["Media Styles<br/>[mediaqueries.css]"]
  node_browser_interactions["Browser Interactions<br/>[script.js]"]
end

subgraph group_chat_api["Chat API"]
  node_flask_endpoint["Flask Chat Endpoint<br/>[app.py]"]
end

subgraph group_resume_rag["Resume RAG"]
  node_resume_pdf["Resume PDF<br/>[chatbot_data.pdf]"]
  node_pdf_loader["PDF Loader<br/>[app.py]"]
  node_text_splitter["Text Splitter<br/>[app.py]"]
  node_embedding_model["Embedding Model<br/>[app.py]"]
  node_vector_index[("FAISS Index<br/>[app.py]")]
  node_retriever["Retriever<br/>[app.py]"]
end

subgraph group_answer_generation["Answer Generation"]
  node_response_chain["Retrieval Chain<br/>[app.py]"]
  node_document_chain["Document Chain<br/>[app.py]"]
  node_answer_prompt["Answer Prompt<br/>[app.py]"]
  node_groq_model["Groq Chat Model<br/>[app.py]"]
end

node_visitor(("Visitor"))

node_visitor -->|"views"| node_portfolio_page
node_visitor -->|"uses chat"| node_browser_interactions
node_browser_interactions -->|"posts query"| node_flask_endpoint
node_flask_endpoint -->|"loads PDF"| node_pdf_loader
node_resume_pdf -->|"provides resume"| node_pdf_loader
node_flask_endpoint -->|"splits documents"| node_text_splitter
node_flask_endpoint -->|"creates embeddings"| node_embedding_model
node_flask_endpoint -->|"builds index"| node_vector_index
node_flask_endpoint -->|"creates retriever"| node_retriever
node_vector_index -->|"provides search"| node_retriever
node_flask_endpoint -->|"creates chain"| node_document_chain
node_flask_endpoint -->|"creates and invokes"| node_response_chain
node_retriever -->|"supplies documents"| node_response_chain
node_document_chain -->|"combines documents"| node_response_chain
node_flask_endpoint -->|"configures chain"| node_answer_prompt
node_flask_endpoint -->|"configures chain"| node_groq_model
node_response_chain -->|"returns answer"| node_flask_endpoint

click node_portfolio_page "https://github.com/jayanthcsv/complete_portfolio/blob/main/index.html"
click node_responsive_styles "https://github.com/jayanthcsv/complete_portfolio/blob/main/style.css"
click node_media_styles "https://github.com/jayanthcsv/complete_portfolio/blob/main/mediaqueries.css"
click node_browser_interactions "https://github.com/jayanthcsv/complete_portfolio/blob/main/script.js"
click node_flask_endpoint "https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py"
click node_resume_pdf "https://github.com/jayanthcsv/complete_portfolio/blob/main/assets/chatbot_data.pdf"
click node_pdf_loader "https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py"
click node_text_splitter "https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py"
click node_embedding_model "https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py"
click node_vector_index "https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py"
click node_retriever "https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py"
click node_response_chain "https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py"
click node_document_chain "https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py"
click node_answer_prompt "https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py"
click node_groq_model "https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_portfolio_page,node_responsive_styles,node_media_styles,node_browser_interactions toneBlue
class node_flask_endpoint toneAmber
class node_resume_pdf,node_pdf_loader,node_text_splitter,node_embedding_model,node_vector_index,node_retriever toneMint
class node_response_chain,node_document_chain,node_answer_prompt,node_groq_model toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio UI

- [Portfolio Page](https://github.com/jayanthcsv/complete_portfolio/blob/main/index.html): `index.html`
- [Responsive Styles](https://github.com/jayanthcsv/complete_portfolio/blob/main/style.css): `style.css`
- [Media Styles](https://github.com/jayanthcsv/complete_portfolio/blob/main/mediaqueries.css): `mediaqueries.css`
- [Browser Interactions](https://github.com/jayanthcsv/complete_portfolio/blob/main/script.js): `script.js`

### Chat API

- [Flask Chat Endpoint](https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py): `app.py`

### Resume RAG

- [Resume PDF](https://github.com/jayanthcsv/complete_portfolio/blob/main/assets/chatbot_data.pdf): `assets/chatbot_data.pdf`
- [PDF Loader](https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py): `app.py`
- [Text Splitter](https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py): `app.py`
- [Embedding Model](https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py): `app.py`
- [FAISS Index](https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py): `app.py`
- [Retriever](https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py): `app.py`

### Answer Generation

- [Retrieval Chain](https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py): `app.py`
- [Document Chain](https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py): `app.py`
- [Answer Prompt](https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py): `app.py`
- [Groq Chat Model](https://github.com/jayanthcsv/complete_portfolio/blob/main/app.py): `app.py`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio Page: views (evidence: `README.md`)
- Visitor → Browser Interactions: uses chat (evidence: `README.md`)
- Browser Interactions → Flask Chat Endpoint: posts query (evidence: `script.js`)
- Flask Chat Endpoint → PDF Loader: loads PDF (evidence: `app.py`)
- Resume PDF → PDF Loader: provides resume (evidence: `app.py`)
- Flask Chat Endpoint → Text Splitter: splits documents (evidence: `app.py`)
- Flask Chat Endpoint → Embedding Model: creates embeddings (evidence: `app.py`)
- Flask Chat Endpoint → FAISS Index: builds index (evidence: `app.py`)
- Flask Chat Endpoint → Retriever: creates retriever (evidence: `app.py`)
- FAISS Index → Retriever: provides search (evidence: `app.py`)
- Flask Chat Endpoint → Document Chain: creates chain (evidence: `app.py`)
- Flask Chat Endpoint → Retrieval Chain: creates and invokes (evidence: `app.py`)
- Retriever → Retrieval Chain: supplies documents (evidence: `app.py`)
- Document Chain → Retrieval Chain: combines documents (evidence: `app.py`)
- Flask Chat Endpoint → Answer Prompt: configures chain (evidence: `app.py`)
- Flask Chat Endpoint → Groq Chat Model: configures chain (evidence: `app.py`)
- Retrieval Chain → Flask Chat Endpoint: returns answer (evidence: `app.py`)