# matteogradinaru/portfolio-website architecture

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

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

## Overview

This is a Next.js personal portfolio: visitors navigate profile and project pages, inspect project details and interactive topology diagrams, and reach the owner through contact links. The graph preserves the documented routing, wireless, software-development, and IoT showcases, plus shared theme behavior. Some project pages and explorers are represented from the tree and README; their internal wiring is not inferred where source excerpts were unavailable.

Main entry points: [`front-end/src/app/layout.tsx`](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/layout.tsx) (Site Shell), [`front-end/src/app/projects/page.tsx`](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/projects/page.tsx) (Project List), [`front-end/src/components/ui/WirelessExplorer.tsx`](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/components/ui/WirelessExplorer.tsx) (Wireless Explorer), [`front-end/src/app/contact/page.tsx`](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/contact/page.tsx) (Contact Page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio Site"]
  node_layout["Site Shell<br/>[layout.tsx]"]
  node_home["Home Page<br/>[page.tsx]"]
  node_about["About Page<br/>[page.tsx]"]
  node_project_list["Project List<br/>[page.tsx]"]
  node_contact["Contact Page<br/>[page.tsx]"]
end

subgraph group_showcases["Project Showcases"]
  node_routing["Routing Showcase<br/>[page.tsx]"]
  node_wireless["Wireless Showcase<br/>[page.tsx]"]
  node_event["Event Showcase<br/>[page.tsx]"]
  node_firetruck["Firetruck Showcase<br/>[page.tsx]"]
end

subgraph group_interactive["Interactive Topologies"]
  node_network_explorer["Network Explorer"]
  node_network_data["Network Topology Data<br/>[networkTopology.ts]"]
  node_wireless_explorer["Wireless Explorer"]
  node_wireless_data["Wireless Topology Data"]
  node_firetruck_explorer["Firetruck Explorer"]
  node_panzoom["Pan Zoom Hook<br/>[useSvgPanZoom.ts]"]
end

subgraph group_shared["Shared UI"]
  node_theme_provider["Theme Provider<br/>[ThemeProvider.tsx]"]
  node_theme_toggle["Theme Toggle<br/>[ThemeToggle.tsx]"]
end

node_visitor(("Visitor"))
node_email_client(("Email Client"))

node_visitor -->|"opens site"| node_layout
node_layout -->|"renders route"| node_home
node_layout -->|"renders route"| node_about
node_layout -->|"renders route"| node_project_list
node_layout -->|"renders route"| node_contact
node_layout -->|"wraps content"| node_theme_provider
node_layout -->|"renders control"| node_theme_toggle
node_project_list -->|"links project"| node_routing
node_project_list -->|"links project"| node_wireless
node_project_list -->|"links project"| node_event
node_project_list -->|"links project"| node_firetruck
node_wireless -->|"renders explorer"| node_wireless_explorer
node_wireless_explorer -->|"reads topology"| node_wireless_data
node_wireless_explorer -->|"uses controls"| node_panzoom
node_firetruck -->|"renders explorer"| node_firetruck_explorer
node_theme_toggle -->|"sets theme"| node_theme_provider
node_contact -->|"opens mail link"| node_email_client

click node_layout "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/layout.tsx"
click node_home "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/page.tsx"
click node_about "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/about/page.tsx"
click node_project_list "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/projects/page.tsx"
click node_contact "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/contact/page.tsx"
click node_routing "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/projects/advanced-enterprise-routing/page.tsx"
click node_wireless "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/projects/secure-enterprise-wireless/page.tsx"
click node_event "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/projects/ku-leuven-event-registration/page.tsx"
click node_firetruck "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/projects/autonomous-smart-firetruck/page.tsx"
click node_network_explorer "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/components/ui/NetworkExplorer.tsx"
click node_network_data "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/lib/data/networkTopology.ts"
click node_wireless_explorer "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/components/ui/WirelessExplorer.tsx"
click node_wireless_data "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/lib/data/wirelessTopology.ts"
click node_firetruck_explorer "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/components/ui/FiretruckExplorer.tsx"
click node_panzoom "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/lib/hooks/useSvgPanZoom.ts"
click node_theme_provider "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/components/ThemeProvider.tsx"
click node_theme_toggle "https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/components/ThemeToggle.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_about,node_project_list,node_contact,node_email_client toneBlue
class node_routing,node_wireless,node_event,node_firetruck toneAmber
class node_network_explorer,node_network_data,node_wireless_explorer,node_wireless_data,node_firetruck_explorer,node_panzoom toneMint
class node_theme_provider,node_theme_toggle toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio Site

- [Site Shell](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/layout.tsx): `front-end/src/app/layout.tsx`
- [Home Page](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/page.tsx): `front-end/src/app/page.tsx`
- [About Page](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/about/page.tsx): `front-end/src/app/about/page.tsx`
- [Project List](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/projects/page.tsx): `front-end/src/app/projects/page.tsx`
- [Contact Page](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/contact/page.tsx): `front-end/src/app/contact/page.tsx`

### Project Showcases

- [Routing Showcase](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/projects/advanced-enterprise-routing/page.tsx): `front-end/src/app/projects/advanced-enterprise-routing/page.tsx`
- [Wireless Showcase](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/projects/secure-enterprise-wireless/page.tsx): `front-end/src/app/projects/secure-enterprise-wireless/page.tsx`
- [Event Showcase](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/projects/ku-leuven-event-registration/page.tsx): `front-end/src/app/projects/ku-leuven-event-registration/page.tsx`
- [Firetruck Showcase](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/app/projects/autonomous-smart-firetruck/page.tsx): `front-end/src/app/projects/autonomous-smart-firetruck/page.tsx`

### Interactive Topologies

- [Network Explorer](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/components/ui/NetworkExplorer.tsx): `front-end/src/components/ui/NetworkExplorer.tsx`
- [Network Topology Data](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/lib/data/networkTopology.ts): `front-end/src/lib/data/networkTopology.ts`
- [Wireless Explorer](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/components/ui/WirelessExplorer.tsx): `front-end/src/components/ui/WirelessExplorer.tsx`
- [Wireless Topology Data](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/lib/data/wirelessTopology.ts): `front-end/src/lib/data/wirelessTopology.ts`
- [Firetruck Explorer](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/components/ui/FiretruckExplorer.tsx): `front-end/src/components/ui/FiretruckExplorer.tsx`
- [Pan Zoom Hook](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/lib/hooks/useSvgPanZoom.ts): `front-end/src/lib/hooks/useSvgPanZoom.ts`

### Shared UI

- [Theme Provider](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/components/ThemeProvider.tsx): `front-end/src/components/ThemeProvider.tsx`
- [Theme Toggle](https://github.com/matteogradinaru/portfolio-website/blob/main/front-end/src/components/ThemeToggle.tsx): `front-end/src/components/ThemeToggle.tsx`

### Other components

- **Visitor**
- **Email Client**

## Connections

- Visitor → Site Shell: opens site
- Site Shell → Home Page: renders route
- Site Shell → About Page: renders route
- Site Shell → Project List: renders route
- Site Shell → Contact Page: renders route
- Site Shell → Theme Provider: wraps content
- Site Shell → Theme Toggle: renders control
- Project List → Routing Showcase: links project
- Project List → Wireless Showcase: links project
- Project List → Event Showcase: links project
- Project List → Firetruck Showcase: links project
- Wireless Showcase → Wireless Explorer: renders explorer
- Wireless Explorer → Wireless Topology Data: reads topology
- Wireless Explorer → Pan Zoom Hook: uses controls
- Firetruck Showcase → Firetruck Explorer: renders explorer
- Theme Toggle → Theme Provider: sets theme
- Contact Page → Email Client: opens mail link