# mobarok6042/my-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/mobarok6042/my-portfolio
- Repository: https://github.com/mobarok6042/my-portfolio

## Overview

This repository is a personal developer portfolio. A visitor browses the portfolio page’s introduction, projects, and skills, then can download a resume or get in touch through the contact form or direct contact links. The form sends through EmailJS, while the theme toggle stores a preference in browser local storage. The graph focuses on the site’s runtime features; the sampled files show component imports and key actions, but not every page section’s implementation details.

Main entry points: [`app/page.tsx`](https://github.com/mobarok6042/my-portfolio/blob/main/app/page.tsx) (Portfolio page), [`app/resume-download-button.tsx`](https://github.com/mobarok6042/my-portfolio/blob/main/app/resume-download-button.tsx) (Resume download), [`app/contact-form.tsx`](https://github.com/mobarok6042/my-portfolio/blob/main/app/contact-form.tsx) (Contact form), [`app/theme-toggle.tsx`](https://github.com/mobarok6042/my-portfolio/blob/main/app/theme-toggle.tsx) (Theme toggle)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Portfolio presentation"]
  node_portfolio["Portfolio page<br/>[page.tsx]"]
  node_site_shell["Site shell<br/>[layout.tsx]"]
  node_styling["Global styling<br/>[globals.css]"]
  node_projects["Projects showcase<br/>[page.tsx]"]
  node_skills["Skills showcase<br/>[page.tsx]"]
end

subgraph group_interaction["Visitor interactions"]
  node_resume_button["Resume download"]
  node_contact_form["Contact form<br/>[contact-form.tsx]"]
  node_theme_toggle["Theme toggle<br/>[theme-toggle.tsx]"]
  node_direct_contact["Direct contact links<br/>[page.tsx]"]
end

subgraph group_services["Assets and services"]
  node_resume_pdf["Resume PDF"]
  node_emailjs["EmailJS"]
  node_browser_storage[("Browser local storage")]
end

node_visitor(("Visitor"))

node_visitor -->|"browses"| node_portfolio
node_portfolio -->|"renders"| node_projects
node_portfolio -->|"renders"| node_skills
node_portfolio -->|"renders"| node_contact_form
node_portfolio -->|"renders"| node_resume_button
node_portfolio -->|"renders"| node_direct_contact
node_site_shell -->|"renders"| node_theme_toggle
node_site_shell -->|"imports"| node_styling
node_visitor -->|"requests download"| node_resume_button
node_resume_button -->|"downloads"| node_resume_pdf
node_visitor -->|"submits message"| node_contact_form
node_contact_form -->|"sends message"| node_emailjs
node_visitor -->|"changes theme"| node_theme_toggle
node_theme_toggle -->|"stores preference"| node_browser_storage

click node_portfolio "https://github.com/mobarok6042/my-portfolio/blob/main/app/page.tsx"
click node_site_shell "https://github.com/mobarok6042/my-portfolio/blob/main/app/layout.tsx"
click node_styling "https://github.com/mobarok6042/my-portfolio/blob/main/app/globals.css"
click node_projects "https://github.com/mobarok6042/my-portfolio/blob/main/app/page.tsx"
click node_skills "https://github.com/mobarok6042/my-portfolio/blob/main/app/page.tsx"
click node_resume_button "https://github.com/mobarok6042/my-portfolio/blob/main/app/resume-download-button.tsx"
click node_contact_form "https://github.com/mobarok6042/my-portfolio/blob/main/app/contact-form.tsx"
click node_theme_toggle "https://github.com/mobarok6042/my-portfolio/blob/main/app/theme-toggle.tsx"
click node_resume_pdf "https://github.com/mobarok6042/my-portfolio/blob/main/public/Mobarok_Hossen_Resume.pdf"
click node_direct_contact "https://github.com/mobarok6042/my-portfolio/blob/main/app/page.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_portfolio,node_site_shell,node_styling,node_projects,node_skills toneBlue
class node_resume_button,node_contact_form,node_theme_toggle,node_direct_contact toneAmber
class node_resume_pdf,node_emailjs,node_browser_storage toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio presentation

- [Portfolio page](https://github.com/mobarok6042/my-portfolio/blob/main/app/page.tsx): `app/page.tsx`
- [Site shell](https://github.com/mobarok6042/my-portfolio/blob/main/app/layout.tsx): `app/layout.tsx`
- [Global styling](https://github.com/mobarok6042/my-portfolio/blob/main/app/globals.css): `app/globals.css`
- [Projects showcase](https://github.com/mobarok6042/my-portfolio/blob/main/app/page.tsx): `app/page.tsx`
- [Skills showcase](https://github.com/mobarok6042/my-portfolio/blob/main/app/page.tsx): `app/page.tsx`

### Visitor interactions

- [Resume download](https://github.com/mobarok6042/my-portfolio/blob/main/app/resume-download-button.tsx): `app/resume-download-button.tsx`
- [Contact form](https://github.com/mobarok6042/my-portfolio/blob/main/app/contact-form.tsx): `app/contact-form.tsx`
- [Theme toggle](https://github.com/mobarok6042/my-portfolio/blob/main/app/theme-toggle.tsx): `app/theme-toggle.tsx`
- [Direct contact links](https://github.com/mobarok6042/my-portfolio/blob/main/app/page.tsx): `app/page.tsx`

### Assets and services

- [Resume PDF](https://github.com/mobarok6042/my-portfolio/blob/main/public/Mobarok_Hossen_Resume.pdf): `public/Mobarok_Hossen_Resume.pdf`
- **EmailJS**
- **Browser local storage**

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: browses (evidence: `app/page.tsx`)
- Portfolio page → Projects showcase: renders (evidence: `app/page.tsx`)
- Portfolio page → Skills showcase: renders (evidence: `app/page.tsx`)
- Portfolio page → Contact form: renders (evidence: `app/page.tsx`)
- Portfolio page → Resume download: renders (evidence: `app/page.tsx`)
- Portfolio page → Direct contact links: renders (evidence: `app/page.tsx`)
- Site shell → Theme toggle: renders (evidence: `app/layout.tsx`)
- Site shell → Global styling: imports (evidence: `app/layout.tsx`)
- Visitor → Resume download: requests download (evidence: `app/resume-download-button.tsx`)
- Resume download → Resume PDF: downloads (evidence: `app/resume-download-button.tsx`)
- Visitor → Contact form: submits message (evidence: `app/contact-form.tsx`)
- Contact form → EmailJS: sends message (evidence: `app/contact-form.tsx`)
- Visitor → Theme toggle: changes theme (evidence: `app/theme-toggle.tsx`)
- Theme toggle → Browser local storage: stores preference (evidence: `app/theme-toggle.tsx`)