# aalokt-80/alok-portfolio-main architecture

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

- Interactive diagram: https://gitdiagram.com/aalokt-80/alok-portfolio-main
- Repository: https://github.com/aalokt-80/alok-portfolio-main

## Overview

This is a small static personal portfolio: visitors open a single page presenting work, skills, and background. The page combines its HTML content with CSS styling and JavaScript interactions. The documented interactive features include a canvas animation, hero-text decryption, scroll reveals, smooth in-page navigation, and Escape-key focus clearing; animation effects respect reduced-motion preferences. Source for the HTML and CSS was not sampled, so their detailed structure and exact wiring are not inferred.

Main entry points: [`script.js`](https://github.com/aalokt-80/alok-portfolio-main/blob/main/script.js) (Interaction startup), [`index.html`](https://github.com/aalokt-80/alok-portfolio-main/blob/main/index.html) (Portfolio content), [`style.css`](https://github.com/aalokt-80/alok-portfolio-main/blob/main/style.css) (Visual styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Portfolio page"]
  node_html["Portfolio content<br/>[index.html]"]
  node_css["Visual styling<br/>[style.css]"]
end

subgraph group_interaction["Page interactions"]
  node_script["Interaction startup<br/>[script.js]"]
  node_canvas["Canvas animation<br/>[script.js]"]
  node_decrypt["Hero text effect<br/>[script.js]"]
  node_reveal["Scroll reveals<br/>[script.js]"]
  node_scroll["Smooth navigation<br/>[script.js]"]
  node_keyboard["Keyboard focus<br/>[script.js]"]
end

node_visitor(("Visitor"))
node_browser["Web browser"]

node_visitor -->|"opens page"| node_browser
node_browser -->|"loads"| node_html
node_browser -->|"applies styles"| node_css
node_browser -->|"runs script"| node_script
node_script -->|"initializes"| node_canvas
node_script -->|"initializes"| node_decrypt
node_script -->|"initializes"| node_reveal
node_script -->|"initializes"| node_scroll
node_script -->|"initializes"| node_keyboard
node_browser -->|"provides events"| node_canvas
node_browser -->|"provides scroll observation"| node_reveal
node_scroll -->|"scrolls to anchors"| node_html

click node_html "https://github.com/aalokt-80/alok-portfolio-main/blob/main/index.html"
click node_css "https://github.com/aalokt-80/alok-portfolio-main/blob/main/style.css"
click node_script "https://github.com/aalokt-80/alok-portfolio-main/blob/main/script.js"
click node_canvas "https://github.com/aalokt-80/alok-portfolio-main/blob/main/script.js"
click node_decrypt "https://github.com/aalokt-80/alok-portfolio-main/blob/main/script.js"
click node_reveal "https://github.com/aalokt-80/alok-portfolio-main/blob/main/script.js"
click node_scroll "https://github.com/aalokt-80/alok-portfolio-main/blob/main/script.js"
click node_keyboard "https://github.com/aalokt-80/alok-portfolio-main/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_html,node_css,node_browser toneBlue
class node_script,node_canvas,node_decrypt,node_reveal,node_scroll,node_keyboard toneAmber
class node_visitor toneIndigo
```

## Components

### Portfolio page

- [Portfolio content](https://github.com/aalokt-80/alok-portfolio-main/blob/main/index.html): `index.html`
- [Visual styling](https://github.com/aalokt-80/alok-portfolio-main/blob/main/style.css): `style.css`

### Page interactions

- [Interaction startup](https://github.com/aalokt-80/alok-portfolio-main/blob/main/script.js): `script.js`
- [Canvas animation](https://github.com/aalokt-80/alok-portfolio-main/blob/main/script.js): `script.js`
- [Hero text effect](https://github.com/aalokt-80/alok-portfolio-main/blob/main/script.js): `script.js`
- [Scroll reveals](https://github.com/aalokt-80/alok-portfolio-main/blob/main/script.js): `script.js`
- [Smooth navigation](https://github.com/aalokt-80/alok-portfolio-main/blob/main/script.js): `script.js`
- [Keyboard focus](https://github.com/aalokt-80/alok-portfolio-main/blob/main/script.js): `script.js`

### Other components

- **Visitor**
- **Web browser**

## Connections

- Visitor → Web browser: opens page
- Web browser → Portfolio content: loads
- Web browser → Visual styling: applies styles
- Web browser → Interaction startup: runs script
- Interaction startup → Canvas animation: initializes
- Interaction startup → Hero text effect: initializes
- Interaction startup → Scroll reveals: initializes
- Interaction startup → Smooth navigation: initializes
- Interaction startup → Keyboard focus: initializes
- Web browser → Canvas animation: provides events
- Web browser → Scroll reveals: provides scroll observation
- Smooth navigation → Portfolio content: scrolls to anchors