# michaeldiputra/michaeldiputra-portfolio architecture

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

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

## Overview

This is a Next.js personal portfolio and digital résumé. Visitors navigate a shared site shell to view an introductory profile, biography and skills, or project showcase; the pages read their content from shared configuration data. The sampled source supports the page, layout, and data relationships shown. Public asset directories are present in the tree, but their contents were not sampled.

Main entry points: [`src/pages/_app.js`](https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/pages/_app.js) (App wrapper), [`src/components/layout.js`](https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/components/layout.js) (Shared layout), [`src/pages/index.js`](https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/pages/index.js) (Home page), [`config.js`](https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/config.js) (Site data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Site shell"]
  node_app["App wrapper<br/>[_app.js]"]
  node_layout["Shared layout<br/>[layout.js]"]
  node_navbar["Desktop navigation<br/>[navbar.js]"]
  node_mobile["Mobile navigation<br/>[mobilenav.js]"]
end

subgraph group_pages["Portfolio pages"]
  node_home["Home page<br/>[index.js]"]
  node_about["About page<br/>[about.js]"]
  node_portfolio["Portfolio page<br/>[portfolio.js]"]
end

subgraph group_content["Portfolio content"]
  node_config["Site data<br/>[config.js]"]
end

node_visitor(("Visitor"))
node_typed["Typed.js"]

node_visitor -->|"requests pages"| node_app
node_app -->|"wraps page"| node_layout
node_app -->|"renders page"| node_home
node_app -->|"renders page"| node_about
node_app -->|"renders page"| node_portfolio
node_layout -->|"renders"| node_navbar
node_layout -->|"renders"| node_mobile
node_home -->|"reads site settings"| node_config
node_home -->|"loads"| node_typed
node_about -->|"reads skills data"| node_config
node_portfolio -->|"reads project data"| node_config

click node_app "https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/pages/_app.js"
click node_layout "https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/components/layout.js"
click node_navbar "https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/components/navbar.js"
click node_mobile "https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/components/mobilenav.js"
click node_home "https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/pages/index.js"
click node_about "https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/pages/about.js"
click node_portfolio "https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/pages/portfolio.js"
click node_config "https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/config.js"

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_app,node_layout,node_navbar,node_mobile toneBlue
class node_home,node_about,node_portfolio toneAmber
class node_config toneMint
class node_visitor,node_typed toneIndigo
```

## Components

### Site shell

- [App wrapper](https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/pages/_app.js): `src/pages/_app.js`
- [Shared layout](https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/components/layout.js): `src/components/layout.js`
- [Desktop navigation](https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/components/navbar.js): `src/components/navbar.js`
- [Mobile navigation](https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/components/mobilenav.js): `src/components/mobilenav.js`

### Portfolio pages

- [Home page](https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/pages/index.js): `src/pages/index.js`
- [About page](https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/pages/about.js): `src/pages/about.js`
- [Portfolio page](https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/src/pages/portfolio.js): `src/pages/portfolio.js`

### Portfolio content

- [Site data](https://github.com/michaeldiputra/michaeldiputra-portfolio/blob/main/config.js): `config.js`

### Other components

- **Visitor**
- **Typed.js**

## Connections

- Visitor → App wrapper: requests pages
- App wrapper → Shared layout: wraps page
- App wrapper → Home page: renders page
- App wrapper → About page: renders page
- App wrapper → Portfolio page: renders page
- Shared layout → Desktop navigation: renders
- Shared layout → Mobile navigation: renders
- Home page → Site data: reads site settings
- Home page → Typed.js: loads
- About page → Site data: reads skills data
- Portfolio page → Site data: reads project data