# lakshman-a01/my-portfolio-responsive-site architecture

> Architecture diagram of the GitHub repository lakshman-a01/my-portfolio-responsive-site, 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/lakshman-a01/my-portfolio-responsive-site
- Repository: https://github.com/lakshman-a01/my-portfolio-responsive-site

## Overview

#### Purpose and Entry Point
This is a static, responsive personal portfolio site. `index.html` is the sole document entry point; it composes portfolio sections, navigation, assets, and client-side behavior. No backend, build service, API, or server runtime is represented.

Paths: `index.html`, `README.md`

#### Page Composition
The HTML document is the architectural container for the portfolio’s content and section-level navigation. It likely defines the scroll destinations used by smooth scrolling and the elements targeted by interactive JavaScript.

Path: `index.html`

#### Presentation System
Styling is delivered as CSS loaded by the page. The source stylesheet is maintained in SCSS, with a compiled CSS artifact available for browser use. The styling system is mobile-first and supplies responsive layouts, visual presentation, and scroll-animation states.

Paths: `assets/scss/styles.scss`, `assets/css/styles.css`, `index.html`

#### Client-Side Interaction
Browser-side JavaScript owns dynamic UI behavior, including navigation/menu interactions, scroll-triggered animation behavior, and smooth section navigation described by the repository. It operates directly against the DOM rendered from `index.html`.

Paths: `assets/js/main.js`, `index.html`

#### Asset Boundary
Static assets are served directly with the site. The resume PDF is a downloadable portfolio artifact; image assets are held under the image directory and are referenced by the document or stylesheets.

Paths: `assets/Lakshman resume.pdf`, `assets/img/img.txt`, `assets/img`

#### Primary Flow
A browser requests `index.html`, which loads the compiled stylesheet and JavaScript. The stylesheet establishes responsive visual states across viewport sizes. JavaScript attaches behavior to document elements, enabling section navigation and scroll-related effects. Portfolio content and downloadable assets remain local to the repository.

Paths: `index.html`, `assets/css/styles.css`, `assets/js/main.js`

#### Runtime and Deployment Model
The application requires only a standards-compliant web browser and static-file hosting. It can be deployed unchanged to any static hosting provider or conventional web server; there are no represented external services, databases, authentication boundaries, or application-server components.

Paths: `index.html`, `assets`

Main entry points: [`index.html`](https://github.com/lakshman-a01/my-portfolio-responsive-site/blob/main/index.html) (Portfolio Document), [`assets/css/styles.css`](https://github.com/lakshman-a01/my-portfolio-responsive-site/blob/main/assets/css/styles.css) (Compiled CSS), [`assets/img`](https://github.com/lakshman-a01/my-portfolio-responsive-site/tree/main/assets/img) (Image Assets), [`assets`](https://github.com/lakshman-a01/my-portfolio-responsive-site/tree/main/assets) (Assets Directory)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Static Site"]
  node_page["Portfolio Document<br/>HTML entry point<br/>[index.html]"]
  node_javascript["Client JavaScript<br/>browser script<br/>[main.js]"]
end

subgraph group_styles["Presentation"]
  node_scss["SCSS Source<br/>stylesheet source<br/>[styles.scss]"]
  node_css["Compiled CSS<br/>browser stylesheet<br/>[styles.css]"]
end

subgraph group_assets["Local Assets"]
  node_resume["Resume PDF<br/>downloadable asset"]
  node_images["Image Assets<br/>static assets"]
  node_static_assets["Assets Directory<br/>static file boundary"]
end

node_browser(("Web Browser<br/>runtime"))

node_browser -->|"requests"| node_page
node_page -->|"loads"| node_css
node_page -->|"loads"| node_javascript
node_scss -.->|"compiles to"| node_css
node_javascript -->|"targets DOM"| node_page
node_page -->|"links download"| node_resume
node_page -->|"references"| node_images
node_css -.->|"may reference"| node_images
node_static_assets -->|"contains"| node_resume
node_static_assets -->|"contains"| node_images

click node_page "https://github.com/lakshman-a01/my-portfolio-responsive-site/blob/main/index.html"
click node_scss "https://github.com/lakshman-a01/my-portfolio-responsive-site/blob/main/assets/scss/styles.scss"
click node_css "https://github.com/lakshman-a01/my-portfolio-responsive-site/blob/main/assets/css/styles.css"
click node_javascript "https://github.com/lakshman-a01/my-portfolio-responsive-site/blob/main/assets/js/main.js"
click node_resume "https://github.com/lakshman-a01/my-portfolio-responsive-site/blob/main/assets/Lakshman%20resume.pdf"
click node_images "https://github.com/lakshman-a01/my-portfolio-responsive-site/tree/main/assets/img"
click node_static_assets "https://github.com/lakshman-a01/my-portfolio-responsive-site/tree/main/assets"

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_page,node_javascript toneBlue
class node_scss,node_css toneAmber
class node_resume,node_images,node_static_assets toneMint
class node_browser toneNeutral
```

## Components

### Static Site

- [Portfolio Document](https://github.com/lakshman-a01/my-portfolio-responsive-site/blob/main/index.html): HTML entry point · Composes sections, navigation, and asset references. · `index.html`
- [Client JavaScript](https://github.com/lakshman-a01/my-portfolio-responsive-site/blob/main/assets/js/main.js): browser script · Handles menu, smooth navigation, and scroll effects. · `assets/js/main.js`

### Presentation

- [SCSS Source](https://github.com/lakshman-a01/my-portfolio-responsive-site/blob/main/assets/scss/styles.scss): stylesheet source · Mobile-first responsive style source. · `assets/scss/styles.scss`
- [Compiled CSS](https://github.com/lakshman-a01/my-portfolio-responsive-site/blob/main/assets/css/styles.css): browser stylesheet · Provides responsive layouts and animation states. · `assets/css/styles.css`

### Local Assets

- [Resume PDF](https://github.com/lakshman-a01/my-portfolio-responsive-site/blob/main/assets/Lakshman%20resume.pdf): downloadable asset · `assets/Lakshman resume.pdf`
- [Image Assets](https://github.com/lakshman-a01/my-portfolio-responsive-site/tree/main/assets/img): static assets · Images referenced by the page or styles. · `assets/img`
- [Assets Directory](https://github.com/lakshman-a01/my-portfolio-responsive-site/tree/main/assets): static file boundary · Served directly by static hosting. · `assets`

### Other components

- **Web Browser**: runtime · Renders the site and runs client-side behavior.

## Connections

- Web Browser → Portfolio Document: requests
- Portfolio Document → Compiled CSS: loads
- Portfolio Document → Client JavaScript: loads
- SCSS Source → Compiled CSS: compiles to
- Client JavaScript → Portfolio Document: targets DOM
- Portfolio Document → Resume PDF: links download
- Portfolio Document → Image Assets: references
- Compiled CSS → Image Assets: may reference
- Assets Directory → Resume PDF: contains
- Assets Directory → Image Assets: contains