# mdirfanulislam/c251117_portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/mdirfanulislam/c251117_portfolio
- Repository: https://github.com/mdirfanulislam/c251117_portfolio

## Overview

This is a static personal portfolio: visitors browse the owner’s profile and work, access a resume and contact links, and can submit a message through the contact form. The page’s major sections are documented in the README; JavaScript handles navigation state and posts form data to the documented Google Sheets integration. The HTML was not excerpted, so page-to-section composition follows the README rather than inspected markup.

Main entry points: [`index.html`](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/index.html) (Portfolio page), [`styles/projects.css`](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/projects.css) (Projects), [`styles/publication.css`](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/publication.css) (Publications), [`scripts/script.js`](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/scripts/script.js) (Contact submission)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio content"]
  node_page["Portfolio page<br/>[index.html]"]
  node_home["Home<br/>[home.css]"]
  node_about["About<br/>[about.css]"]
  node_overview["Experience<br/>[overview.css]"]
  node_qualification["Education<br/>[qualification.css]"]
  node_projects["Projects<br/>[projects.css]"]
  node_achievements["Achievements<br/>[achievement.css]"]
  node_publications["Publications<br/>[publication.css]"]
  node_blogs["Blogs<br/>[index.html]"]
  node_contact["Contact<br/>[contact.css]"]
end

subgraph group_interaction["Browser interactions"]
  node_navigation["Navigation state<br/>[script.js]"]
  node_form["Contact submission<br/>[script.js]"]
end

subgraph group_assets["Portfolio assets"]
  node_resume["Resume file"]
  node_project_images["Project images"]
  node_publication_images["Publication images"]
end

node_visitor(("Visitor"))
node_google_sheet{{"Google Sheets endpoint"}}

node_visitor -->|"browses"| node_page
node_page -->|"presents"| node_home
node_page -->|"presents"| node_about
node_page -->|"presents"| node_overview
node_page -->|"presents"| node_qualification
node_page -->|"presents"| node_projects
node_page -->|"presents"| node_achievements
node_page -->|"presents"| node_publications
node_page -->|"presents"| node_blogs
node_page -->|"presents"| node_contact
node_visitor -->|"downloads"| node_resume
node_projects -->|"shows previews"| node_project_images
node_publications -->|"shows previews"| node_publication_images
node_navigation -->|"updates hash state"| node_page
node_visitor -->|"submits message"| node_form
node_form -->|"POSTs form data"| node_google_sheet

click node_page "https://github.com/mdirfanulislam/c251117_portfolio/blob/main/index.html"
click node_home "https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/home.css"
click node_about "https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/about.css"
click node_overview "https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/overview.css"
click node_qualification "https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/qualification.css"
click node_projects "https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/projects.css"
click node_achievements "https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/achievement.css"
click node_publications "https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/publication.css"
click node_blogs "https://github.com/mdirfanulislam/c251117_portfolio/blob/main/index.html"
click node_contact "https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/contact.css"
click node_navigation "https://github.com/mdirfanulislam/c251117_portfolio/blob/main/scripts/script.js"
click node_form "https://github.com/mdirfanulislam/c251117_portfolio/blob/main/scripts/script.js"
click node_resume "https://github.com/mdirfanulislam/c251117_portfolio/blob/main/assets/resume/Mohammad_Irfanul_Islam_Resume.pdf"
click node_project_images "https://github.com/mdirfanulislam/c251117_portfolio/tree/main/assets/projects"
click node_publication_images "https://github.com/mdirfanulislam/c251117_portfolio/tree/main/assets/publications"

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_home,node_about,node_overview,node_qualification,node_projects,node_achievements,node_publications,node_blogs,node_contact toneBlue
class node_navigation,node_form toneAmber
class node_resume,node_project_images,node_publication_images toneMint
class node_visitor,node_google_sheet toneIndigo
```

## Components

### Portfolio content

- [Portfolio page](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/index.html): `index.html`
- [Home](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/home.css): `styles/home.css`
- [About](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/about.css): `styles/about.css`
- [Experience](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/overview.css): `styles/overview.css`
- [Education](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/qualification.css): `styles/qualification.css`
- [Projects](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/projects.css): `styles/projects.css`
- [Achievements](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/achievement.css): `styles/achievement.css`
- [Publications](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/publication.css): `styles/publication.css`
- [Blogs](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/index.html): `index.html`
- [Contact](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/styles/contact.css): `styles/contact.css`

### Browser interactions

- [Navigation state](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/scripts/script.js): `scripts/script.js`
- [Contact submission](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/scripts/script.js): `scripts/script.js`

### Portfolio assets

- [Resume file](https://github.com/mdirfanulislam/c251117_portfolio/blob/main/assets/resume/Mohammad_Irfanul_Islam_Resume.pdf): `assets/resume/Mohammad_Irfanul_Islam_Resume.pdf`
- [Project images](https://github.com/mdirfanulislam/c251117_portfolio/tree/main/assets/projects): `assets/projects`
- [Publication images](https://github.com/mdirfanulislam/c251117_portfolio/tree/main/assets/publications): `assets/publications`

### Other components

- **Visitor**
- **Google Sheets endpoint**

## Connections

- Visitor → Portfolio page: browses (evidence: `README.md`)
- Portfolio page → Home: presents (evidence: `README.md`)
- Portfolio page → About: presents (evidence: `README.md`)
- Portfolio page → Experience: presents (evidence: `README.md`)
- Portfolio page → Education: presents (evidence: `README.md`)
- Portfolio page → Projects: presents (evidence: `README.md`)
- Portfolio page → Achievements: presents (evidence: `README.md`)
- Portfolio page → Publications: presents (evidence: `README.md`)
- Portfolio page → Blogs: presents (evidence: `README.md`)
- Portfolio page → Contact: presents (evidence: `README.md`)
- Visitor → Resume file: downloads (evidence: `README.md`)
- Projects → Project images: shows previews (evidence: `README.md`)
- Publications → Publication images: shows previews (evidence: `README.md`)
- Navigation state → Portfolio page: updates hash state (evidence: `scripts/script.js`)
- Visitor → Contact submission: submits message (evidence: `README.md`)
- Contact submission → Google Sheets endpoint: POSTs form data (evidence: `scripts/script.js`)