# alisolanki/portfolio architecture

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

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

## Overview

This repository is a static personal portfolio website, not a backend application. Its main workflow is visitors viewing the portfolio page and using its navigation, gallery, and interactive presentation features. The sampled JavaScript shows page behaviors and plugin use; README documentation is sparse, and the HTML and CSS were not sampled, so page content and styling relationships are not expanded beyond the available evidence.

Main entry points: [`js/main.js`](https://github.com/alisolanki/portfolio/blob/master/js/main.js) (Page behaviors), [`index.html`](https://github.com/alisolanki/portfolio/blob/master/index.html) (Portfolio page), [`js/plugins.js`](https://github.com/alisolanki/portfolio/blob/master/js/plugins.js) (Owl Carousel), [`js/modernizr.js`](https://github.com/alisolanki/portfolio/blob/master/js/modernizr.js) (Feature detection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Portfolio page"]
  node_portfolio["Portfolio page<br/>[index.html]"]
  node_styling["Page styling"]
  node_assets["Portfolio assets"]
end

subgraph group_behavior["Page interactions"]
  node_page_behavior["Page behaviors<br/>[main.js]"]
  node_responsive_text["FitText<br/>[plugins.js]"]
  node_video_layout["FitVids<br/>[plugins.js]"]
  node_carousel["Owl Carousel<br/>[plugins.js]"]
  node_scroll_observers["Waypoint effects<br/>[main.js]"]
  node_gallery_layout["Masonry gallery<br/>[main.js]"]
  node_image_loading["Image loading<br/>[main.js]"]
  node_modal_viewer["Modal viewer<br/>[main.js]"]
end

subgraph group_vendor["Browser support"]
  node_modernizr["Feature detection<br/>[modernizr.js]"]
  node_plugin_bundle["Plugin bundle<br/>[plugins.js]"]
end

node_visitor(("Visitor"))

node_visitor -.->|"views"| node_portfolio
node_page_behavior -.->|"enhances"| node_portfolio
node_page_behavior -->|"configures"| node_responsive_text
node_page_behavior -->|"applies"| node_video_layout
node_page_behavior -->|"initializes"| node_carousel
node_page_behavior -->|"registers"| node_scroll_observers
node_page_behavior -->|"initializes"| node_gallery_layout
node_page_behavior -->|"waits for"| node_image_loading
node_page_behavior -->|"configures"| node_modal_viewer
node_plugin_bundle -->|"implements"| node_carousel
node_portfolio -.->|"uses"| node_styling
node_portfolio -.->|"displays"| node_assets
node_modernizr -.->|"detects support"| node_portfolio

click node_portfolio "https://github.com/alisolanki/portfolio/blob/master/index.html"
click node_styling "https://github.com/alisolanki/portfolio/tree/master/css"
click node_assets "https://github.com/alisolanki/portfolio/tree/master/images"
click node_page_behavior "https://github.com/alisolanki/portfolio/blob/master/js/main.js"
click node_responsive_text "https://github.com/alisolanki/portfolio/blob/master/js/plugins.js"
click node_video_layout "https://github.com/alisolanki/portfolio/blob/master/js/plugins.js"
click node_carousel "https://github.com/alisolanki/portfolio/blob/master/js/plugins.js"
click node_scroll_observers "https://github.com/alisolanki/portfolio/blob/master/js/main.js"
click node_gallery_layout "https://github.com/alisolanki/portfolio/blob/master/js/main.js"
click node_image_loading "https://github.com/alisolanki/portfolio/blob/master/js/main.js"
click node_modal_viewer "https://github.com/alisolanki/portfolio/blob/master/js/main.js"
click node_modernizr "https://github.com/alisolanki/portfolio/blob/master/js/modernizr.js"
click node_plugin_bundle "https://github.com/alisolanki/portfolio/blob/master/js/plugins.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_portfolio,node_styling,node_assets toneBlue
class node_page_behavior,node_responsive_text,node_video_layout,node_carousel,node_scroll_observers,node_gallery_layout,node_image_loading,node_modal_viewer toneAmber
class node_modernizr,node_plugin_bundle toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio page

- [Portfolio page](https://github.com/alisolanki/portfolio/blob/master/index.html): `index.html`
- [Page styling](https://github.com/alisolanki/portfolio/tree/master/css): `css`
- [Portfolio assets](https://github.com/alisolanki/portfolio/tree/master/images): `images`

### Page interactions

- [Page behaviors](https://github.com/alisolanki/portfolio/blob/master/js/main.js): `js/main.js`
- [FitText](https://github.com/alisolanki/portfolio/blob/master/js/plugins.js): `js/plugins.js`
- [FitVids](https://github.com/alisolanki/portfolio/blob/master/js/plugins.js): `js/plugins.js`
- [Owl Carousel](https://github.com/alisolanki/portfolio/blob/master/js/plugins.js): `js/plugins.js`
- [Waypoint effects](https://github.com/alisolanki/portfolio/blob/master/js/main.js): `js/main.js`
- [Masonry gallery](https://github.com/alisolanki/portfolio/blob/master/js/main.js): `js/main.js`
- [Image loading](https://github.com/alisolanki/portfolio/blob/master/js/main.js): `js/main.js`
- [Modal viewer](https://github.com/alisolanki/portfolio/blob/master/js/main.js): `js/main.js`

### Browser support

- [Feature detection](https://github.com/alisolanki/portfolio/blob/master/js/modernizr.js): `js/modernizr.js`
- [Plugin bundle](https://github.com/alisolanki/portfolio/blob/master/js/plugins.js): `js/plugins.js`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: views (evidence: `README.md`)
- Page behaviors → Portfolio page: enhances
- Page behaviors → FitText: configures (evidence: `js/main.js`)
- Page behaviors → FitVids: applies (evidence: `js/main.js`)
- Page behaviors → Owl Carousel: initializes (evidence: `js/main.js`)
- Page behaviors → Waypoint effects: registers (evidence: `js/main.js`)
- Page behaviors → Masonry gallery: initializes (evidence: `js/main.js`)
- Page behaviors → Image loading: waits for (evidence: `js/main.js`)
- Page behaviors → Modal viewer: configures (evidence: `js/main.js`)
- Plugin bundle → Owl Carousel: implements (evidence: `js/plugins.js`)
- Portfolio page → Page styling: uses
- Portfolio page → Portfolio assets: displays
- Feature detection → Portfolio page: detects support