# tudepraba/profil architecture

> Architecture diagram of the GitHub repository tudepraba/profil, 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/tudepraba/profil
- Repository: https://github.com/tudepraba/profil

## Overview

Tude Praba’s portfolio is a static personal website. A visitor opens the page to view profile and service information, resume, filtered project portfolio, sample blog, and contact details. The contact form is presentation-only and does not send messages. The README documents the page’s capabilities, but no source excerpts were provided, so implementation-level wiring beyond those documented behaviors is not asserted.

Main entry points: [`index.html`](https://github.com/tudepraba/profil/blob/main/index.html) (Portfolio page), [`assets/js/script.js`](https://github.com/tudepraba/profil/blob/main/assets/js/script.js) (Project category filter), [`assets/css/style.css`](https://github.com/tudepraba/profil/blob/main/assets/css/style.css) (Responsive styles), [`assets/images`](https://github.com/tudepraba/profil/tree/main/assets/images) (Profile, project images)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Portfolio content"]
  node_page["Portfolio page<br/>[index.html]"]
  node_about["About, services<br/>[index.html]"]
  node_resume["Resume, skills<br/>[index.html]"]
  node_projects["Project portfolio<br/>[index.html]"]
  node_blog["Sample blog<br/>[index.html]"]
  node_contact["Contact, map<br/>[index.html]"]
end

subgraph group_presentation["Page presentation"]
  node_styles["Responsive styles<br/>[style.css]"]
  node_images["Profile, project images"]
end

subgraph group_interaction["Page interactions"]
  node_contact_form["Contact form<br/>[index.html]"]
  node_filter["Project category filter<br/>[script.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_page
node_page -->|"presents"| node_about
node_page -->|"presents"| node_resume
node_page -->|"presents"| node_projects
node_page -->|"presents"| node_blog
node_page -->|"presents"| node_contact
node_page -->|"loads"| node_styles
node_page -->|"loads"| node_filter
node_page -->|"uses"| node_images
node_projects -->|"filters via"| node_filter
node_contact -->|"includes"| node_contact_form

click node_page "https://github.com/tudepraba/profil/blob/main/index.html"
click node_about "https://github.com/tudepraba/profil/blob/main/index.html"
click node_resume "https://github.com/tudepraba/profil/blob/main/index.html"
click node_projects "https://github.com/tudepraba/profil/blob/main/index.html"
click node_blog "https://github.com/tudepraba/profil/blob/main/index.html"
click node_contact "https://github.com/tudepraba/profil/blob/main/index.html"
click node_contact_form "https://github.com/tudepraba/profil/blob/main/index.html"
click node_filter "https://github.com/tudepraba/profil/blob/main/assets/js/script.js"
click node_styles "https://github.com/tudepraba/profil/blob/main/assets/css/style.css"
click node_images "https://github.com/tudepraba/profil/tree/main/assets/images"

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_page,node_about,node_resume,node_projects,node_blog,node_contact toneBlue
class node_styles,node_images toneAmber
class node_contact_form,node_filter toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio content

- [Portfolio page](https://github.com/tudepraba/profil/blob/main/index.html): `index.html`
- [About, services](https://github.com/tudepraba/profil/blob/main/index.html): `index.html`
- [Resume, skills](https://github.com/tudepraba/profil/blob/main/index.html): `index.html`
- [Project portfolio](https://github.com/tudepraba/profil/blob/main/index.html): `index.html`
- [Sample blog](https://github.com/tudepraba/profil/blob/main/index.html): `index.html`
- [Contact, map](https://github.com/tudepraba/profil/blob/main/index.html): `index.html`

### Page presentation

- [Responsive styles](https://github.com/tudepraba/profil/blob/main/assets/css/style.css): `assets/css/style.css`
- [Profile, project images](https://github.com/tudepraba/profil/tree/main/assets/images): `assets/images`

### Page interactions

- [Contact form](https://github.com/tudepraba/profil/blob/main/index.html): `index.html`
- [Project category filter](https://github.com/tudepraba/profil/blob/main/assets/js/script.js): `assets/js/script.js`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: opens
- Portfolio page → About, services: presents
- Portfolio page → Resume, skills: presents
- Portfolio page → Project portfolio: presents
- Portfolio page → Sample blog: presents
- Portfolio page → Contact, map: presents
- Portfolio page → Responsive styles: loads
- Portfolio page → Project category filter: loads
- Portfolio page → Profile, project images: uses
- Project portfolio → Project category filter: filters via
- Contact, map → Contact form: includes