# mohammad-nadil/portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/mohammad-nadil/portfolio
- Repository: https://github.com/mohammad-nadil/portfolio

## Overview

Nadil Portfolio is a visitor-facing developer portfolio. A visitor opens the Next.js root page, which presents a hero and profile followed by skills, filterable projects, FAQ, and contact content; a shared provider layer supplies navigation, theme, loading, motion, and visual effects around that page. Project and skills content is represented in local data rather than a backend. The README documents these capabilities; where section source was not sampled, the graph shows the documented role without asserting internal wiring.

Main entry points: [`app/Providers.jsx`](https://github.com/mohammad-nadil/portfolio/blob/main/app/Providers.jsx) (App providers), [`app/page.jsx`](https://github.com/mohammad-nadil/portfolio/blob/main/app/page.jsx) (Portfolio page), [`app/layout.jsx`](https://github.com/mohammad-nadil/portfolio/blob/main/app/layout.jsx) (Root layout), [`app/components/Projects.jsx`](https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Projects.jsx) (Projects)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Page entry"]
  node_layout["Root layout<br/>[layout.jsx]"]
  node_page["Portfolio page<br/>[page.jsx]"]
end

subgraph group_content["Portfolio content"]
  node_hero["Hero<br/>[Hero.jsx]"]
  node_about["About<br/>[About.jsx]"]
  node_skills["Skills<br/>[Skills.jsx]"]
  node_projects["Projects<br/>[Projects.jsx]"]
  node_faq["FAQ<br/>[Faq.jsx]"]
  node_contact["Contact<br/>[Contact.jsx]"]
end

subgraph group_shell["Shared presentation"]
  node_providers["App providers<br/>[Providers.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_theme["Theme controls<br/>[Themes.jsx]"]
  node_loader["Loading screen<br/>[Loader.jsx]"]
  node_lenis["Smooth scrolling<br/>[LenisProvider.jsx]"]
  node_particles["Particle backdrop"]
  node_mouse["Mouse effects<br/>[MouseTracker.jsx]"]
  node_theme_toggle["Theme toggle<br/>[ThemeToggle.jsx]"]
end

subgraph group_data["Portfolio data"]
  node_projectdata["Project catalog<br/>[temp.js]"]
  node_linksdata["Contact links<br/>[data.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_layout
node_layout -->|"wraps page"| node_providers
node_providers -->|"shows while loading"| node_loader
node_providers -->|"renders"| node_navbar
node_providers -->|"wraps content"| node_lenis
node_providers -->|"renders"| node_particles
node_providers -->|"renders desktop"| node_mouse
node_providers -->|"renders"| node_theme
node_providers -->|"renders"| node_footer
node_providers -->|"renders children"| node_page
node_page -->|"renders"| node_hero
node_page -->|"renders"| node_about
node_page -->|"renders"| node_skills
node_page -->|"renders"| node_projects
node_page -->|"renders"| node_faq
node_page -->|"renders"| node_contact
node_projects -->|"filters and displays"| node_projectdata
node_contact -->|"uses contact links"| node_linksdata
node_theme -->|"includes control"| node_theme_toggle

click node_layout "https://github.com/mohammad-nadil/portfolio/blob/main/app/layout.jsx"
click node_providers "https://github.com/mohammad-nadil/portfolio/blob/main/app/Providers.jsx"
click node_page "https://github.com/mohammad-nadil/portfolio/blob/main/app/page.jsx"
click node_hero "https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Hero.jsx"
click node_about "https://github.com/mohammad-nadil/portfolio/blob/main/app/components/About.jsx"
click node_skills "https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Skills.jsx"
click node_projects "https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Projects.jsx"
click node_faq "https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Faq.jsx"
click node_contact "https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Contact.jsx"
click node_projectdata "https://github.com/mohammad-nadil/portfolio/blob/main/temp/temp.js"
click node_linksdata "https://github.com/mohammad-nadil/portfolio/blob/main/lib/data.js"
click node_navbar "https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Navbar.jsx"
click node_footer "https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Footer.jsx"
click node_theme "https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Themes.jsx"
click node_loader "https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Loader.jsx"
click node_lenis "https://github.com/mohammad-nadil/portfolio/blob/main/app/components/LenisProvider.jsx"
click node_particles "https://github.com/mohammad-nadil/portfolio/blob/main/app/components/ParticlesBackground.jsx"
click node_mouse "https://github.com/mohammad-nadil/portfolio/blob/main/app/components/MouseTracker.jsx"
click node_theme_toggle "https://github.com/mohammad-nadil/portfolio/blob/main/app/components/ThemeToggle.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_layout,node_page toneBlue
class node_hero,node_about,node_skills,node_projects,node_faq,node_contact toneAmber
class node_providers,node_navbar,node_footer,node_theme,node_loader,node_lenis,node_particles,node_mouse,node_theme_toggle toneMint
class node_projectdata,node_linksdata toneRose
class node_visitor toneIndigo
```

## Components

### Page entry

- [Root layout](https://github.com/mohammad-nadil/portfolio/blob/main/app/layout.jsx): `app/layout.jsx`
- [Portfolio page](https://github.com/mohammad-nadil/portfolio/blob/main/app/page.jsx): `app/page.jsx`

### Portfolio content

- [Hero](https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Hero.jsx): `app/components/Hero.jsx`
- [About](https://github.com/mohammad-nadil/portfolio/blob/main/app/components/About.jsx): `app/components/About.jsx`
- [Skills](https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Skills.jsx): `app/components/Skills.jsx`
- [Projects](https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Projects.jsx): `app/components/Projects.jsx`
- [FAQ](https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Faq.jsx): `app/components/Faq.jsx`
- [Contact](https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Contact.jsx): `app/components/Contact.jsx`

### Shared presentation

- [App providers](https://github.com/mohammad-nadil/portfolio/blob/main/app/Providers.jsx): `app/Providers.jsx`
- [Navigation](https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Navbar.jsx): `app/components/Navbar.jsx`
- [Footer](https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Footer.jsx): `app/components/Footer.jsx`
- [Theme controls](https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Themes.jsx): `app/components/Themes.jsx`
- [Loading screen](https://github.com/mohammad-nadil/portfolio/blob/main/app/components/Loader.jsx): `app/components/Loader.jsx`
- [Smooth scrolling](https://github.com/mohammad-nadil/portfolio/blob/main/app/components/LenisProvider.jsx): `app/components/LenisProvider.jsx`
- [Particle backdrop](https://github.com/mohammad-nadil/portfolio/blob/main/app/components/ParticlesBackground.jsx): `app/components/ParticlesBackground.jsx`
- [Mouse effects](https://github.com/mohammad-nadil/portfolio/blob/main/app/components/MouseTracker.jsx): `app/components/MouseTracker.jsx`
- [Theme toggle](https://github.com/mohammad-nadil/portfolio/blob/main/app/components/ThemeToggle.jsx): `app/components/ThemeToggle.jsx`

### Portfolio data

- [Project catalog](https://github.com/mohammad-nadil/portfolio/blob/main/temp/temp.js): `temp/temp.js`
- [Contact links](https://github.com/mohammad-nadil/portfolio/blob/main/lib/data.js): `lib/data.js`

### Other components

- **Visitor**

## Connections

- Visitor → Root layout: opens site
- Root layout → App providers: wraps page
- App providers → Loading screen: shows while loading
- App providers → Navigation: renders
- App providers → Smooth scrolling: wraps content
- App providers → Particle backdrop: renders
- App providers → Mouse effects: renders desktop
- App providers → Theme controls: renders
- App providers → Footer: renders
- App providers → Portfolio page: renders children
- Portfolio page → Hero: renders
- Portfolio page → About: renders
- Portfolio page → Skills: renders
- Portfolio page → Projects: renders
- Portfolio page → FAQ: renders
- Portfolio page → Contact: renders
- Projects → Project catalog: filters and displays
- Contact → Contact links: uses contact links
- Theme controls → Theme toggle: includes control