# shajithkhan-dev/shajithkhan-dev.github.io architecture

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

- Interactive diagram: https://gitdiagram.com/shajithkhan-dev/shajithkhan-dev.github.io
- Repository: https://github.com/shajithkhan-dev/shajithkhan-dev.github.io

## Overview

This is a static personal data-analyst portfolio. A visitor browses the portfolio, explores skills and projects, and can access contact and resume options. The README documents responsive layout, theme switching, project cards, and contact integration; the sampled JavaScript shows skill-card interaction and mobile navigation behavior. HTML, CSS, and the resume asset are present in the tree, but their contents were not sampled, so implementation-level links for those features rely on README documentation.

Main entry points: [`index.html`](https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/index.html) (Portfolio page), [`css/style.css`](https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/css/style.css) (Responsive styling), [`js/script.js`](https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/js/script.js) (Skill-card interaction), [`assets/Resume/Mohammed_Resume_2026.pdf`](https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/assets/Resume/Mohammed_Resume_2026.pdf) (Resume download)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio site"]
  node_portfolio["Portfolio page<br/>[index.html]"]
  node_profile["Profile and experience<br/>[index.html]"]
  node_skills["Skills showcase<br/>[index.html]"]
  node_projects["Project showcase<br/>[index.html]"]
  node_contact["Contact form<br/>[index.html]"]
  node_responsive["Responsive styling<br/>[style.css]"]
end

subgraph group_interaction["Page interactions"]
  node_skill_interaction["Skill-card interaction<br/>[script.js]"]
  node_navigation["Mobile navigation<br/>[script.js]"]
  node_theme["Theme toggle<br/>[index.html]"]
end

subgraph group_assets["Portfolio assets"]
  node_resume["Resume download"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_portfolio
node_portfolio -->|"presents"| node_profile
node_portfolio -->|"presents"| node_skills
node_portfolio -->|"presents"| node_projects
node_portfolio -->|"presents"| node_contact
node_portfolio -->|"uses"| node_responsive
node_skills -->|"responds to"| node_skill_interaction
node_portfolio -->|"handles links with"| node_navigation
node_portfolio -->|"offers"| node_theme
node_portfolio -->|"offers download"| node_resume

click node_portfolio "https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/index.html"
click node_profile "https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/index.html"
click node_skills "https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/index.html"
click node_projects "https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/index.html"
click node_contact "https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/index.html"
click node_responsive "https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/css/style.css"
click node_skill_interaction "https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/js/script.js"
click node_navigation "https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/js/script.js"
click node_theme "https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/index.html"
click node_resume "https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/assets/Resume/Mohammed_Resume_2026.pdf"

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_profile,node_skills,node_projects,node_contact,node_responsive toneBlue
class node_skill_interaction,node_navigation,node_theme toneAmber
class node_resume toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio site

- [Portfolio page](https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/index.html): `index.html`
- [Profile and experience](https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/index.html): `index.html`
- [Skills showcase](https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/index.html): `index.html`
- [Project showcase](https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/index.html): `index.html`
- [Contact form](https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/index.html): `index.html`
- [Responsive styling](https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/css/style.css): `css/style.css`

### Page interactions

- [Skill-card interaction](https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/js/script.js): `js/script.js`
- [Mobile navigation](https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/js/script.js): `js/script.js`
- [Theme toggle](https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/index.html): `index.html`

### Portfolio assets

- [Resume download](https://github.com/shajithkhan-dev/shajithkhan-dev.github.io/blob/main/assets/Resume/Mohammed_Resume_2026.pdf): `assets/Resume/Mohammed_Resume_2026.pdf`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: opens (evidence: `README.md`)
- Portfolio page → Profile and experience: presents (evidence: `README.md`)
- Portfolio page → Skills showcase: presents (evidence: `README.md`)
- Portfolio page → Project showcase: presents (evidence: `README.md`)
- Portfolio page → Contact form: presents (evidence: `README.md`)
- Portfolio page → Responsive styling: uses (evidence: `README.md`)
- Skills showcase → Skill-card interaction: responds to (evidence: `js/script.js`)
- Portfolio page → Mobile navigation: handles links with (evidence: `js/script.js`)
- Portfolio page → Theme toggle: offers (evidence: `README.md`)
- Portfolio page → Resume download: offers download (evidence: `README.md`)