# prasad0876/varaprasad-portfoli architecture

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

- Interactive diagram: https://gitdiagram.com/prasad0876/varaprasad-portfoli
- Repository: https://github.com/prasad0876/varaprasad-portfoli

## Overview

This is a personal developer portfolio site. Visitors enter through the TanStack Start server and router, then browse a single portfolio page covering the introduction, skills, projects, credentials, and contact form; project links and resume download provide outward actions. The sampled page shows form submission handling but not its delivery target, so no contact service is inferred. UI primitives support the page, while root/server error handling forms a separate operational layer. README content is absent and several source files are unsampled, so links are limited to evidenced wiring.

Main entry points: [`src/components/portfolio/Portfolio.tsx`](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/portfolio/Portfolio.tsx) (Portfolio page), [`src/server.ts`](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/server.ts) (SSR server), [`src/lib/utils.ts`](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/lib/utils.ts) (Style utilities), [`src/router.tsx`](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/router.tsx) (Router setup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["App runtime"]
  node_server["SSR server<br/>[server.ts]"]
  node_router["Router setup<br/>[router.tsx]"]
  node_route_tree["Route tree<br/>[routeTree.gen.ts]"]
  node_root_route["Root route<br/>[__root.tsx]"]
  node_index_route["Home route<br/>[index.tsx]"]
end

subgraph group_portfolio["Portfolio experience"]
  node_portfolio_page["Portfolio page<br/>[Portfolio.tsx]"]
  node_intro["Introduction<br/>[Portfolio.tsx]"]
  node_skills["Skills<br/>[Portfolio.tsx]"]
  node_projects["Projects<br/>[Portfolio.tsx]"]
  node_credentials["Credentials<br/>[Portfolio.tsx]"]
  node_contact["Contact form<br/>[Portfolio.tsx]"]
end

subgraph group_ui["UI primitives"]
  node_ui_controls["UI controls<br/>[button.tsx]"]
  node_ui_cards["Cards and badges<br/>[card.tsx]"]
  node_ui_fields["Form fields<br/>[input.tsx]"]
  node_ui_utils["Style utilities<br/>[utils.ts]"]
end

subgraph group_errors["Error handling"]
  node_error_boundary["Root error boundary<br/>[__root.tsx]"]
  node_error_report["Lovable reporting"]
  node_error_capture["Server error capture<br/>[error-capture.ts]"]
  node_error_page["Error response page<br/>[error-page.ts]"]
end

node_visitor(("Visitor"))
node_links(("Project destinations"))

node_visitor -->|"requests page"| node_server
node_server -->|"dispatches SSR"| node_router
node_router -->|"uses routes"| node_route_tree
node_route_tree -->|"routes through"| node_root_route
node_root_route -->|"renders outlet"| node_index_route
node_index_route -->|"renders page"| node_portfolio_page
node_portfolio_page -->|"renders section"| node_intro
node_portfolio_page -->|"renders section"| node_skills
node_portfolio_page -->|"renders section"| node_projects
node_portfolio_page -->|"renders section"| node_credentials
node_portfolio_page -->|"renders form"| node_contact
node_portfolio_page -->|"uses controls"| node_ui_controls
node_portfolio_page -->|"uses cards"| node_ui_cards
node_portfolio_page -->|"uses fields"| node_ui_fields
node_ui_controls -->|"combines classes"| node_ui_utils
node_ui_cards -->|"combines classes"| node_ui_utils
node_ui_fields -->|"combines classes"| node_ui_utils
node_visitor -->|"opens links"| node_links
node_projects -->|"links to demos"| node_links
node_error_boundary -->|"reports errors"| node_error_report
node_server -->|"consumes captured error"| node_error_capture
node_server -->|"renders failure page"| node_error_page

click node_server "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/server.ts"
click node_router "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/router.tsx"
click node_route_tree "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/routeTree.gen.ts"
click node_root_route "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/routes/__root.tsx"
click node_index_route "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/routes/index.tsx"
click node_portfolio_page "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/portfolio/Portfolio.tsx"
click node_intro "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/portfolio/Portfolio.tsx"
click node_skills "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/portfolio/Portfolio.tsx"
click node_projects "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/portfolio/Portfolio.tsx"
click node_credentials "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/portfolio/Portfolio.tsx"
click node_contact "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/portfolio/Portfolio.tsx"
click node_ui_controls "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/ui/button.tsx"
click node_ui_cards "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/ui/card.tsx"
click node_ui_fields "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/ui/input.tsx"
click node_ui_utils "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/lib/utils.ts"
click node_error_boundary "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/routes/__root.tsx"
click node_error_report "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/lib/lovable-error-reporting.ts"
click node_error_capture "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/lib/error-capture.ts"
click node_error_page "https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/lib/error-page.ts"

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_server,node_router,node_route_tree,node_root_route,node_index_route toneBlue
class node_portfolio_page,node_intro,node_skills,node_projects,node_credentials,node_contact toneAmber
class node_ui_controls,node_ui_cards,node_ui_fields,node_ui_utils toneMint
class node_error_boundary,node_error_report,node_error_capture,node_error_page toneRose
class node_visitor,node_links toneIndigo
```

## Components

### App runtime

- [SSR server](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/server.ts): `src/server.ts`
- [Router setup](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/router.tsx): `src/router.tsx`
- [Route tree](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/routeTree.gen.ts): `src/routeTree.gen.ts`
- [Root route](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/routes/__root.tsx): `src/routes/__root.tsx`
- [Home route](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/routes/index.tsx): `src/routes/index.tsx`

### Portfolio experience

- [Portfolio page](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/portfolio/Portfolio.tsx): `src/components/portfolio/Portfolio.tsx`
- [Introduction](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/portfolio/Portfolio.tsx): `src/components/portfolio/Portfolio.tsx`
- [Skills](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/portfolio/Portfolio.tsx): `src/components/portfolio/Portfolio.tsx`
- [Projects](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/portfolio/Portfolio.tsx): `src/components/portfolio/Portfolio.tsx`
- [Credentials](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/portfolio/Portfolio.tsx): `src/components/portfolio/Portfolio.tsx`
- [Contact form](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/portfolio/Portfolio.tsx): `src/components/portfolio/Portfolio.tsx`

### UI primitives

- [UI controls](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/ui/button.tsx): `src/components/ui/button.tsx`
- [Cards and badges](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/ui/card.tsx): `src/components/ui/card.tsx`
- [Form fields](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/components/ui/input.tsx): `src/components/ui/input.tsx`
- [Style utilities](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/lib/utils.ts): `src/lib/utils.ts`

### Error handling

- [Root error boundary](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/routes/__root.tsx): `src/routes/__root.tsx`
- [Lovable reporting](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/lib/lovable-error-reporting.ts): `src/lib/lovable-error-reporting.ts`
- [Server error capture](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/lib/error-capture.ts): `src/lib/error-capture.ts`
- [Error response page](https://github.com/prasad0876/varaprasad-portfoli/blob/main/src/lib/error-page.ts): `src/lib/error-page.ts`

### Other components

- **Visitor**
- **Project destinations**

## Connections

- Visitor → SSR server: requests page
- SSR server → Router setup: dispatches SSR
- Router setup → Route tree: uses routes
- Route tree → Root route: routes through
- Root route → Home route: renders outlet
- Home route → Portfolio page: renders page
- Portfolio page → Introduction: renders section
- Portfolio page → Skills: renders section
- Portfolio page → Projects: renders section
- Portfolio page → Credentials: renders section
- Portfolio page → Contact form: renders form
- Portfolio page → UI controls: uses controls
- Portfolio page → Cards and badges: uses cards
- Portfolio page → Form fields: uses fields
- UI controls → Style utilities: combines classes
- Cards and badges → Style utilities: combines classes
- Form fields → Style utilities: combines classes
- Visitor → Project destinations: opens links
- Projects → Project destinations: links to demos
- Root error boundary → Lovable reporting: reports errors
- SSR server → Server error capture: consumes captured error
- SSR server → Error response page: renders failure page