# muhammadshahantariq/portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/muhammadshahantariq/portfolio
- Repository: https://github.com/muhammadshahantariq/portfolio

## Overview

This repository is a personal portfolio website. Its runtime workflow is a visitor requesting content from a small Node HTTP server, which reads files and returns responses; browser-side code provides engagement, theme, and animation interactions. The README gives no further product capabilities, and the sampled files do not establish how the HTML links to the CSS and JavaScript. The server expects a `public` directory, which is not present in the supplied tree, so asset-to-page wiring is uncertain.

Main entry points: [`server.js`](https://github.com/muhammadshahantariq/portfolio/blob/main/server.js) (HTTP server)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_delivery["HTTP delivery"]
  node_server["HTTP server<br/>[server.js]"]
  node_files["Site files"]
end

subgraph group_site["Portfolio site"]
  node_page["Portfolio page<br/>[index.html]"]
  node_styles["Visual styling<br/>[styles.css]"]
end

subgraph group_interaction["Browser interactions"]
  node_behavior["UI interactions<br/>[script.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"requests content"| node_server
node_server -->|"reads files"| node_files
node_server -->|"returns response"| node_visitor

click node_server "https://github.com/muhammadshahantariq/portfolio/blob/main/server.js"
click node_page "https://github.com/muhammadshahantariq/portfolio/blob/main/index.html"
click node_styles "https://github.com/muhammadshahantariq/portfolio/blob/main/styles.css"
click node_behavior "https://github.com/muhammadshahantariq/portfolio/blob/main/script.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_server,node_files toneBlue
class node_page,node_styles toneAmber
class node_behavior toneMint
class node_visitor toneIndigo
```

## Components

### HTTP delivery

- [HTTP server](https://github.com/muhammadshahantariq/portfolio/blob/main/server.js): `server.js`
- **Site files**

### Portfolio site

- [Portfolio page](https://github.com/muhammadshahantariq/portfolio/blob/main/index.html): `index.html`
- [Visual styling](https://github.com/muhammadshahantariq/portfolio/blob/main/styles.css): `styles.css`

### Browser interactions

- [UI interactions](https://github.com/muhammadshahantariq/portfolio/blob/main/script.js): `script.js`

### Other components

- **Visitor**

## Connections

- Visitor → HTTP server: requests content
- HTTP server → Site files: reads files
- HTTP server → Visitor: returns response