# santhoshclx/personalportfolio architecture

> Architecture diagram of the GitHub repository santhoshclx/personalportfolio, 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/santhoshclx/personalportfolio
- Repository: https://github.com/santhoshclx/personalportfolio

## Overview

#### Purpose and runtime
This repository is a static personal portfolio site for presenting resume content, projects, and technical blogs. It runs entirely in the browser: HTML, CSS, and vanilla JavaScript, with no backend, build system, database, or server-side runtime. It is deployable to any static host.

Primary entry point: `index.html`.

#### Application shell and content sections
`index.html` is the portfolio shell and canonical source for the About, Resume, Projects, Blog, and Contact sections. It contains the navigation targets and links that connect portfolio cards to detail documents.

Key path:
- `index.html`

#### Client-side interaction and navigation
The browser-side controller in `assets/js/script.js` implements responsive navigation, section/view transitions, dynamic project/blog loading via `loadProjectContent()`, and copy-to-clipboard behavior for embedded code examples. This is the main control boundary between the persistent portfolio shell and fetched detail content.

Key paths:
- `assets/js/script.js`
- `index.html`

#### Styling and responsive presentation
A single global stylesheet defines theme variables, layout, responsive breakpoints, animations, component styling, and code/content presentation. CSS custom properties provide the site’s visual theming boundary.

Key paths:
- `assets/css/style.css`
- `assets/images`

#### Dynamically loaded project content
Project detail pages are standalone HTML fragments/documents retrieved by the client script and integrated into the portfolio experience without a full-page navigation. Existing projects span DevOps, ML, regex, and the portfolio itself.

Key paths:
- `projects/AWSCodePipelineCICD.html`
- `projects/LinearRegressionFromSCRATCH.html`
- `projects/PatternMatchingRegEx.html`
- `projects/PersonalPortfolioWebsite.html`

#### Blog content pipeline
Technical posts are static HTML documents under `blogs/`. Navigation from the main shell selects a post; the JavaScript content loader fetches and displays it in the portfolio interface. Blog pages may contain code blocks that participate in the shared clipboard interaction.

Key paths:
- `blogs/RegularExpressionsGuide.html`
- `blogs/AWSCodePipeline.html`
- `blogs/AWSCloudWatchAgent.html`
- `blogs/AWSSystemsManager.html`

#### External dependencies and delivery
The site relies on browser-native APIs, notably `fetch` for dynamic content and the Clipboard API for code copying. External presentation services include Google Fonts (Poppins) and Ionicons. Assets are served as static files; local development can use any static HTTP server. GitHub Actions contains a static-site workflow, indicating CI/static validation or deployment automation.

Key paths:
- `.github/workflows/static.yml`
- `assets/css/style.css`
- `assets/js/script.js`

Main entry points: [`assets/js/script.js`](https://github.com/santhoshclx/personalportfolio/blob/main/assets/js/script.js) (Client controller), [`index.html`](https://github.com/santhoshclx/personalportfolio/blob/main/index.html) (Portfolio shell), [`assets/css/style.css`](https://github.com/santhoshclx/personalportfolio/blob/main/assets/css/style.css) (Global styles), [`assets/images`](https://github.com/santhoshclx/personalportfolio/tree/main/assets/images) (Image assets)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser app"]
  node_shell["Portfolio shell<br/>HTML entry<br/>[index.html]"]
  node_controller["Client controller<br/>vanilla JS<br/>[script.js]"]
  node_styles["Global styles<br/>CSS theme<br/>[style.css]"]
  node_images["Image assets<br/>static assets"]
  node_fetch{{"Fetch API<br/>browser API"}}
  node_clipboard{{"Clipboard API<br/>browser API"}}
end

subgraph group_content["Static content"]
  node_project_cicd["CI/CD project<br/>project HTML"]
  node_project_ml["Linear regression project<br/>project HTML"]
  node_project_regex["Regex project<br/>project HTML"]
  node_project_portfolio["Portfolio project<br/>project HTML"]
  node_blog_posts["Technical blog posts<br/>blog HTML"]
end

subgraph group_delivery["Delivery"]
  node_static_host["Static host<br/>file delivery"]
  node_workflow["Static-site workflow<br/>GitHub Actions<br/>[static.yml]"]
  node_google_fonts{{"Google Fonts<br/>external presentation"}}
  node_ionicons{{"Ionicons<br/>external presentation"}}
end

node_static_host -->|"serves"| node_shell
node_static_host -->|"serves"| node_controller
node_static_host -->|"serves"| node_styles
node_static_host -->|"serves"| node_images
node_shell -->|"loads"| node_controller
node_shell -->|"applies"| node_styles
node_styles -->|"presents"| node_images
node_controller -->|"uses"| node_fetch
node_controller -->|"uses"| node_clipboard
node_controller -->|"loads"| node_project_cicd
node_controller -->|"loads"| node_project_ml
node_controller -->|"loads"| node_project_regex
node_controller -->|"loads"| node_project_portfolio
node_controller -->|"loads"| node_blog_posts
node_styles -->|"uses"| node_google_fonts
node_shell -->|"uses"| node_ionicons
node_workflow -.->|"deploys or validates"| node_static_host

click node_shell "https://github.com/santhoshclx/personalportfolio/blob/main/index.html"
click node_controller "https://github.com/santhoshclx/personalportfolio/blob/main/assets/js/script.js"
click node_styles "https://github.com/santhoshclx/personalportfolio/blob/main/assets/css/style.css"
click node_images "https://github.com/santhoshclx/personalportfolio/tree/main/assets/images"
click node_project_cicd "https://github.com/santhoshclx/personalportfolio/blob/main/projects/AWSCodePipelineCICD.html"
click node_project_ml "https://github.com/santhoshclx/personalportfolio/blob/main/projects/LinearRegressionFromSCRATCH.html"
click node_project_regex "https://github.com/santhoshclx/personalportfolio/blob/main/projects/PatternMatchingRegEx.html"
click node_project_portfolio "https://github.com/santhoshclx/personalportfolio/blob/main/projects/PersonalPortfolioWebsite.html"
click node_blog_posts "https://github.com/santhoshclx/personalportfolio/blob/main/blogs/RegularExpressionsGuide.html"
click node_workflow "https://github.com/santhoshclx/personalportfolio/blob/main/.github/workflows/static.yml"

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_shell,node_controller,node_styles,node_images,node_fetch,node_clipboard toneBlue
class node_project_cicd,node_project_ml,node_project_regex,node_project_portfolio,node_blog_posts toneAmber
class node_static_host,node_workflow,node_google_fonts,node_ionicons toneMint
```

## Components

### Browser app

Static portfolio runtime.

- [Portfolio shell](https://github.com/santhoshclx/personalportfolio/blob/main/index.html): HTML entry · Canonical sections and navigation targets. · `index.html`
- [Client controller](https://github.com/santhoshclx/personalportfolio/blob/main/assets/js/script.js): vanilla JS · Handles navigation, fetched views, and clipboard actions. · `assets/js/script.js`
- [Global styles](https://github.com/santhoshclx/personalportfolio/blob/main/assets/css/style.css): CSS theme · Responsive layout, components, and theme variables. · `assets/css/style.css`
- [Image assets](https://github.com/santhoshclx/personalportfolio/tree/main/assets/images): static assets · `assets/images`
- **Fetch API**: browser API · Retrieves selected detail content.
- **Clipboard API**: browser API · Copies embedded code examples.

### Static content

Fetched portfolio detail documents.

- [CI/CD project](https://github.com/santhoshclx/personalportfolio/blob/main/projects/AWSCodePipelineCICD.html): project HTML · `projects/AWSCodePipelineCICD.html`
- [Linear regression project](https://github.com/santhoshclx/personalportfolio/blob/main/projects/LinearRegressionFromSCRATCH.html): project HTML · `projects/LinearRegressionFromSCRATCH.html`
- [Regex project](https://github.com/santhoshclx/personalportfolio/blob/main/projects/PatternMatchingRegEx.html): project HTML · `projects/PatternMatchingRegEx.html`
- [Portfolio project](https://github.com/santhoshclx/personalportfolio/blob/main/projects/PersonalPortfolioWebsite.html): project HTML · `projects/PersonalPortfolioWebsite.html`
- [Technical blog posts](https://github.com/santhoshclx/personalportfolio/blob/main/blogs/RegularExpressionsGuide.html): blog HTML · Static posts selected and displayed in the shell. · `blogs/RegularExpressionsGuide.html`

### Delivery

Static hosting and automation.

- **Static host**: file delivery · Serves shell, assets, and content files.
- [Static-site workflow](https://github.com/santhoshclx/personalportfolio/blob/main/.github/workflows/static.yml): GitHub Actions · Automates static-site validation or deployment. · `.github/workflows/static.yml`
- **Google Fonts**: external presentation · Provides Poppins.
- **Ionicons**: external presentation · Provides interface icons.

## Connections

- Static host → Portfolio shell: serves
- Static host → Client controller: serves
- Static host → Global styles: serves
- Static host → Image assets: serves
- Portfolio shell → Client controller: loads
- Portfolio shell → Global styles: applies
- Global styles → Image assets: presents
- Client controller → Fetch API: uses
- Client controller → Clipboard API: uses
- Client controller → CI/CD project: loads
- Client controller → Linear regression project: loads
- Client controller → Regex project: loads
- Client controller → Portfolio project: loads
- Client controller → Technical blog posts: loads
- Global styles → Google Fonts: uses
- Portfolio shell → Ionicons: uses
- Static-site workflow → Static host: deploys or validates