# subhamsourabh265/my_portfolio_ng architecture

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

- Interactive diagram: https://gitdiagram.com/subhamsourabh265/my_portfolio_ng
- Repository: https://github.com/subhamsourabh265/my_portfolio_ng

## Overview

This is a personal portfolio site. A visitor enters through the Angular app shell, which routes the home page to the portfolio; the portfolio presents profile, work, about, experience, and contact content. The work section filters typed project data and renders matching project cards. The README also documents server rendering, incremental hydration, and a downloadable resume. Component composition and data flow are supported by the README and sampled TypeScript; unsampled templates limit certainty about specific links and interactions.

Main entry points: [`src/app/portfolio/portfolio.component.ts`](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/portfolio/portfolio.component.ts) (Portfolio page), [`src/app/app.component.ts`](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/app.component.ts) (App shell), [`src/app/work/work.component.ts`](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/work/work.component.ts) (Work section), [`src/main.server.ts`](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/main.server.ts) (Server bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_shell["App shell<br/>[app.component.ts]"]
  node_routes["Route config<br/>[app.routes.ts]"]
  node_header["Site header"]
  node_footer["Site footer"]
end

subgraph group_content["Portfolio content"]
  node_portfolio["Portfolio page"]
  node_hero["Hero section<br/>[hero.component.ts]"]
  node_about["About section<br/>[about.component.ts]"]
  node_experience["Experience section"]
  node_contact["Contact section"]
  node_profile["Profile data<br/>[profile.ts]"]
  node_resume["Resume PDF"]
end

subgraph group_work["Work showcase"]
  node_work["Work section<br/>[work.component.ts]"]
  node_projects["Project data<br/>[projects.ts]"]
  node_card["Project card"]
end

subgraph group_rendering["Rendering"]
  node_browser(("Browser"))
  node_client["Client bootstrap<br/>[main.ts]"]
  node_server["SSR server<br/>[server.ts]"]
  node_serverboot["Server bootstrap<br/>[main.server.ts]"]
  node_config["App config<br/>[app.config.ts]"]
  node_serverconfig["Server config"]
end

node_visitor(("Visitor"))

node_visitor -->|"visits"| node_browser
node_browser -->|"loads app"| node_shell
node_client -->|"bootstraps"| node_shell
node_shell -->|"renders outlet"| node_routes
node_routes -->|"lazy loads"| node_portfolio
node_shell -->|"renders"| node_header
node_shell -->|"renders"| node_footer
node_portfolio -->|"renders"| node_hero
node_portfolio -->|"renders"| node_work
node_portfolio -->|"renders"| node_about
node_portfolio -->|"renders"| node_experience
node_portfolio -->|"renders"| node_contact
node_portfolio -->|"reads"| node_profile
node_work -->|"filters"| node_projects
node_work -->|"renders matches"| node_card
node_browser -.->|"requests page"| node_server
node_server -.->|"renders with"| node_serverboot
node_serverboot -.->|"bootstraps"| node_shell
node_serverboot -.->|"uses"| node_serverconfig
node_serverconfig -.->|"merges"| node_config
node_client -->|"uses"| node_config
node_config -->|"provides router"| node_routes

click node_shell "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/app.component.ts"
click node_routes "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/app.routes.ts"
click node_portfolio "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/portfolio/portfolio.component.ts"
click node_header "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/site-header/site-header.component.ts"
click node_footer "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/site-footer/site-footer.component.ts"
click node_hero "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/hero/hero.component.ts"
click node_about "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/about/about.component.ts"
click node_experience "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/experience/experience.component.ts"
click node_contact "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/contact/contact.component.ts"
click node_profile "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/data/profile.ts"
click node_work "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/work/work.component.ts"
click node_projects "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/data/projects.ts"
click node_card "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/project-card/project-card.component.ts"
click node_resume "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/assets/Subham_Sourabh_Lead_Angular_Resume_V3.pdf"
click node_client "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/main.ts"
click node_server "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/server.ts"
click node_serverboot "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/main.server.ts"
click node_config "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/app.config.ts"
click node_serverconfig "https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/app.config.server.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_shell,node_routes,node_header,node_footer toneBlue
class node_portfolio,node_hero,node_about,node_experience,node_contact,node_profile,node_resume toneAmber
class node_work,node_projects,node_card toneMint
class node_browser,node_client,node_server,node_serverboot,node_config,node_serverconfig toneRose
class node_visitor toneIndigo
```

## Components

### Application

- [App shell](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/app.component.ts): `src/app/app.component.ts`
- [Route config](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/app.routes.ts): `src/app/app.routes.ts`
- [Site header](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/site-header/site-header.component.ts): `src/app/site-header/site-header.component.ts`
- [Site footer](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/site-footer/site-footer.component.ts): `src/app/site-footer/site-footer.component.ts`

### Portfolio content

- [Portfolio page](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/portfolio/portfolio.component.ts): `src/app/portfolio/portfolio.component.ts`
- [Hero section](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/hero/hero.component.ts): `src/app/hero/hero.component.ts`
- [About section](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/about/about.component.ts): `src/app/about/about.component.ts`
- [Experience section](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/experience/experience.component.ts): `src/app/experience/experience.component.ts`
- [Contact section](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/contact/contact.component.ts): `src/app/contact/contact.component.ts`
- [Profile data](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/data/profile.ts): `src/app/data/profile.ts`
- [Resume PDF](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/assets/Subham_Sourabh_Lead_Angular_Resume_V3.pdf): `src/assets/Subham_Sourabh_Lead_Angular_Resume_V3.pdf`

### Work showcase

- [Work section](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/work/work.component.ts): `src/app/work/work.component.ts`
- [Project data](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/data/projects.ts): `src/app/data/projects.ts`
- [Project card](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/project-card/project-card.component.ts): `src/app/project-card/project-card.component.ts`

### Rendering

- **Browser**
- [Client bootstrap](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/main.ts): `src/main.ts`
- [SSR server](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/server.ts): `server.ts`
- [Server bootstrap](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/main.server.ts): `src/main.server.ts`
- [App config](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/app.config.ts): `src/app/app.config.ts`
- [Server config](https://github.com/subhamsourabh265/my_portfolio_ng/blob/master/src/app/app.config.server.ts): `src/app/app.config.server.ts`

### Other components

- **Visitor**

## Connections

- Visitor → Browser: visits
- Browser → App shell: loads app
- Client bootstrap → App shell: bootstraps
- App shell → Route config: renders outlet
- Route config → Portfolio page: lazy loads
- App shell → Site header: renders
- App shell → Site footer: renders
- Portfolio page → Hero section: renders
- Portfolio page → Work section: renders
- Portfolio page → About section: renders
- Portfolio page → Experience section: renders
- Portfolio page → Contact section: renders
- Portfolio page → Profile data: reads
- Work section → Project data: filters
- Work section → Project card: renders matches
- Browser → SSR server: requests page
- SSR server → Server bootstrap: renders with
- Server bootstrap → App shell: bootstraps
- Server bootstrap → Server config: uses
- Server config → App config: merges
- Client bootstrap → App config: uses
- App config → Route config: provides router