# sabbirchowdhury12/next-js-portfolio architecture

> Architecture diagram of the GitHub repository sabbirchowdhury12/next-js-portfolio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sabbirchowdhury12/next-js-portfolio
- Repository: https://github.com/sabbirchowdhury12/next-js-portfolio

## Overview

This repository is a personal portfolio website for a full-stack developer. A visitor browses the home page’s introduction, biography, skills, projects, experience, and contact sections; they can also download a CV, follow social links, switch themes, and submit a message by email. The page composition, contact submission, and shared state are supported by sampled source. Several section implementations were not sampled, so their internal behavior and wiring are represented only where the tree or documented data supports it.

Main entry points: [`app/page.tsx`](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/app/page.tsx) (Home page), [`lib/hooks.ts`](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/lib/hooks.ts) (Section visibility hook), [`app/layout.tsx`](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/app/layout.tsx) (Root layout), [`lib/data.ts`](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/lib/data.ts) (Portfolio data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio site"]
  node_layout["Root layout<br/>[layout.tsx]"]
  node_home["Home page<br/>[page.tsx]"]
  node_header["Header navigation<br/>[header.tsx]"]
  node_footer["Footer<br/>[footer.tsx]"]
end

subgraph group_content["Portfolio content"]
  node_intro["Introduction<br/>[intro.tsx]"]
  node_about["About<br/>[about.tsx]"]
  node_skills["Skills<br/>[skills.tsx]"]
  node_projects["Projects<br/>[projects.tsx]"]
  node_experience["Experience<br/>[experience.tsx]"]
  node_contentdata["Portfolio data<br/>[data.ts]"]
  node_cv["CV document<br/>[CV.pdf]"]
end

subgraph group_interaction["Shared interaction"]
  node_activecontext["Active section state"]
  node_themecontext["Theme state<br/>[theme-context.tsx]"]
  node_sectionhook["Section visibility hook<br/>[hooks.ts]"]
  node_themeswitch["Theme switch<br/>[theme-switch.tsx]"]
end

subgraph group_messaging["Contact messaging"]
  node_contact["Contact section<br/>[contact.tsx]"]
  node_sendemail["Email action<br/>[sendEmail.ts]"]
  node_emailtemplate["Email template"]
end

node_visitor(("Visitor"))
node_resend{{"Resend email service"}}

node_visitor -->|"opens site"| node_layout
node_layout -->|"renders page"| node_home
node_layout -->|"renders"| node_header
node_layout -->|"renders"| node_footer
node_layout -->|"provides state"| node_activecontext
node_layout -->|"provides state"| node_themecontext
node_home -->|"renders"| node_intro
node_home -->|"renders"| node_about
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_experience
node_home -->|"renders"| node_contact
node_header -->|"reads links"| node_contentdata
node_about -->|"reads profile"| node_contentdata
node_skills -->|"reads skills"| node_contentdata
node_projects -->|"reads projects"| node_contentdata
node_experience -->|"reads history"| node_contentdata
node_intro -->|"links download"| node_cv
node_intro -->|"updates section"| node_activecontext
node_intro -->|"tracks visibility"| node_sectionhook
node_about -->|"tracks visibility"| node_sectionhook
node_skills -->|"tracks visibility"| node_sectionhook
node_projects -->|"tracks visibility"| node_sectionhook
node_experience -->|"tracks visibility"| node_sectionhook
node_contact -->|"tracks visibility"| node_sectionhook
node_sectionhook -->|"updates section"| node_activecontext
node_themeswitch -->|"toggles theme"| node_themecontext
node_themecontext -.->|"persists preference"| node_visitor
node_visitor -->|"submits message"| node_contact
node_contact -->|"sends form"| node_sendemail
node_sendemail -->|"renders email"| node_emailtemplate
node_sendemail -->|"dispatches email"| node_resend
node_contact -->|"reads contact details"| node_contentdata

click node_layout "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/app/layout.tsx"
click node_home "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/app/page.tsx"
click node_header "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/header.tsx"
click node_footer "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/footer.tsx"
click node_intro "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/intro.tsx"
click node_about "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/about.tsx"
click node_skills "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/skills.tsx"
click node_projects "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/projects.tsx"
click node_experience "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/experience.tsx"
click node_contentdata "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/lib/data.ts"
click node_cv "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/public/CV.pdf"
click node_activecontext "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/context/active-section-context.tsx"
click node_themecontext "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/context/theme-context.tsx"
click node_sectionhook "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/lib/hooks.ts"
click node_themeswitch "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/theme-switch.tsx"
click node_contact "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/contact.tsx"
click node_sendemail "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/actions/sendEmail.ts"
click node_emailtemplate "https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/email/contact-form-email.tsx"

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_home,node_header,node_footer toneBlue
class node_intro,node_about,node_skills,node_projects,node_experience,node_contentdata,node_cv toneAmber
class node_activecontext,node_themecontext,node_sectionhook,node_themeswitch toneMint
class node_contact,node_sendemail,node_emailtemplate toneRose
class node_visitor,node_resend toneIndigo
```

## Components

### Portfolio site

- [Root layout](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/app/layout.tsx): `app/layout.tsx`
- [Home page](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/app/page.tsx): `app/page.tsx`
- [Header navigation](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/header.tsx): `components/header.tsx`
- [Footer](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/footer.tsx): `components/footer.tsx`

### Portfolio content

- [Introduction](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/intro.tsx): `components/intro.tsx`
- [About](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/about.tsx): `components/about.tsx`
- [Skills](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/skills.tsx): `components/skills.tsx`
- [Projects](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/projects.tsx): `components/projects.tsx`
- [Experience](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/experience.tsx): `components/experience.tsx`
- [Portfolio data](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/lib/data.ts): `lib/data.ts`
- [CV document](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/public/CV.pdf): `public/CV.pdf`

### Shared interaction

- [Active section state](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/context/active-section-context.tsx): `context/active-section-context.tsx`
- [Theme state](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/context/theme-context.tsx): `context/theme-context.tsx`
- [Section visibility hook](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/lib/hooks.ts): `lib/hooks.ts`
- [Theme switch](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/theme-switch.tsx): `components/theme-switch.tsx`

### Contact messaging

- [Contact section](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/components/contact.tsx): `components/contact.tsx`
- [Email action](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/actions/sendEmail.ts): `actions/sendEmail.ts`
- [Email template](https://github.com/sabbirchowdhury12/next-js-portfolio/blob/main/email/contact-form-email.tsx): `email/contact-form-email.tsx`

### Other components

- **Visitor**
- **Resend email service**

## Connections

- Visitor → Root layout: opens site
- Root layout → Home page: renders page
- Root layout → Header navigation: renders
- Root layout → Footer: renders
- Root layout → Active section state: provides state
- Root layout → Theme state: provides state
- Home page → Introduction: renders
- Home page → About: renders
- Home page → Skills: renders
- Home page → Projects: renders
- Home page → Experience: renders
- Home page → Contact section: renders
- Header navigation → Portfolio data: reads links
- About → Portfolio data: reads profile
- Skills → Portfolio data: reads skills
- Projects → Portfolio data: reads projects
- Experience → Portfolio data: reads history
- Introduction → CV document: links download
- Introduction → Active section state: updates section
- Introduction → Section visibility hook: tracks visibility
- About → Section visibility hook: tracks visibility
- Skills → Section visibility hook: tracks visibility
- Projects → Section visibility hook: tracks visibility
- Experience → Section visibility hook: tracks visibility
- Contact section → Section visibility hook: tracks visibility
- Section visibility hook → Active section state: updates section
- Theme switch → Theme state: toggles theme
- Theme state → Visitor: persists preference
- Visitor → Contact section: submits message
- Contact section → Email action: sends form
- Email action → Email template: renders email
- Email action → Resend email service: dispatches email
- Contact section → Portfolio data: reads contact details