# hasanasiabd/my-portfolio architecture

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

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

## Overview

This is a Next.js developer portfolio that presents the owner's profile, skills, projects, résumé, and contact options, alongside a structured technical blog. A visitor enters through the shared site shell and navigates to portfolio pages or through blog categories and topics to an article. Contact submissions are sent through EmailJS. The map includes the major portfolio and knowledge-base branches; the exact article-rendering relationship to the documentation components is not established by the sampled source, so it is marked unverified.

Main entry points: [`app/page.js`](https://github.com/hasanasiabd/my-portfolio/blob/main/app/page.js) (Home page), [`data/portfolioData.js`](https://github.com/hasanasiabd/my-portfolio/blob/main/data/portfolioData.js) (Portfolio data), [`app/layout.js`](https://github.com/hasanasiabd/my-portfolio/blob/main/app/layout.js) (Root layout), [`components/projects/ProjectsSection.jsx`](https://github.com/hasanasiabd/my-portfolio/blob/main/components/projects/ProjectsSection.jsx) (Projects section)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Shared site shell"]
  node_root_layout["Root layout<br/>[layout.js]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_theme["Theme toggle<br/>[ThemeToggle.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_home["Home page<br/>[page.js]"]
  node_about_page["About page<br/>[page.js]"]
  node_about["About section<br/>[AboutSection.jsx]"]
  node_resume["Résumé section<br/>[ResumeSection.jsx]"]
  node_hero["Hero section<br/>[HeroSection.jsx]"]
  node_skills_page["Skills page<br/>[page.js]"]
  node_skills["Skills section<br/>[SkillsSection.jsx]"]
  node_projects_page["Projects page<br/>[page.js]"]
  node_projects["Projects section"]
  node_project_card["Project card<br/>[ProjectCard.jsx]"]
  node_portfolio_data["Portfolio data<br/>[portfolioData.js]"]
end

subgraph group_knowledge["Knowledge base"]
  node_blog_index["Blog index<br/>[page.js]"]
  node_blog_category["Category route<br/>[page.js]"]
  node_blog_topic["Topic route<br/>[page.js]"]
  node_blog_article["Article route<br/>[page.js]"]
  node_blog_data["Blog catalog<br/>[blogData.js]"]
  node_docs["Article content"]
end

subgraph group_contact["Contact"]
  node_contact_page["Contact page<br/>[page.js]"]
  node_contact_form["Contact form<br/>[ContactSection.jsx]"]
  node_emailjs{{"EmailJS service"}}
end

node_visitor(("Visitor"))

node_visitor -->|"visits"| node_root_layout
node_root_layout -->|"renders"| node_navbar
node_root_layout -->|"renders"| node_footer
node_root_layout -->|"provides theme"| node_theme
node_visitor -.->|"opens"| node_home
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_about
node_home -->|"renders"| node_resume
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_contact_form
node_about_page -->|"renders"| node_about
node_about_page -->|"renders"| node_resume
node_skills_page -->|"renders"| node_skills
node_projects_page -->|"renders"| node_projects
node_projects -->|"renders"| node_project_card
node_navbar -->|"renders"| node_theme
node_navbar -->|"reads links"| node_portfolio_data
node_about -->|"reads profile"| node_portfolio_data
node_skills -->|"reads skills"| node_portfolio_data
node_projects -->|"reads projects"| node_portfolio_data
node_footer -->|"reads name"| node_portfolio_data
node_visitor -.->|"opens"| node_blog_index
node_blog_index -.->|"navigates to"| node_blog_category
node_blog_category -.->|"navigates to"| node_blog_topic
node_blog_topic -.->|"opens article"| node_blog_article
node_blog_category -->|"reads catalog"| node_blog_data
node_blog_topic -->|"reads catalog"| node_blog_data
node_blog_article -->|"reads catalog"| node_blog_data
node_blog_article -.->|"may render content"| node_docs
node_visitor -.->|"opens"| node_contact_page
node_contact_page -->|"renders"| node_contact_form
node_contact_form -->|"sends form"| node_emailjs

click node_root_layout "https://github.com/hasanasiabd/my-portfolio/blob/main/app/layout.js"
click node_navbar "https://github.com/hasanasiabd/my-portfolio/blob/main/components/navbar/Navbar.jsx"
click node_theme "https://github.com/hasanasiabd/my-portfolio/blob/main/components/navbar/ThemeToggle.jsx"
click node_footer "https://github.com/hasanasiabd/my-portfolio/blob/main/components/footer/Footer.jsx"
click node_home "https://github.com/hasanasiabd/my-portfolio/blob/main/app/page.js"
click node_about_page "https://github.com/hasanasiabd/my-portfolio/blob/main/app/about/page.js"
click node_about "https://github.com/hasanasiabd/my-portfolio/blob/main/components/about/AboutSection.jsx"
click node_resume "https://github.com/hasanasiabd/my-portfolio/blob/main/components/ResumeSection.jsx"
click node_hero "https://github.com/hasanasiabd/my-portfolio/blob/main/components/hero/HeroSection.jsx"
click node_skills_page "https://github.com/hasanasiabd/my-portfolio/blob/main/app/skills/page.js"
click node_skills "https://github.com/hasanasiabd/my-portfolio/blob/main/components/skills/SkillsSection.jsx"
click node_projects_page "https://github.com/hasanasiabd/my-portfolio/blob/main/app/projects/page.js"
click node_projects "https://github.com/hasanasiabd/my-portfolio/blob/main/components/projects/ProjectsSection.jsx"
click node_project_card "https://github.com/hasanasiabd/my-portfolio/blob/main/components/projects/ProjectCard.jsx"
click node_portfolio_data "https://github.com/hasanasiabd/my-portfolio/blob/main/data/portfolioData.js"
click node_blog_index "https://github.com/hasanasiabd/my-portfolio/blob/main/app/blog/page.js"
click node_blog_category "https://github.com/hasanasiabd/my-portfolio/blob/main/app/blog/%5Bcategory%5D/page.js"
click node_blog_topic "https://github.com/hasanasiabd/my-portfolio/blob/main/app/blog/%5Bcategory%5D/%5Btopic%5D/page.js"
click node_blog_article "https://github.com/hasanasiabd/my-portfolio/blob/main/app/blog/%5Bcategory%5D/%5Btopic%5D/%5Bslug%5D/page.js"
click node_blog_data "https://github.com/hasanasiabd/my-portfolio/blob/main/data/blogData.js"
click node_docs "https://github.com/hasanasiabd/my-portfolio/tree/main/components/documentation"
click node_contact_page "https://github.com/hasanasiabd/my-portfolio/blob/main/app/contact/page.js"
click node_contact_form "https://github.com/hasanasiabd/my-portfolio/blob/main/components/contact/ContactSection.jsx"

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_root_layout,node_navbar,node_theme,node_footer toneBlue
class node_home,node_about_page,node_about,node_resume,node_hero,node_skills_page,node_skills,node_projects_page,node_projects,node_project_card,node_portfolio_data toneAmber
class node_blog_index,node_blog_category,node_blog_topic,node_blog_article,node_blog_data,node_docs toneMint
class node_contact_page,node_contact_form,node_emailjs toneRose
class node_visitor toneIndigo
```

## Components

### Shared site shell

- [Root layout](https://github.com/hasanasiabd/my-portfolio/blob/main/app/layout.js): `app/layout.js`
- [Navigation](https://github.com/hasanasiabd/my-portfolio/blob/main/components/navbar/Navbar.jsx): `components/navbar/Navbar.jsx`
- [Theme toggle](https://github.com/hasanasiabd/my-portfolio/blob/main/components/navbar/ThemeToggle.jsx): `components/navbar/ThemeToggle.jsx`
- [Footer](https://github.com/hasanasiabd/my-portfolio/blob/main/components/footer/Footer.jsx): `components/footer/Footer.jsx`

### Portfolio content

- [Home page](https://github.com/hasanasiabd/my-portfolio/blob/main/app/page.js): `app/page.js`
- [About page](https://github.com/hasanasiabd/my-portfolio/blob/main/app/about/page.js): `app/about/page.js`
- [About section](https://github.com/hasanasiabd/my-portfolio/blob/main/components/about/AboutSection.jsx): `components/about/AboutSection.jsx`
- [Résumé section](https://github.com/hasanasiabd/my-portfolio/blob/main/components/ResumeSection.jsx): `components/ResumeSection.jsx`
- [Hero section](https://github.com/hasanasiabd/my-portfolio/blob/main/components/hero/HeroSection.jsx): `components/hero/HeroSection.jsx`
- [Skills page](https://github.com/hasanasiabd/my-portfolio/blob/main/app/skills/page.js): `app/skills/page.js`
- [Skills section](https://github.com/hasanasiabd/my-portfolio/blob/main/components/skills/SkillsSection.jsx): `components/skills/SkillsSection.jsx`
- [Projects page](https://github.com/hasanasiabd/my-portfolio/blob/main/app/projects/page.js): `app/projects/page.js`
- [Projects section](https://github.com/hasanasiabd/my-portfolio/blob/main/components/projects/ProjectsSection.jsx): `components/projects/ProjectsSection.jsx`
- [Project card](https://github.com/hasanasiabd/my-portfolio/blob/main/components/projects/ProjectCard.jsx): `components/projects/ProjectCard.jsx`
- [Portfolio data](https://github.com/hasanasiabd/my-portfolio/blob/main/data/portfolioData.js): `data/portfolioData.js`

### Knowledge base

- [Blog index](https://github.com/hasanasiabd/my-portfolio/blob/main/app/blog/page.js): `app/blog/page.js`
- [Category route](https://github.com/hasanasiabd/my-portfolio/blob/main/app/blog/%5Bcategory%5D/page.js): `app/blog/[category]/page.js`
- [Topic route](https://github.com/hasanasiabd/my-portfolio/blob/main/app/blog/%5Bcategory%5D/%5Btopic%5D/page.js): `app/blog/[category]/[topic]/page.js`
- [Article route](https://github.com/hasanasiabd/my-portfolio/blob/main/app/blog/%5Bcategory%5D/%5Btopic%5D/%5Bslug%5D/page.js): `app/blog/[category]/[topic]/[slug]/page.js`
- [Blog catalog](https://github.com/hasanasiabd/my-portfolio/blob/main/data/blogData.js): `data/blogData.js`
- [Article content](https://github.com/hasanasiabd/my-portfolio/tree/main/components/documentation): `components/documentation`

### Contact

- [Contact page](https://github.com/hasanasiabd/my-portfolio/blob/main/app/contact/page.js): `app/contact/page.js`
- [Contact form](https://github.com/hasanasiabd/my-portfolio/blob/main/components/contact/ContactSection.jsx): `components/contact/ContactSection.jsx`
- **EmailJS service**

### Other components

- **Visitor**

## Connections

- Visitor → Root layout: visits (evidence: `app/layout.js`)
- Root layout → Navigation: renders (evidence: `app/layout.js`)
- Root layout → Footer: renders (evidence: `app/layout.js`)
- Root layout → Theme toggle: provides theme (evidence: `app/layout.js`)
- Visitor → Home page: opens
- Home page → Hero section: renders (evidence: `app/page.js`)
- Home page → About section: renders (evidence: `app/page.js`)
- Home page → Résumé section: renders (evidence: `app/page.js`)
- Home page → Skills section: renders (evidence: `app/page.js`)
- Home page → Projects section: renders (evidence: `app/page.js`)
- Home page → Contact form: renders (evidence: `app/page.js`)
- About page → About section: renders (evidence: `app/about/page.js`)
- About page → Résumé section: renders (evidence: `app/about/page.js`)
- Skills page → Skills section: renders (evidence: `app/skills/page.js`)
- Projects page → Projects section: renders (evidence: `app/projects/page.js`)
- Projects section → Project card: renders (evidence: `components/projects/ProjectsSection.jsx`)
- Navigation → Theme toggle: renders (evidence: `components/navbar/Navbar.jsx`)
- Navigation → Portfolio data: reads links (evidence: `components/navbar/Navbar.jsx`)
- About section → Portfolio data: reads profile (evidence: `components/about/AboutSection.jsx`)
- Skills section → Portfolio data: reads skills (evidence: `components/skills/SkillsSection.jsx`)
- Projects section → Portfolio data: reads projects (evidence: `components/projects/ProjectsSection.jsx`)
- Footer → Portfolio data: reads name (evidence: `components/footer/Footer.jsx`)
- Visitor → Blog index: opens
- Blog index → Category route: navigates to
- Category route → Topic route: navigates to
- Topic route → Article route: opens article
- Category route → Blog catalog: reads catalog (evidence: `app/blog/[category]/page.js`)
- Topic route → Blog catalog: reads catalog (evidence: `app/blog/[category]/[topic]/page.js`)
- Article route → Blog catalog: reads catalog (evidence: `app/blog/[category]/[topic]/[slug]/page.js`)
- Article route → Article content: may render content
- Visitor → Contact page: opens
- Contact page → Contact form: renders (evidence: `app/contact/page.js`)
- Contact form → EmailJS service: sends form (evidence: `components/contact/ContactSection.jsx`)