# mdmarufhossen71/website architecture

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

- Interactive diagram: https://gitdiagram.com/mdmarufhossen71/website
- Repository: https://github.com/mdmarufhossen71/website

## Overview

1. **Overall shape**
   - This is a **static, multi-section personal portfolio site** rather than a server-rendered app.
   - The main runtime is the browser; pages are plain HTML/CSS/JS and are deployed as a static site with a custom domain (`CNAME`) and GitHub Pages-style artifacts (`dist/`).

2. **Primary site shell**
   - The root-level pages (`index.html`, `404.html`, `thank-you.html`, `about-this-website.html`, `faq.html`, `privacy-policy.html`, `terms-and-conditions.html`, `disclaimer.html`, `security.html`) form the core website boundary.
   - These pages provide the portfolio, legal/utility pages, and user journey endpoints.

3. **Portfolio/homepage layer**
   - The homepage is the main entry point for the personal brand: services, credentials, contact paths, and visual presentation.
   - Shared presentation assets live in `Design/style.css` and top-level `JavaScript/` files, indicating the homepage uses a dedicated style/script set separate from the tools/games subsystems.

4. **Blog subsystem**
   - `blog/index.html` and the many files in `blog/posts/` form a **static content publishing area**.
   - Blog styling is isolated in `blog/assets/css/blog.css`, with its own images folder, so blog pages are a distinct content boundary optimized for SEO and long-form articles.

5. **Tools subsystem**
   - `tools/index.html` is the tools hub, and `tools/apps/*.html` are individual utility pages such as calculator, color picker, image compressor, text counter, and unit converter.
   - The shared behavior is centralized in `tools/js/tools-app.js` and `tools/js/tools-implementations.js`, with common layout pieces in `assets/includes/tools-games-header.html` and `assets/includes/tools-games-footer.html`.

6. **Games subsystem**
   - `games/index.html` is the game portal, with each game isolated in its own folder (`snake`, `memory-matching`, `tic-tac-toe-ai`, `space-shooter`, etc.).
   - Shared game infrastructure lives in `games/js/games-app.js`, `games/js/games-implementations.js`, and `games/shared-game.css`, which suggests a hub-and-spoke pattern: one launcher, multiple self-contained mini-apps.

7. **Client-side behavior and interactions**
   - Global UI behavior is handled by browser JS files such as `JavaScript/script.js`, `JavaScript/floating-bubbles.js`, `assets/js/smart-navbar.js`, and `assets/js/useSmartNavbar.js`.
   - These scripts support navigation, motion/animation, and interactive effects; there is no evidence of a backend app server in the runtime path.

8. **Analytics, ads, and tracking**
   - `JavaScript/analytics.js`, `ads.txt`, and the README’s GA4/GTM references show the site is instrumented for **traffic analytics and monetization**.
   - This is a front-end concern: pages emit tracking events and expose ad verification metadata, but the core content remains static.

9. **SEO and publishing infrastructure**
   - `sitemap.xml`, `robots.txt`, `site.webmanifest`, `404.html`, and `CNAME` are the key site-ops files that shape discovery, indexing, installability, and domain routing.
   - The presence of a Google site-verification-style text file and the manifest indicates the site is optimized for search visibility and PWA-style metadata, not for authenticated application workflows.

10. **Build and deployment boundary**
   - `vite.config.js`, `package.json`, `package-lock.json`, and the committed `dist/` directory indicate a **build step exists**, but the deployed artifact is still static HTML/CSS/JS.
   - In practice, the build pipeline likely packages assets and outputs production-ready files; the hosting layer then serves them directly without backend compute.

11. **External/service boundary**
   - The README mentions Google Fonts, Font Awesome, Google Analytics, Google Tag Manager, and Google Translate, so the site depends on several third-party client-side services.
   - These are used for typography, icons, analytics, and multilingual presentation; they are not core application logic.

12. **Data/content model**
   - Most content is file-based: each page or post is an individual HTML document, which keeps routing simple and makes SEO-friendly URLs straightforward.
   - The `supabase/migrations/20260129161805_create_blog_structure.sql` file suggests a future or auxiliary database-backed blog structure, but the repository as shown is still primarily static and file-driven.

Main entry points: [`index.html`](https://github.com/mdmarufhossen71/website/blob/main/index.html) (Home), [`blog/index.html`](https://github.com/mdmarufhossen71/website/blob/main/blog/index.html) (Blog), [`tools/index.html`](https://github.com/mdmarufhossen71/website/blob/main/tools/index.html) (Tools), [`games/index.html`](https://github.com/mdmarufhossen71/website/blob/main/games/index.html) (Games)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site_shell["Site shell"]
  node_home["Home<br/>static page<br/>[index.html]"]
  node_utility_pages["Utility pages<br/>static pages"]
  node_error_page["404<br/>error page<br/>[404.html]"]
  node_site_scripts["Site scripts<br/>client behavior<br/>[script.js]"]
  node_nav_assets["Nav assets<br/>ui scripts<br/>[smart-navbar.js]"]
  node_main_styles["Main styles<br/>[style.css]"]
end

subgraph group_content["Content areas"]
  node_blog_hub["Blog<br/>content hub<br/>[index.html]"]
  node_blog_posts["Posts<br/>article pages"]
  node_blog_style["Blog CSS<br/>styles<br/>[blog.css]"]
  node_tools_hub["Tools<br/>utility hub<br/>[index.html]"]
  node_tool_apps["Tool pages<br/>mini apps<br/>[calculator.html]"]
  node_tools_logic["Tools logic<br/>shared scripts<br/>[tools-app.js]"]
  node_games_hub["Games<br/>game hub<br/>[index.html]"]
  node_game_titles["Game titles<br/>game apps<br/>[index.html]"]
  node_games_logic["Game logic<br/>shared scripts<br/>[games-app.js]"]
end

subgraph group_infra["Infra"]
  node_build_output["Dist build<br/>static artifact<br/>[index.html]"]
  node_site_ops["Site ops<br/>seo/deploy<br/>[sitemap.xml]"]
  node_build_config["Build config<br/>tooling<br/>[vite.config.js]"]
  node_external_services(("External services<br/>third-party"))
  node_database_migration["Blog schema<br/>db migration"]
end

node_home -->|"loads"| node_site_scripts
node_home -->|"styles"| node_main_styles
node_home -->|"uses"| node_nav_assets
node_home -->|"links"| node_utility_pages
node_home -->|"links"| node_blog_hub
node_home -->|"links"| node_tools_hub
node_home -->|"links"| node_games_hub
node_utility_pages -.->|"supports"| node_error_page
node_blog_hub -->|"contains"| node_blog_posts
node_blog_hub -->|"uses"| node_blog_style
node_tools_hub -->|"contains"| node_tool_apps
node_tools_hub -->|"uses"| node_tools_logic
node_tool_apps -->|"depends on"| node_tools_logic
node_games_hub -->|"contains"| node_game_titles
node_games_hub -->|"uses"| node_games_logic
node_game_titles -->|"depends on"| node_games_logic
node_home -->|"depends on"| node_external_services
node_blog_hub -.->|"depends on"| node_external_services
node_tools_hub -.->|"depends on"| node_external_services
node_games_hub -.->|"depends on"| node_external_services
node_build_config -->|"produces"| node_build_output
node_site_ops -->|"serves"| node_build_output
node_database_migration -.->|"supports"| node_blog_hub

click node_home "https://github.com/mdmarufhossen71/website/blob/main/index.html"
click node_error_page "https://github.com/mdmarufhossen71/website/blob/main/404.html"
click node_blog_hub "https://github.com/mdmarufhossen71/website/blob/main/blog/index.html"
click node_blog_posts "https://github.com/mdmarufhossen71/website/blob/main/blog/posts/attract-high-paying-clients-portfolio.html"
click node_blog_style "https://github.com/mdmarufhossen71/website/blob/main/blog/assets/css/blog.css"
click node_tools_hub "https://github.com/mdmarufhossen71/website/blob/main/tools/index.html"
click node_tool_apps "https://github.com/mdmarufhossen71/website/blob/main/tools/apps/calculator.html"
click node_tools_logic "https://github.com/mdmarufhossen71/website/blob/main/tools/js/tools-app.js"
click node_games_hub "https://github.com/mdmarufhossen71/website/blob/main/games/index.html"
click node_game_titles "https://github.com/mdmarufhossen71/website/blob/main/games/modern-snake/index.html"
click node_games_logic "https://github.com/mdmarufhossen71/website/blob/main/games/js/games-app.js"
click node_site_scripts "https://github.com/mdmarufhossen71/website/blob/main/JavaScript/script.js"
click node_nav_assets "https://github.com/mdmarufhossen71/website/blob/main/assets/js/smart-navbar.js"
click node_main_styles "https://github.com/mdmarufhossen71/website/blob/main/Design/style.css"
click node_build_output "https://github.com/mdmarufhossen71/website/blob/main/dist/index.html"
click node_site_ops "https://github.com/mdmarufhossen71/website/blob/main/sitemap.xml"
click node_build_config "https://github.com/mdmarufhossen71/website/blob/main/vite.config.js"
click node_database_migration "https://github.com/mdmarufhossen71/website/blob/main/supabase/migrations/20260129161805_create_blog_structure.sql"

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_utility_pages,node_error_page,node_site_scripts,node_nav_assets,node_main_styles toneBlue
class node_blog_hub,node_blog_posts,node_blog_style,node_tools_hub,node_tool_apps,node_tools_logic,node_games_hub,node_game_titles,node_games_logic toneAmber
class node_build_output,node_site_ops,node_build_config,node_external_services,node_database_migration toneMint
```

## Components

### Site shell

Core static pages and brand entrypoints

- [Home](https://github.com/mdmarufhossen71/website/blob/main/index.html): static page · Main portfolio entry page · `index.html`
- **Utility pages**: static pages · About, FAQ, privacy, terms, disclaimer, security, and thank-you pages
- [404](https://github.com/mdmarufhossen71/website/blob/main/404.html): error page · Fallback page for missing routes · `404.html`
- [Site scripts](https://github.com/mdmarufhossen71/website/blob/main/JavaScript/script.js): client behavior · Global browser interactions and animations · `JavaScript/script.js`
- [Nav assets](https://github.com/mdmarufhossen71/website/blob/main/assets/js/smart-navbar.js): ui scripts · Shared navbar and layout scripts · `assets/js/smart-navbar.js`
- [Main styles](https://github.com/mdmarufhossen71/website/blob/main/Design/style.css): styles · Primary site styling for the portfolio shell · `Design/style.css`

### Content areas

Blog, tools, and games sections

- [Blog](https://github.com/mdmarufhossen71/website/blob/main/blog/index.html): content hub · Publishing area for articles and SEO content · `blog/index.html`
- [Posts](https://github.com/mdmarufhossen71/website/blob/main/blog/posts/attract-high-paying-clients-portfolio.html): article pages · Individual long-form blog posts · `blog/posts/attract-high-paying-clients-portfolio.html`
- [Blog CSS](https://github.com/mdmarufhossen71/website/blob/main/blog/assets/css/blog.css): styles · Dedicated blog styling · `blog/assets/css/blog.css`
- [Tools](https://github.com/mdmarufhossen71/website/blob/main/tools/index.html): utility hub · Landing page for browser tools · `tools/index.html`
- [Tool pages](https://github.com/mdmarufhossen71/website/blob/main/tools/apps/calculator.html): mini apps · Standalone tool pages like calculator and converters · `tools/apps/calculator.html`
- [Tools logic](https://github.com/mdmarufhossen71/website/blob/main/tools/js/tools-app.js): shared scripts · Shared tool behavior and implementations · `tools/js/tools-app.js`
- [Games](https://github.com/mdmarufhossen71/website/blob/main/games/index.html): game hub · Portal for browser games · `games/index.html`
- [Game titles](https://github.com/mdmarufhossen71/website/blob/main/games/modern-snake/index.html): game apps · Self-contained games such as snake, chess, and tic-tac-toe · `games/modern-snake/index.html`
- [Game logic](https://github.com/mdmarufhossen71/website/blob/main/games/js/games-app.js): shared scripts · Shared launcher and game implementations · `games/js/games-app.js`

### Infra

Build, deployment, and site operations

- [Dist build](https://github.com/mdmarufhossen71/website/blob/main/dist/index.html): static artifact · Committed production output for deployment · `dist/index.html`
- [Site ops](https://github.com/mdmarufhossen71/website/blob/main/sitemap.xml): seo/deploy · Routing, indexing, manifest, domain, and verification files · `sitemap.xml`
- [Build config](https://github.com/mdmarufhossen71/website/blob/main/vite.config.js): tooling · Vite/package setup for producing static assets · `vite.config.js`
- **External services**: third-party · Fonts, icons, analytics, tagging, and translation services
- [Blog schema](https://github.com/mdmarufhossen71/website/blob/main/supabase/migrations/20260129161805_create_blog_structure.sql): db migration · Supabase migration for future or auxiliary blog structure · `supabase/migrations/20260129161805_create_blog_structure.sql`

## Connections

- Home → Site scripts: loads · Homepage uses global browser behavior
- Home → Main styles: styles · Homepage presentation layer
- Home → Nav assets: uses · Shared navigation and layout scripts
- Home → Utility pages: links · Primary site navigation reaches utility pages
- Home → Blog: links · Portfolio points into the blog
- Home → Tools: links · Portfolio points into tools
- Home → Games: links · Portfolio points into games
- Utility pages → 404: supports · Utility and fallback routes are part of the shell
- Blog → Posts: contains · Blog hub organizes individual posts
- Blog → Blog CSS: uses · Blog section has isolated styling
- Tools → Tool pages: contains · Tools hub launches individual utilities
- Tools → Tools logic: uses · Shared behavior powers the tool pages
- Tool pages → Tools logic: depends on · Each tool page reuses common logic
- Games → Game titles: contains · Games portal links to individual games
- Games → Game logic: uses · Shared launcher and implementations
- Game titles → Game logic: depends on · Game pages reuse common infrastructure
- Home → External services: depends on · Fonts, analytics, and embeds are loaded client-side
- Blog → External services: depends on · Blog pages may use third-party client services
- Tools → External services: depends on · Tools can rely on external client services
- Games → External services: depends on · Games can rely on external client services
- Build config → Dist build: produces · Build tooling emits the deployed static artifact
- Site ops → Dist build: serves · SEO and deploy files shape the published site
- Blog schema → Blog: supports · Database schema suggests a blog data model boundary