# sasivarman-s/sasivarman-portfolio architecture

> Architecture diagram of the GitHub repository sasivarman-s/sasivarman-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/sasivarman-s/sasivarman-portfolio
- Repository: https://github.com/sasivarman-s/sasivarman-portfolio

## Overview

#### Purpose and Delivery Model
This repository is a static, multi-page personal developer portfolio. It presents biography, projects, resume, tools, AMA content, and social/contact links. There is no application server, database, authentication, or API layer indicated. Pages can be opened directly in a browser and are deployed as static files to Vercel.

**Entry point:** `index.html`  
**Deployment target:** Vercel, per `README.md`.

#### Page Routing and Site Shell
Navigation is conventional HTML-document routing: the root landing page links into standalone documents under `pages/`. Each page owns its markup and renders independently on browser navigation; no client-side router or SPA runtime is present.

Core documents:
- `index.html`
- `pages/about.html`
- `pages/projects.html`
- `pages/resume.html`
- `pages/tools.html`
- `pages/ama.html`

This makes relative-link correctness and shared navigation/styling consistency the principal cross-page integration concerns.

#### Content Presentation Stages
The portfolio’s primary user flow starts at the introduction/home content, then branches to:
1. Personal background and skills in `pages/about.html`.
2. Work/project discovery in `pages/projects.html`.
3. Resume access in `pages/resume.html`.
4. Tools or utilities content in `pages/tools.html`.
5. Visitor-oriented Q&A in `pages/ama.html`.

Project and social links cross the site boundary to external destinations such as GitHub, live project demos, and social platforms. These are outbound navigations rather than integrated service calls.

#### Shared Data Boundary
`pages/data.js` is the repository’s identifiable client-side data module. It likely separates reusable or structured page content from page markup, most materially for portfolio/project-oriented views. Any page consuming it forms the only meaningful JavaScript data flow shown by the tree:

`pages/data.js` → page script consumption → rendered static DOM/content.

There is no evidence of data fetching, persistence, user submission handling, or backend synchronization.

#### Styling and Design Assets
Visual behavior is driven by CSS and Tailwind configuration rather than a component framework. The site uses responsive Tailwind utility styling as described in the README, with repository-level custom styles available in `style.css` and Tailwind customization in `tailwind.config.js`.

Key style boundaries:
- `style.css` for site-level/custom CSS.
- `tailwind.config.js` for Tailwind theme/content configuration.
- `assets/WEB/css/satoshi.css` for custom font declarations.

Custom Satoshi font files are static browser-loaded assets under `assets/WEB/fonts/`, establishing a local typography dependency rather than an external font service.

#### Runtime and Infrastructure
The runtime is the browser: HTML5 documents, CSS, and limited JavaScript. The project has no package manifest or server source in the supplied tree, so build tooling is optional rather than required for direct use. Tailwind may be consumed through a CDN or generated CSS workflow, but the repository’s architecture remains static-file based.

Infrastructure consists of static hosting on Vercel. Release behavior is therefore expected to publish the repository’s root and page/assets directory structure directly, with browser requests resolving HTML files and static assets.

Main entry points: [`index.html`](https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/index.html) (Landing page), [`style.css`](https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/style.css) (Custom styles), [`pages/projects.html`](https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/pages/projects.html) (Projects), [`assets/WEB/css/satoshi.css`](https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/assets/WEB/css/satoshi.css) (Satoshi declarations)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Static site"]
  node_home["Landing page<br/>HTML document<br/>[index.html]"]
  node_about["About<br/>HTML document<br/>[about.html]"]
  node_projects["Projects<br/>HTML document<br/>[projects.html]"]
  node_resume["Resume<br/>HTML document<br/>[resume.html]"]
  node_tools["Tools<br/>HTML document<br/>[tools.html]"]
  node_ama["AMA<br/>HTML document<br/>[ama.html]"]
  node_page_data["Page data<br/>JavaScript data module<br/>[data.js]"]
end

subgraph group_presentation["Shared presentation"]
  node_custom_css["Custom styles<br/>CSS<br/>[style.css]"]
  node_tailwind_config["Tailwind theme<br/>Tailwind configuration<br/>[tailwind.config.js]"]
  node_font_css["Satoshi declarations<br/>font CSS<br/>[satoshi.css]"]
  node_font_files["Satoshi font files<br/>static fonts"]
end

subgraph group_delivery["Runtime &amp; delivery"]
  node_browser(("Browser<br/>runtime"))
  node_vercel{{"Vercel<br/>static hosting<br/>[README.md]"}}
end

node_external_links{{"External destinations<br/>outbound links"}}

node_vercel -->|"serves static files"| node_browser
node_browser -->|"opens"| node_home
node_home -->|"navigates"| node_about
node_home -->|"navigates"| node_projects
node_home -->|"navigates"| node_resume
node_home -->|"navigates"| node_tools
node_home -->|"navigates"| node_ama
node_page_data -->|"supplies content"| node_projects
node_custom_css -->|"styles"| node_home
node_custom_css -->|"styles"| node_about
node_custom_css -->|"styles"| node_projects
node_tailwind_config -.->|"customizes utilities"| node_custom_css
node_font_css -->|"loads"| node_font_files
node_font_css -->|"provides typography"| node_home
node_projects -->|"project links"| node_external_links
node_home -->|"social/contact links"| node_external_links

click node_vercel "https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/README.md"
click node_home "https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/index.html"
click node_about "https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/pages/about.html"
click node_projects "https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/pages/projects.html"
click node_resume "https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/pages/resume.html"
click node_tools "https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/pages/tools.html"
click node_ama "https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/pages/ama.html"
click node_page_data "https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/pages/data.js"
click node_custom_css "https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/style.css"
click node_tailwind_config "https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/tailwind.config.js"
click node_font_css "https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/assets/WEB/css/satoshi.css"

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_home,node_about,node_projects,node_resume,node_tools,node_ama,node_page_data toneBlue
class node_custom_css,node_tailwind_config,node_font_css,node_font_files toneAmber
class node_browser,node_vercel toneMint
class node_external_links toneNeutral
```

## Components

### Static site

- [Landing page](https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/index.html): HTML document · Primary entry point and navigation hub. · `index.html`
- [About](https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/pages/about.html): HTML document · `pages/about.html`
- [Projects](https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/pages/projects.html): HTML document · `pages/projects.html`
- [Resume](https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/pages/resume.html): HTML document · `pages/resume.html`
- [Tools](https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/pages/tools.html): HTML document · `pages/tools.html`
- [AMA](https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/pages/ama.html): HTML document · `pages/ama.html`
- [Page data](https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/pages/data.js): JavaScript data module · Reusable structured content for page rendering. · `pages/data.js`

### Shared presentation

- [Custom styles](https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/style.css): CSS · Site-level styling shared by documents. · `style.css`
- [Tailwind theme](https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/tailwind.config.js): Tailwind configuration · Defines Tailwind customization and content settings. · `tailwind.config.js`
- [Satoshi declarations](https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/assets/WEB/css/satoshi.css): font CSS · `assets/WEB/css/satoshi.css`
- **Satoshi font files**: static fonts · Locally loaded browser font assets.

### Runtime & delivery

- **Browser**: runtime · Renders independent HTML documents and static assets.
- [Vercel](https://github.com/sasivarman-s/sasivarman-portfolio/blob/main/README.md): static hosting · Publishes the repository as static files. · `README.md`

### Other components

- **External destinations**: outbound links · GitHub, project demos, and social platforms.

## Connections

- Vercel → Browser: serves static files
- Browser → Landing page: opens
- Landing page → About: navigates
- Landing page → Projects: navigates
- Landing page → Resume: navigates
- Landing page → Tools: navigates
- Landing page → AMA: navigates
- Page data → Projects: supplies content
- Custom styles → Landing page: styles
- Custom styles → About: styles
- Custom styles → Projects: styles
- Tailwind theme → Custom styles: customizes utilities
- Satoshi declarations → Satoshi font files: loads
- Satoshi declarations → Landing page: provides typography
- Projects → External destinations: project links
- Landing page → External destinations: social/contact links