# min23a/personal-web architecture

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

## Overview

1. This repository is a Next.js application built as a content-heavy personal/agency site rather than a generic app. The architecture centers on route-driven pages, reusable UI sections, and data modules that feed static and dynamic-looking marketing pages.

2. The main boundary is the `pages/` directory. It defines the public site routes: home, about, contact, privacy policy, shopify developer pages, freelance/shopify hire pages, blog index and blog detail routes, project index and project detail routes, plus a country-based landing-page route under `shopify-developer-in/[...country].js`.

3. Dynamic content is handled through catch-all routes:
   - `pages/blogs/[...slug].js` for individual blog articles
   - `pages/projects/[...id].js` for project detail pages
   - `pages/shopify-developer-in/[...country].js` for location-specific service pages  
   These routes indicate a content model driven by slugs and page metadata rather than a database-first product model.

4. The `Data/` folder is the content layer. It contains structured page and catalog data such as blogs, projects, menu items, SEO maps, location pages, authority pages, reviews, personal profile data, and hiring details. The pages and components likely read from these modules to render consistent marketing copy and link structures.

5. UI is split between three component tiers:
   - `Components/` for page-level composition and section containers
   - `Components/Section/` for homepage/landing-page sections like hero, skills, projects, blog, reviews, announcements, and location-based blocks
   - `Snippet/` for smaller reusable primitives such as cards, navigation variants, accordions, breadcrumbs, typography, SEO helpers, and social/analytics utilities  
   This suggests a composition-heavy design system where pages are assembled from reusable content blocks.

6. The homepage and landing pages are built from section blocks rather than a single monolithic template. Files like `HeroSection`, `AboutMe`, `ProjectsSec`, `BlogSec`, `UpworkReviews`, `Skills`, and `Ending` show that the site is organized as a sequence of marketing sections with data-fed content.

7. Navigation and layout are centralized. `Components/Layout.js`, `Components/Navigation.js`, `Components/Footer.js`, and mobile/desktop nav snippets indicate a shared shell around all pages, with responsive navigation behavior separated into reusable variants.

8. SEO and structured data are first-class concerns. There are dedicated files for `JsonLd`, `SEO`, `blogSchema`, `SeoSchema`, `seoMap`, and `next-sitemap.config.js`. This points to a site designed for search discoverability, with page-specific metadata and schema generation as a core cross-cutting layer.

9. Analytics, cookie consent, and legal/privacy concerns are also isolated. `CookieConsent`, `Snippet/consent.js`, and `Snippet/Ganalytics.js` suggest tracking is gated by consent. `pages/privacy-policy.js` and `Data/PrivacyPolicy.js` provide the legal content backing that flow.

10. The only explicit backend surface is `pages/api/`. `contact.js` likely handles form submissions, and `hello.js` is the default example endpoint. The presence of `Snippet/mongodb.js` suggests the contact flow may persist or forward data through MongoDB, making contact the main transactional path in an otherwise mostly static site.

11. External data integration appears lightweight. `services/git.js` and the `pages/git.js` route imply an API-backed or fetch-based Git/project showcase, while `Data/upworkReviews.js` and the Upwork review components indicate curated third-party testimonials rendered from local data rather than live integration.

12. Styling and interaction are handled with Tailwind and global CSS. `tailwind.config.js`, `postcss.config.js`, `styles/globals.css`, and `styles/scroll-animate.css` support a utility-first UI with a small amount of custom animation behavior, reinforced by `services/scroll-animate.js`.

13. Static assets are mostly local and presentation-oriented. `public/` contains a PDF resume, `Images/` holds blog imagery, and `logo/` appears to store brand assets. This reinforces that the site is optimized for fast content delivery with minimal runtime dependencies.

14. For an architecture diagram, the cleanest high-level flow is: route page in `pages/` → shared layout/navigation → section/snippet components → content pulled from `Data/` and static assets → optional API route for contact → SEO/consent/analytics applied cross-cutting across the rendered page.

Main entry points: [`Components/Layout.js`](https://github.com/min23a/personal-web/blob/main/Components/Layout.js) (Layout), [`Components/Section`](https://github.com/min23a/personal-web/tree/main/Components/Section) (Sections), [`Data`](https://github.com/min23a/personal-web/tree/main/Data) (Content data), [`pages/index.js`](https://github.com/min23a/personal-web/blob/main/pages/index.js) (Home)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Routes"]
  node_pages_index["Home<br/>route<br/>[index.js]"]
  node_pages_about["About<br/>route<br/>[about.js]"]
  node_pages_contact["Contact<br/>route<br/>[contact.js]"]
  node_pages_blog_index["Blog index<br/>route<br/>[index.js]"]
  node_pages_blog_detail["Blog detail<br/>content route<br/>[[...slug].js]"]
  node_pages_projects_index["Projects index<br/>route<br/>[index.js]"]
  node_pages_project_detail["Project detail<br/>content route<br/>[[...id].js]"]
  node_pages_shopify_developer_in["Location pages<br/>content route<br/>[[...country].js]"]
  node_pages_api_contact["API contact<br/>api route<br/>[contact.js]"]
end

subgraph group_components["Components"]
  node_components_layout["Layout<br/>shell<br/>[Layout.js]"]
  node_components_navigation["Navigation<br/>shell<br/>[Navigation.js]"]
  node_components_footer["Footer<br/>shell<br/>[Footer.js]"]
  node_components_homepage["Homepage<br/>page composer<br/>[Hompage.js]"]
  node_components_blog_renderer["Blog renderer<br/>article view<br/>[BlogRenderer.js]"]
  node_components_hire_page["Hire page<br/>landing composer<br/>[HirePage.js]"]
  node_components_sections["Sections<br/>section library"]
end

subgraph group_snippets["Snippets"]
  node_snippets_ui["UI snippets<br/>primitive library"]
end

subgraph group_data["Content"]
  node_data_content[("Content data<br/>content models")]
  node_data_reviews["Reviews<br/>testimonial data<br/>[upworkReviews.js]"]
end

subgraph group_infra["Infra"]
  node_services_git["Git service<br/>fetch service<br/>[git.js]"]
  node_infra_seo["SEO layer<br/>metadata<br/>[SEO.js]"]
  node_infra_consent["Consent<br/>privacy gate<br/>[consent.js]"]
  node_infra_analytics["Analytics<br/>tracking<br/>[Ganalytics.js]"]
  node_infra_styles["Styles<br/>styling<br/>[globals.css]"]
end

subgraph group_assets["Assets"]
  node_assets_public["Assets<br/>static media"]
end

node_pages_index -->|"wraps"| node_components_layout
node_pages_about -->|"wraps"| node_components_layout
node_pages_contact -->|"wraps"| node_components_layout
node_pages_blog_index -->|"wraps"| node_components_layout
node_pages_blog_detail -->|"wraps"| node_components_layout
node_pages_projects_index -->|"wraps"| node_components_layout
node_pages_project_detail -->|"wraps"| node_components_layout
node_pages_shopify_developer_in -->|"wraps"| node_components_layout
node_components_layout -->|"includes"| node_components_navigation
node_components_layout -->|"includes"| node_components_footer
node_components_homepage -->|"assembles"| node_components_sections
node_components_hire_page -->|"assembles"| node_components_sections
node_components_blog_renderer -->|"uses"| node_snippets_ui
node_components_sections -->|"uses"| node_snippets_ui
node_pages_index -->|"renders"| node_components_homepage
node_pages_blog_detail -->|"renders"| node_components_blog_renderer
node_pages_projects_index -->|"loads"| node_services_git
node_pages_project_detail -->|"loads"| node_data_content
node_pages_blog_index -->|"loads"| node_data_content
node_pages_blog_detail -->|"loads"| node_data_content
node_pages_shopify_developer_in -->|"loads"| node_data_content
node_components_sections -->|"feeds from"| node_data_content
node_components_sections -->|"shows"| node_data_reviews
node_pages_api_contact -->|"stores"| node_data_content
node_pages_api_contact -->|"respects"| node_infra_consent
node_pages_index -->|"annotated by"| node_infra_seo
node_pages_blog_detail -->|"annotated by"| node_infra_seo
node_components_homepage -->|"annotated by"| node_infra_seo
node_infra_seo -->|"coordinates"| node_infra_analytics
node_infra_consent -->|"gates"| node_infra_analytics
node_pages_index -->|"styled by"| node_infra_styles
node_components_sections -->|"uses"| node_assets_public

click node_pages_index "https://github.com/min23a/personal-web/blob/main/pages/index.js"
click node_pages_about "https://github.com/min23a/personal-web/blob/main/pages/about.js"
click node_pages_contact "https://github.com/min23a/personal-web/blob/main/pages/contact.js"
click node_pages_blog_index "https://github.com/min23a/personal-web/blob/main/pages/blogs/index.js"
click node_pages_blog_detail "https://github.com/min23a/personal-web/blob/main/pages/blogs/[...slug].js"
click node_pages_projects_index "https://github.com/min23a/personal-web/blob/main/pages/projects/index.js"
click node_pages_project_detail "https://github.com/min23a/personal-web/blob/main/pages/projects/[...id].js"
click node_pages_shopify_developer_in "https://github.com/min23a/personal-web/blob/main/pages/shopify-developer-in/[...country].js"
click node_pages_api_contact "https://github.com/min23a/personal-web/blob/main/pages/api/contact.js"
click node_components_layout "https://github.com/min23a/personal-web/blob/main/Components/Layout.js"
click node_components_navigation "https://github.com/min23a/personal-web/blob/main/Components/Navigation.js"
click node_components_footer "https://github.com/min23a/personal-web/blob/main/Components/Footer.js"
click node_components_homepage "https://github.com/min23a/personal-web/blob/main/Components/Hompage.js"
click node_components_blog_renderer "https://github.com/min23a/personal-web/blob/main/Components/BlogRenderer.js"
click node_components_hire_page "https://github.com/min23a/personal-web/blob/main/Components/HirePage.js"
click node_components_sections "https://github.com/min23a/personal-web/tree/main/Components/Section"
click node_snippets_ui "https://github.com/min23a/personal-web/tree/main/Snippet"
click node_data_content "https://github.com/min23a/personal-web/tree/main/Data"
click node_data_reviews "https://github.com/min23a/personal-web/blob/main/Data/upworkReviews.js"
click node_services_git "https://github.com/min23a/personal-web/blob/main/services/git.js"
click node_infra_seo "https://github.com/min23a/personal-web/blob/main/Snippet/SEO.js"
click node_infra_consent "https://github.com/min23a/personal-web/blob/main/Snippet/consent.js"
click node_infra_analytics "https://github.com/min23a/personal-web/blob/main/Snippet/Ganalytics.js"
click node_infra_styles "https://github.com/min23a/personal-web/blob/main/styles/globals.css"
click node_assets_public "https://github.com/min23a/personal-web/blob/main/public/Md Minhazul Abedin.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_pages_index,node_pages_about,node_pages_contact,node_pages_blog_index,node_pages_blog_detail,node_pages_projects_index,node_pages_project_detail,node_pages_shopify_developer_in,node_pages_api_contact toneBlue
class node_components_layout,node_components_navigation,node_components_footer,node_components_homepage,node_components_blog_renderer,node_components_hire_page,node_components_sections toneAmber
class node_snippets_ui toneMint
class node_data_content,node_data_reviews toneRose
class node_services_git,node_infra_seo,node_infra_consent,node_infra_analytics,node_infra_styles toneIndigo
class node_assets_public toneTeal
```

## Components

### Routes

Public site routes and API endpoints

- [Home](https://github.com/min23a/personal-web/blob/main/pages/index.js): route · Landing page route · `pages/index.js`
- [About](https://github.com/min23a/personal-web/blob/main/pages/about.js): route · About page route · `pages/about.js`
- [Contact](https://github.com/min23a/personal-web/blob/main/pages/contact.js): route · Contact page route · `pages/contact.js`
- [Blog index](https://github.com/min23a/personal-web/blob/main/pages/blogs/index.js): route · Blog listing route · `pages/blogs/index.js`
- [Blog detail](https://github.com/min23a/personal-web/blob/main/pages/blogs/[...slug].js): content route · Catch-all blog article route · `pages/blogs/[...slug].js`
- [Projects index](https://github.com/min23a/personal-web/blob/main/pages/projects/index.js): route · Project listing route · `pages/projects/index.js`
- [Project detail](https://github.com/min23a/personal-web/blob/main/pages/projects/[...id].js): content route · Catch-all project route · `pages/projects/[...id].js`
- [Location pages](https://github.com/min23a/personal-web/blob/main/pages/shopify-developer-in/[...country].js): content route · Country-specific Shopify landing pages · `pages/shopify-developer-in/[...country].js`
- [API contact](https://github.com/min23a/personal-web/blob/main/pages/api/contact.js): api route · Contact form submission endpoint · `pages/api/contact.js`

### Components

Page composition and section-level UI

- [Layout](https://github.com/min23a/personal-web/blob/main/Components/Layout.js): shell · Shared page shell · `Components/Layout.js`
- [Navigation](https://github.com/min23a/personal-web/blob/main/Components/Navigation.js): shell · Primary site navigation · `Components/Navigation.js`
- [Footer](https://github.com/min23a/personal-web/blob/main/Components/Footer.js): shell · Shared footer area · `Components/Footer.js`
- [Homepage](https://github.com/min23a/personal-web/blob/main/Components/Hompage.js): page composer · Home page composition · `Components/Hompage.js`
- [Blog renderer](https://github.com/min23a/personal-web/blob/main/Components/BlogRenderer.js): article view · Renders blog content pages · `Components/BlogRenderer.js`
- [Hire page](https://github.com/min23a/personal-web/blob/main/Components/HirePage.js): landing composer · Hire/service page composition · `Components/HirePage.js`
- [Sections](https://github.com/min23a/personal-web/tree/main/Components/Section): section library · Homepage and landing page sections · `Components/Section`

### Snippets

Reusable UI primitives and utilities

- [UI snippets](https://github.com/min23a/personal-web/tree/main/Snippet): primitive library · Reusable cards, nav variants, accordions, breadcrumbs, and typography · `Snippet`

### Content

Structured content and site data modules

- [Content data](https://github.com/min23a/personal-web/tree/main/Data): content models · Blogs, projects, menus, SEO maps, and page content · `Data`
- [Reviews](https://github.com/min23a/personal-web/blob/main/Data/upworkReviews.js): testimonial data · Curated third-party reviews and social proof · `Data/upworkReviews.js`

### Infra

SEO, analytics, styling, and services

- [Git service](https://github.com/min23a/personal-web/blob/main/services/git.js): fetch service · Repository/project data integration · `services/git.js`
- [SEO layer](https://github.com/min23a/personal-web/blob/main/Snippet/SEO.js): metadata · SEO, schemas, sitemap, and crawl hints · `Snippet/SEO.js`
- [Consent](https://github.com/min23a/personal-web/blob/main/Snippet/consent.js): privacy gate · Cookie consent and analytics gating · `Snippet/consent.js`
- [Analytics](https://github.com/min23a/personal-web/blob/main/Snippet/Ganalytics.js): tracking · Google analytics integration · `Snippet/Ganalytics.js`
- [Styles](https://github.com/min23a/personal-web/blob/main/styles/globals.css): styling · Tailwind and global CSS foundation · `styles/globals.css`

### Assets

Static media and downloadable files

- [Assets](https://github.com/min23a/personal-web/blob/HEAD/public/Md%20Minhazul%20Abedin.pdf): static media · Public downloadable and visual assets · `public/Md Minhazul Abedin.pdf`

## Connections

- Home → Layout: wraps · Home route uses the shared shell
- About → Layout: wraps · About route uses the shared shell
- Contact → Layout: wraps · Contact route uses the shared shell
- Blog index → Layout: wraps · Blog listing uses the shared shell
- Blog detail → Layout: wraps · Blog detail uses the shared shell
- Projects index → Layout: wraps · Project listing uses the shared shell
- Project detail → Layout: wraps · Project detail uses the shared shell
- Location pages → Layout: wraps · Location landing pages use the shared shell
- Layout → Navigation: includes · Shared shell includes navigation
- Layout → Footer: includes · Shared shell includes footer
- Homepage → Sections: assembles · Homepage is built from section blocks
- Hire page → Sections: assembles · Hire pages reuse section blocks
- Blog renderer → UI snippets: uses · Article rendering relies on reusable primitives
- Sections → UI snippets: uses · Sections are composed from shared UI primitives
- Home → Homepage: renders · Home route delegates to homepage composition
- Blog detail → Blog renderer: renders · Catch-all blog route renders articles
- Projects index → Git service: loads · Project index can be backed by git/project service data
- Project detail → Content data: loads · Project detail uses project slug/content data
- Blog index → Content data: loads · Blog index uses blog content data
- Blog detail → Content data: loads · Blog detail uses slug-driven content data
- Location pages → Content data: loads · Location pages use country/page metadata
- Sections → Content data: feeds from · Sections are populated by structured content modules
- Sections → Reviews: shows · Social proof section uses curated reviews
- API contact → Content data: stores · Contact submissions connect to site data or outbound handling
- API contact → Consent: respects · Contact and tracking flows are consent-aware
- Home → SEO layer: annotated by · Pages are SEO annotated
- Blog detail → SEO layer: annotated by · Article routes emit metadata and schemas
- Homepage → SEO layer: annotated by · Landing pages include SEO helpers
- SEO layer → Analytics: coordinates · SEO and tracking sit in the same cross-cutting layer
- Consent → Analytics: gates · Analytics runs behind consent
- Home → Styles: styled by · Routes rely on the global styling base
- Sections → Assets: uses · Sections reference local media and downloadable assets