# sabbir-offc/sabbir1dev architecture

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

## Overview

1. This is a Next.js App Router site, likely a portfolio/personal site rather than a data-driven product. The repository is organized around routes in `src/app`, reusable UI in `src/components`, and content/data in `src/data`.

2. The top-level route structure is simple and mostly page-based: `/` (`src/app/page.tsx`), `/about`, `/projects`, `/projects/[slug]`, and `/contact`. Each route has its own `page.tsx`, with the projects detail route using a dynamic segment for per-project pages.

3. `src/app/layout.tsx` is the global shell. It typically owns the HTML/body structure and wraps the app-wide providers from `src/app/providers.tsx`, which is where client-only concerns such as theme state or other context would be isolated from server-rendered layout code.

4. The home page is composed from many sectional components under `src/components/home`. This suggests a landing page assembled from independent blocks such as hero, highlights, skills, experience, project previews, blog preview, about summary, CTA, and scroll progress rather than one monolithic page component.

5. The projects area is data-backed and appears to be the main structured content flow in the app. `src/data/projects.ts` is the source of truth, consumed by `src/app/projects/ProjectsGrid.tsx`, `src/components/ProjectTeaser.tsx`, and `src/app/projects/[slug]/page.tsx` to render both the listing and individual project pages.

6. The dynamic project detail route is the main content boundary. It likely resolves a slug from the URL, looks up the corresponding project in the local data module, and renders a detail view from that static dataset. This means the app has no obvious backend API or database dependency for projects.

7. The contact section is implemented as a dedicated route plus a specialized form component: `src/app/contact/page.tsx` and `src/app/contact/ContactFormUltra.tsx`. That separation implies the form is a distinct interactive client-side subtree, likely handling validation and submission behavior independently from the rest of the mostly static site.

8. Shared UI primitives live in `src/components` and are reused across routes. Examples include `SiteHeader`, `ThemeToggle`, `ShinyButton`, `TechMarquee`, and reusable page-level elements like `ProjectTeaser`. This indicates a component-driven architecture with a consistent visual system across the site.

9. Styling is global-first with `src/app/globals.css`, plus Next.js/PostCSS tooling (`postcss.config.mjs`, `eslint.config.mjs`, `next.config.ts`). The app likely relies on utility/component styling conventions rather than a separate design-system package.

10. Static assets live under `public`, including `public/preview`, which probably supports social preview images or downloadable media for the portfolio. That reinforces the repo’s static/presentation-oriented architecture: content is assembled at build/render time from local components, assets, and typed data.

11. Overall data flow is straightforward: route entry points compose page sections, sections consume shared components, and project-specific content is read from local TypeScript data. The important architectural boundary is between route/page orchestration and reusable presentation blocks, with `src/data/projects.ts` acting as the key content source.

12. There are no signs of external services, persistence layers, or server-side business logic in the file tree. For an architecture diagram, the main boxes are: Next.js app/router, global layout/providers, shared UI component library, home-page sections, projects data source, contact form component, and static public assets.

Main entry points: [`src/app/page.tsx`](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/page.tsx) (Home page), [`src/app/layout.tsx`](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/layout.tsx) (Root layout), [`src/components/home/ProjectsPreview.tsx`](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/ProjectsPreview.tsx) (Projects preview), [`src/app/projects/[slug]/page.tsx`](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/projects/[slug]/page.tsx) (Project detail)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Next.js app"]
  node_layout["Root layout<br/>app shell<br/>[layout.tsx]"]
  node_providers["Providers<br/>client context<br/>[providers.tsx]"]
  node_home_page["Home page<br/>route page<br/>[page.tsx]"]
  node_about_page["About page<br/>route page<br/>[page.tsx]"]
  node_projects_page["Projects page<br/>route page<br/>[page.tsx]"]
  node_project_detail["Project detail<br/>dynamic route<br/>[page.tsx]"]
  node_contact_page["Contact page<br/>route page<br/>[page.tsx]"]
  node_projects_grid["Projects grid<br/>listing component<br/>[ProjectsGrid.tsx]"]
  node_contact_form["Contact form<br/>interactive form"]
end

subgraph group_home["Home sections"]
  node_hero["Hero<br/>home section<br/>[Hero.tsx]"]
  node_highlights["Highlights<br/>home section<br/>[Highlights.tsx]"]
  node_skills["Skills strip<br/>home section<br/>[SkillsStrip.tsx]"]
  node_experience["Experience<br/>home section<br/>[Experience.tsx]"]
  node_projects_preview["Projects preview<br/>home section"]
  node_blog_preview["Blog preview<br/>home section<br/>[BlogPreview.tsx]"]
  node_about_home["About summary<br/>home section<br/>[About.tsx]"]
  node_cta_section["CTA section<br/>home section<br/>[CTASection.tsx]"]
  node_scroll_progress(("Scroll progress<br/>ui widget<br/>[ScrollProgress.tsx]"))
end

subgraph group_ui["Shared UI"]
  node_site_header["Site header<br/>site chrome<br/>[SiteHeader.tsx]"]
  node_theme_toggle(("Theme toggle<br/>ui control<br/>[ThemeToggle.tsx]"))
  node_shiny_button["Shiny button<br/>ui primitive<br/>[ShinyButton.tsx]"]
  node_tech_marquee["Tech marquee<br/>ui marquee<br/>[TechMarquee.tsx]"]
  node_project_teaser["Project teaser<br/>card component<br/>[ProjectTeaser.tsx]"]
end

subgraph group_content["Content source"]
  node_projects_data[("Projects data<br/>typed content<br/>[projects.ts]")]
  node_public_assets["Public assets<br/>static assets"]
  node_globals_css["Global styles<br/>[globals.css]"]
end

node_layout -->|"wraps"| node_providers
node_layout -->|"includes"| node_site_header
node_layout -->|"loads"| node_globals_css
node_home_page -->|"composes"| node_hero
node_home_page -->|"composes"| node_highlights
node_home_page -->|"composes"| node_skills
node_home_page -->|"composes"| node_experience
node_home_page -->|"composes"| node_projects_preview
node_home_page -->|"composes"| node_blog_preview
node_home_page -->|"composes"| node_about_home
node_home_page -->|"composes"| node_cta_section
node_home_page -->|"uses"| node_scroll_progress
node_about_page -->|"shares chrome"| node_site_header
node_projects_page -->|"renders"| node_projects_grid
node_projects_grid -->|"reads"| node_projects_data
node_project_detail -->|"looks up"| node_projects_data
node_project_detail -->|"reuses"| node_project_teaser
node_projects_preview -->|"reuses"| node_project_teaser
node_contact_page -->|"hosts"| node_contact_form
node_contact_form -->|"uses"| node_shiny_button
node_site_header -->|"includes"| node_theme_toggle
node_hero -->|"uses"| node_shiny_button
node_skills -->|"uses"| node_tech_marquee
node_projects_preview -->|"highlights"| node_projects_data
node_public_assets -.->|"supports"| node_home_page
node_public_assets -.->|"supports"| node_project_detail

click node_layout "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/layout.tsx"
click node_providers "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/providers.tsx"
click node_home_page "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/page.tsx"
click node_about_page "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/about/page.tsx"
click node_projects_page "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/projects/page.tsx"
click node_project_detail "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/projects/[slug]/page.tsx"
click node_contact_page "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/contact/page.tsx"
click node_projects_grid "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/projects/ProjectsGrid.tsx"
click node_hero "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/Hero.tsx"
click node_highlights "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/Highlights.tsx"
click node_skills "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/SkillsStrip.tsx"
click node_experience "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/Experience.tsx"
click node_projects_preview "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/ProjectsPreview.tsx"
click node_blog_preview "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/BlogPreview.tsx"
click node_about_home "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/About.tsx"
click node_cta_section "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/CTASection.tsx"
click node_scroll_progress "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/ScrollProgress.tsx"
click node_site_header "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/SiteHeader.tsx"
click node_theme_toggle "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/ThemeToggle.tsx"
click node_shiny_button "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/ShinyButton.tsx"
click node_tech_marquee "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/TechMarquee.tsx"
click node_project_teaser "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/ProjectTeaser.tsx"
click node_contact_form "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/contact/ContactFormUltra.tsx"
click node_projects_data "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/data/projects.ts"
click node_public_assets "https://github.com/sabbir-offc/sabbir1dev/tree/main/public/preview"
click node_globals_css "https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/globals.css"

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_layout,node_providers,node_home_page,node_about_page,node_projects_page,node_project_detail,node_contact_page,node_projects_grid,node_contact_form toneBlue
class node_hero,node_highlights,node_skills,node_experience,node_projects_preview,node_blog_preview,node_about_home,node_cta_section,node_scroll_progress toneAmber
class node_site_header,node_theme_toggle,node_shiny_button,node_tech_marquee,node_project_teaser toneMint
class node_projects_data,node_public_assets,node_globals_css toneRose
```

## Components

### Next.js app

Route shell and page entrypoints

- [Root layout](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/layout.tsx): app shell · Defines the global HTML/body shell and app-wide wrapping. · `src/app/layout.tsx`
- [Providers](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/providers.tsx): client context · Client-only app providers for shared runtime state such as theme. · `src/app/providers.tsx`
- [Home page](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/page.tsx): route page · Top-level landing route composed from sectional home components. · `src/app/page.tsx`
- [About page](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/about/page.tsx): route page · Standalone about route. · `src/app/about/page.tsx`
- [Projects page](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/projects/page.tsx): route page · Projects listing route that delegates to the projects grid. · `src/app/projects/page.tsx`
- [Project detail](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/projects/[slug]/page.tsx): dynamic route · Slug-based project detail route for individual project pages. · `src/app/projects/[slug]/page.tsx`
- [Contact page](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/contact/page.tsx): route page · Contact route that hosts the interactive contact form. · `src/app/contact/page.tsx`
- [Projects grid](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/projects/ProjectsGrid.tsx): listing component · Renders the projects index from local project data. · `src/app/projects/ProjectsGrid.tsx`
- [Contact form](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/contact/ContactFormUltra.tsx): interactive form · Specialized contact form subtree for the contact route. · `src/app/contact/ContactFormUltra.tsx`

### Home sections

Composable landing-page blocks

- [Hero](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/Hero.tsx): home section · Primary landing-page introduction block. · `src/components/home/Hero.tsx`
- [Highlights](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/Highlights.tsx): home section · Landing-page summary of key strengths or features. · `src/components/home/Highlights.tsx`
- [Skills strip](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/SkillsStrip.tsx): home section · Compact strip for technical skills or tags. · `src/components/home/SkillsStrip.tsx`
- [Experience](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/Experience.tsx): home section · Landing-page experience timeline or history block. · `src/components/home/Experience.tsx`
- [Projects preview](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/ProjectsPreview.tsx): home section · Featured projects teaser section on the home page. · `src/components/home/ProjectsPreview.tsx`
- [Blog preview](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/BlogPreview.tsx): home section · Preview section for writing or updates. · `src/components/home/BlogPreview.tsx`
- [About summary](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/About.tsx): home section · Short about summary section on the landing page. · `src/components/home/About.tsx`
- [CTA section](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/CTASection.tsx): home section · Call-to-action block near the bottom of the home page. · `src/components/home/CTASection.tsx`
- [Scroll progress](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/home/ScrollProgress.tsx): ui widget · Scroll-position indicator used within the landing page. · `src/components/home/ScrollProgress.tsx`

### Shared UI

Reusable presentation components

- [Site header](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/SiteHeader.tsx): site chrome · Shared top-level header/navigation used across routes. · `src/components/SiteHeader.tsx`
- [Theme toggle](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/ThemeToggle.tsx): ui control · Theme switcher used in the site chrome. · `src/components/ThemeToggle.tsx`
- [Shiny button](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/ShinyButton.tsx): ui primitive · Reusable styled call-to-action button. · `src/components/ShinyButton.tsx`
- [Tech marquee](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/TechMarquee.tsx): ui marquee · Scrolling tech/skills display used as a reusable visual element. · `src/components/TechMarquee.tsx`
- [Project teaser](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/components/ProjectTeaser.tsx): card component · Reusable project preview card used in listings and previews. · `src/components/ProjectTeaser.tsx`

### Content source

Local data and static assets

- [Projects data](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/data/projects.ts): typed content · Local source of truth for projects used by listings and detail pages. · `src/data/projects.ts`
- [Public assets](https://github.com/sabbir-offc/sabbir1dev/tree/main/public/preview): static assets · Static files and preview media served from the public directory. · `public/preview`
- [Global styles](https://github.com/sabbir-offc/sabbir1dev/blob/main/src/app/globals.css): styles · App-wide CSS entrypoint for global styling conventions. · `src/app/globals.css`

## Connections

- Root layout → Providers: wraps · The root layout composes the provider layer around the app.
- Root layout → Site header: includes · Global shell likely renders shared chrome such as the header.
- Root layout → Global styles: loads · Global layout imports the application stylesheet.
- Home page → Hero: composes · The landing page is built from sectional home blocks.
- Home page → Highlights: composes · The landing page is built from sectional home blocks.
- Home page → Skills strip: composes · The landing page is built from sectional home blocks.
- Home page → Experience: composes · The landing page is built from sectional home blocks.
- Home page → Projects preview: composes · The landing page is built from sectional home blocks.
- Home page → Blog preview: composes · The landing page is built from sectional home blocks.
- Home page → About summary: composes · The landing page is built from sectional home blocks.
- Home page → CTA section: composes · The landing page is built from sectional home blocks.
- Home page → Scroll progress: uses · Landing page includes a scroll position indicator.
- About page → Site header: shares chrome · The about route uses the shared site shell.
- Projects page → Projects grid: renders · The projects route delegates listing logic to the grid component.
- Projects grid → Projects data: reads · The grid consumes the local projects dataset.
- Project detail → Projects data: looks up · The dynamic detail route resolves project content by slug.
- Project detail → Project teaser: reuses · Detail/listing presentation likely shares project card patterns.
- Projects preview → Project teaser: reuses · Home project previews use the shared project card component.
- Contact page → Contact form: hosts · The contact route is centered on the specialized form component.
- Contact form → Shiny button: uses · Interactive form actions likely reuse the shared button primitive.
- Site header → Theme toggle: includes · The header hosts the theme switcher control.
- Hero → Shiny button: uses · Hero calls to action use the shared button styling.
- Skills strip → Tech marquee: uses · The skills strip can be implemented with the marquee component.
- Projects preview → Projects data: highlights · Featured projects preview is driven by the same project dataset.
- Public assets → Home page: supports · Static media supports the presentation-first portfolio site.
- Public assets → Project detail: supports · Project detail pages likely draw from local static assets.