# nolgia00/my-portfolio architecture

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

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

## Overview

This is a React portfolio site presenting its creator’s profile, skills, contact details, and work across web, games, music, and art. A visitor enters through the app shell, navigates to a page, and can browse project categories or open a project detail; the contact page presents a message form, though no submission service is evident in the supplied excerpts. Shared UI primitives support the pages. The project and skills views are documented in source excerpts; other page behavior is represented only where routing or imports establish it.

Main entry points: [`src/App.tsx`](https://github.com/nolgia00/my-portfolio/blob/main/src/App.tsx) (App routing), [`src/components/ui`](https://github.com/nolgia00/my-portfolio/tree/main/src/components/ui) (UI primitives), [`src/pages/Projects.tsx`](https://github.com/nolgia00/my-portfolio/blob/main/src/pages/Projects.tsx) (Project gallery), [`src/pages/ProjectDetail.tsx`](https://github.com/nolgia00/my-portfolio/blob/main/src/pages/ProjectDetail.tsx) (Project detail)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_bootstrap["React bootstrap<br/>[main.tsx]"]
  node_router["App routing<br/>[App.tsx]"]
end

subgraph group_portfolio["Portfolio pages"]
  node_hero["Home page<br/>[Hero.tsx]"]
  node_about["About profile<br/>[About.tsx]"]
  node_projects["Project gallery<br/>[Projects.tsx]"]
  node_project_detail["Project detail<br/>[ProjectDetail.tsx]"]
  node_skills["Skills overview<br/>[Skills.tsx]"]
  node_contacts["Contact page<br/>[Contacts.tsx]"]
end

subgraph group_content["Portfolio content"]
  node_project_data["Project catalog<br/>[projects.ts]"]
end

subgraph group_ui["Shared interface"]
  node_ui_primitives["UI primitives"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_bootstrap
node_bootstrap -->|"renders app"| node_router
node_visitor -->|"navigates routes"| node_router
node_router -->|"routes to"| node_hero
node_router -->|"routes to"| node_about
node_router -->|"routes to"| node_projects
node_router -->|"routes to"| node_project_detail
node_router -->|"routes to"| node_skills
node_router -->|"routes to"| node_contacts
node_projects -->|"reads catalog"| node_project_data
node_project_detail -->|"reads project"| node_project_data
node_hero -->|"uses controls"| node_ui_primitives
node_about -->|"uses components"| node_ui_primitives
node_projects -->|"uses components"| node_ui_primitives
node_project_detail -->|"uses components"| node_ui_primitives
node_skills -->|"uses components"| node_ui_primitives
node_contacts -->|"uses components"| node_ui_primitives
node_router -->|"uses navigation UI"| node_ui_primitives

click node_bootstrap "https://github.com/nolgia00/my-portfolio/blob/main/src/main.tsx"
click node_router "https://github.com/nolgia00/my-portfolio/blob/main/src/App.tsx"
click node_hero "https://github.com/nolgia00/my-portfolio/blob/main/src/pages/Hero.tsx"
click node_about "https://github.com/nolgia00/my-portfolio/blob/main/src/pages/About.tsx"
click node_projects "https://github.com/nolgia00/my-portfolio/blob/main/src/pages/Projects.tsx"
click node_project_detail "https://github.com/nolgia00/my-portfolio/blob/main/src/pages/ProjectDetail.tsx"
click node_skills "https://github.com/nolgia00/my-portfolio/blob/main/src/pages/Skills.tsx"
click node_contacts "https://github.com/nolgia00/my-portfolio/blob/main/src/pages/Contacts.tsx"
click node_project_data "https://github.com/nolgia00/my-portfolio/blob/main/src/data/projects.ts"
click node_ui_primitives "https://github.com/nolgia00/my-portfolio/tree/main/src/components/ui"

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_bootstrap,node_router toneBlue
class node_hero,node_about,node_projects,node_project_detail,node_skills,node_contacts toneAmber
class node_project_data toneMint
class node_ui_primitives toneRose
class node_visitor toneIndigo
```

## Components

### Application shell

- [React bootstrap](https://github.com/nolgia00/my-portfolio/blob/main/src/main.tsx): `src/main.tsx`
- [App routing](https://github.com/nolgia00/my-portfolio/blob/main/src/App.tsx): `src/App.tsx`

### Portfolio pages

- [Home page](https://github.com/nolgia00/my-portfolio/blob/main/src/pages/Hero.tsx): `src/pages/Hero.tsx`
- [About profile](https://github.com/nolgia00/my-portfolio/blob/main/src/pages/About.tsx): `src/pages/About.tsx`
- [Project gallery](https://github.com/nolgia00/my-portfolio/blob/main/src/pages/Projects.tsx): `src/pages/Projects.tsx`
- [Project detail](https://github.com/nolgia00/my-portfolio/blob/main/src/pages/ProjectDetail.tsx): `src/pages/ProjectDetail.tsx`
- [Skills overview](https://github.com/nolgia00/my-portfolio/blob/main/src/pages/Skills.tsx): `src/pages/Skills.tsx`
- [Contact page](https://github.com/nolgia00/my-portfolio/blob/main/src/pages/Contacts.tsx): `src/pages/Contacts.tsx`

### Portfolio content

- [Project catalog](https://github.com/nolgia00/my-portfolio/blob/main/src/data/projects.ts): `src/data/projects.ts`

### Shared interface

- [UI primitives](https://github.com/nolgia00/my-portfolio/tree/main/src/components/ui): `src/components/ui`

### Other components

- **Visitor**

## Connections

- Visitor → React bootstrap: opens site (evidence: `src/main.tsx`)
- React bootstrap → App routing: renders app (evidence: `src/main.tsx`)
- Visitor → App routing: navigates routes (evidence: `src/App.tsx`)
- App routing → Home page: routes to (evidence: `src/App.tsx`)
- App routing → About profile: routes to (evidence: `src/App.tsx`)
- App routing → Project gallery: routes to (evidence: `src/App.tsx`)
- App routing → Project detail: routes to (evidence: `src/App.tsx`)
- App routing → Skills overview: routes to (evidence: `src/App.tsx`)
- App routing → Contact page: routes to (evidence: `src/App.tsx`)
- Project gallery → Project catalog: reads catalog (evidence: `src/pages/Projects.tsx`)
- Project detail → Project catalog: reads project (evidence: `src/pages/ProjectDetail.tsx`)
- Home page → UI primitives: uses controls (evidence: `src/pages/Hero.tsx`)
- About profile → UI primitives: uses components (evidence: `src/pages/About.tsx`)
- Project gallery → UI primitives: uses components (evidence: `src/pages/Projects.tsx`)
- Project detail → UI primitives: uses components (evidence: `src/pages/ProjectDetail.tsx`)
- Skills overview → UI primitives: uses components (evidence: `src/pages/Skills.tsx`)
- Contact page → UI primitives: uses components (evidence: `src/pages/Contacts.tsx`)
- App routing → UI primitives: uses navigation UI (evidence: `src/App.tsx`)