# vishnu-kumar2501/vk-portfolio architecture

> Architecture diagram of the GitHub repository vishnu-kumar2501/vk-portfolio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/vishnu-kumar2501/vk-portfolio
- Repository: https://github.com/vishnu-kumar2501/vk-portfolio

## Overview

#### Purpose
VkPortfolio is an Angular 12 single-page portfolio site. Its visible content is organized as reusable layout sections: introduction, about, skills, experience, contact, and a header navigation.

#### Runtime and Entry Points
The browser application starts at `src/main.ts`, which bootstraps the root Angular module in `src/app/app.module.ts`. The host document is `src/index.html`; global styling is in `src/styles.scss`. Angular CLI configuration lives in `angular.json`.

A separate Node entry point, `server.js`, is present and likely supports serving deployed build output; its exact server behavior is not represented in the supplied tree.

#### Application Shell
`src/app/app.component.ts` is the root component, with its page composition in `src/app/app.component.html` and root-level styles in `src/app/app.component.scss`. This shell is the boundary between Angular bootstrap/module wiring and the portfolio UI.

#### Routing Boundary
`src/app/app-routing.module.ts` defines the application routing layer. It is the intended navigation boundary for URL-driven views, while the header navigation component provides the UI-facing navigation surface:
- `src/app/app-routing.module.ts`
- `src/layout/header-nav/header-nav.component.ts`
- `src/layout/header-nav/header-nav.component.html`

#### Feature/Layout Module
`src/layout/layout.module.ts` groups the portfolio presentation components separately from the root app module. This is the principal feature boundary: `AppModule` imports/composes application capabilities, while `LayoutModule` owns section-level UI.

#### Portfolio Content Sections
The main user-facing content is split into independently styled Angular components:
- Intro: `src/layout/intro-comp/intro-comp.component.ts`, `src/layout/intro-comp/intro-comp.component.html`
- About: `src/layout/about-comp/about-comp.component.ts`, `src/layout/about-comp/about-comp.component.html`
- Skills: `src/layout/skills-comp/skills-comp.component.ts`, `src/layout/skills-comp/skills-comp.component.html`
- Experience: `src/layout/experience-comp/experience-comp.component.ts`, `src/layout/experience-comp/experience-comp.component.html`
- Contact: `src/layout/contact-comp/contact-comp.component.ts`, `src/layout/contact-comp/contact-comp.component.html`

Each section has co-located SCSS, making component templates and styles the primary presentation/data-content boundary. No services, API clients, state stores, or backend integration layers appear in the tree, so content is likely static or component-local.

#### Build, Environments, and Assets
Angular CLI compiles the TypeScript SPA for browser deployment. Environment substitution is represented by `src/environments/environment.ts` and `src/environments/environment.prod.ts`. Static browser assets are served from `src/assets`, including favicon/web-manifest resources under `src/assets/favicon`.

The material runtime stack is Angular 12.1.3, TypeScript, Angular CLI build tooling, and Karma for unit-test execution. No external cloud services, databases, or third-party APIs are evidenced by the supplied files.

Main entry points: [`src/app/app.component.ts`](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/app/app.component.ts) (Application Shell), [`angular.json`](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/angular.json) (Angular CLI Build), [`src/app/app.module.ts`](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/app/app.module.ts) (App Module), [`src/main.ts`](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/main.ts) (Angular Bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser SPA"]
  node_host["Host Document<br/>HTML entry<br/>[index.html]"]
  node_main["Angular Bootstrap<br/>browser entry<br/>[main.ts]"]
  node_app_module["App Module<br/>Angular module<br/>[app.module.ts]"]
  node_app_shell["Application Shell<br/>root component<br/>[app.component.ts]"]
  node_routing["Routing"]
  node_global_styles["Global Styles<br/>SCSS<br/>[styles.scss]"]
end

subgraph group_layout["Portfolio Layout"]
  node_layout_module["Layout Module<br/>Angular feature module<br/>[layout.module.ts]"]
  node_header["Header Navigation<br/>Angular component"]
  node_intro["Introduction<br/>Angular section component"]
  node_about["About<br/>Angular section component"]
  node_skills["Skills<br/>Angular section component"]
  node_experience["Experience<br/>Angular section component"]
  node_contact["Contact<br/>Angular section component"]
end

subgraph group_delivery["Build &amp; Delivery"]
  node_cli{{"Angular CLI Build<br/>build tooling<br/>[angular.json]"}}
  node_environments["Build Environments<br/>environment config<br/>[environment.ts]"]
  node_assets["Static Assets<br/>browser assets"]
  node_server["Node Server<br/>Node entry point<br/>[server.js]"]
end

node_host -->|"loads"| node_main
node_main -->|"bootstraps"| node_app_module
node_app_module -->|"declares"| node_app_shell
node_app_module -->|"imports"| node_routing
node_app_module -->|"imports"| node_layout_module
node_app_shell -->|"composes"| node_header
node_app_shell -->|"composes"| node_intro
node_app_shell -->|"composes"| node_about
node_app_shell -->|"composes"| node_skills
node_app_shell -->|"composes"| node_experience
node_app_shell -->|"composes"| node_contact
node_header -->|"navigates via"| node_routing
node_cli -->|"builds"| node_main
node_cli -->|"substitutes"| node_environments
node_cli -->|"bundles"| node_assets
node_cli -->|"includes"| node_global_styles
node_server -.->|"serves build output"| node_cli

click node_host "https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/index.html"
click node_main "https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/main.ts"
click node_app_module "https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/app/app.module.ts"
click node_app_shell "https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/app/app.component.ts"
click node_routing "https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/app/app-routing.module.ts"
click node_global_styles "https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/styles.scss"
click node_layout_module "https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/layout/layout.module.ts"
click node_header "https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/layout/header-nav/header-nav.component.ts"
click node_intro "https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/layout/intro-comp/intro-comp.component.ts"
click node_about "https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/layout/about-comp/about-comp.component.ts"
click node_skills "https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/layout/skills-comp/skills-comp.component.ts"
click node_experience "https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/layout/experience-comp/experience-comp.component.ts"
click node_contact "https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/layout/contact-comp/contact-comp.component.ts"
click node_cli "https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/angular.json"
click node_environments "https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/environments/environment.ts"
click node_assets "https://github.com/vishnu-kumar2501/vk-portfolio/tree/master/src/assets"
click node_server "https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/server.js"

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_host,node_main,node_app_module,node_app_shell,node_routing,node_global_styles toneBlue
class node_layout_module,node_header,node_intro,node_about,node_skills,node_experience,node_contact toneAmber
class node_cli,node_environments,node_assets,node_server toneMint
```

## Components

### Browser SPA

- [Host Document](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/index.html): HTML entry · `src/index.html`
- [Angular Bootstrap](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/main.ts): browser entry · `src/main.ts`
- [App Module](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/app/app.module.ts): Angular module · `src/app/app.module.ts`
- [Application Shell](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/app/app.component.ts): root component · Composes the portfolio page UI. · `src/app/app.component.ts`
- [Routing](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/app/app-routing.module.ts): Angular routing module · URL navigation boundary. · `src/app/app-routing.module.ts`
- [Global Styles](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/styles.scss): SCSS · `src/styles.scss`

### Portfolio Layout

- [Layout Module](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/layout/layout.module.ts): Angular feature module · Owns section-level presentation components. · `src/layout/layout.module.ts`
- [Header Navigation](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/layout/header-nav/header-nav.component.ts): Angular component · UI-facing navigation surface. · `src/layout/header-nav/header-nav.component.ts`
- [Introduction](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/layout/intro-comp/intro-comp.component.ts): Angular section component · `src/layout/intro-comp/intro-comp.component.ts`
- [About](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/layout/about-comp/about-comp.component.ts): Angular section component · `src/layout/about-comp/about-comp.component.ts`
- [Skills](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/layout/skills-comp/skills-comp.component.ts): Angular section component · `src/layout/skills-comp/skills-comp.component.ts`
- [Experience](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/layout/experience-comp/experience-comp.component.ts): Angular section component · `src/layout/experience-comp/experience-comp.component.ts`
- [Contact](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/layout/contact-comp/contact-comp.component.ts): Angular section component · `src/layout/contact-comp/contact-comp.component.ts`

### Build & Delivery

- [Angular CLI Build](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/angular.json): build tooling · Compiles the TypeScript SPA for browser deployment. · `angular.json`
- [Build Environments](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/src/environments/environment.ts): environment config · Provides development and production substitutions. · `src/environments/environment.ts`
- [Static Assets](https://github.com/vishnu-kumar2501/vk-portfolio/tree/master/src/assets): browser assets · Includes favicon and web-manifest resources. · `src/assets`
- [Node Server](https://github.com/vishnu-kumar2501/vk-portfolio/blob/master/server.js): Node entry point · Likely serves deployed build output; behavior is unspecified. · `server.js`

## Connections

- Host Document → Angular Bootstrap: loads
- Angular Bootstrap → App Module: bootstraps
- App Module → Application Shell: declares
- App Module → Routing: imports
- App Module → Layout Module: imports
- Application Shell → Header Navigation: composes
- Application Shell → Introduction: composes
- Application Shell → About: composes
- Application Shell → Skills: composes
- Application Shell → Experience: composes
- Application Shell → Contact: composes
- Header Navigation → Routing: navigates via
- Angular CLI Build → Angular Bootstrap: builds
- Angular CLI Build → Build Environments: substitutes
- Angular CLI Build → Static Assets: bundles
- Angular CLI Build → Global Styles: includes
- Node Server → Angular CLI Build: serves build output