# meliodasbatman/simple-portfolio architecture

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

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

## Overview

This is a static, six-page personal portfolio and beginner HTML/CSS teaching project. The main workflow is opening the home page in a browser, navigating among profile and learning pages, and viewing their styled content and illustrations. The README describes login as a form-design exercise, while the sampled JavaScript implements client-side credential checking and a password-visibility toggle; the HTML-to-script link is not confirmed by the available excerpts.

Main entry points: [`webpages/index.html`](https://github.com/meliodasbatman/simple-portfolio/blob/main/webpages/index.html) (Home page), [`webpages/about.html`](https://github.com/meliodasbatman/simple-portfolio/blob/main/webpages/about.html) (About page), [`webpages/hobby.html`](https://github.com/meliodasbatman/simple-portfolio/blob/main/webpages/hobby.html) (Hobbies page), [`webpages/activity.html`](https://github.com/meliodasbatman/simple-portfolio/blob/main/webpages/activity.html) (Activities page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_home["Home and navigation"]
  node_home_page["Home page<br/>[index.html]"]
end

subgraph group_portfolio["Portfolio pages"]
  node_about_page["About page<br/>[about.html]"]
  node_hobby_page["Hobbies page<br/>[hobby.html]"]
  node_activity_page["Activities page<br/>[activity.html]"]
  node_goal_page["Goals page<br/>[goal.html]"]
end

subgraph group_login["Login interaction"]
  node_login_page["Login page<br/>[login.html]"]
  node_login_logic["Login interaction<br/>[login.js]"]
end

subgraph group_presentation["Styles and media"]
  node_home_style["Home styles<br/>[style.css]"]
  node_about_style["About styles<br/>[about.css]"]
  node_hobby_style["Hobbies styles<br/>[hobby.css]"]
  node_activity_style["Activity styles<br/>[activity.css]"]
  node_goal_style["Goals styles<br/>[goal.css]"]
  node_login_style["Login styles<br/>[login.css]"]
  node_images["Illustrations"]
  node_video["Animated media"]
end

node_visitor(("Visitor"))
node_browser["Web browser"]

node_visitor -->|"opens pages"| node_browser
node_browser -->|"opens"| node_home_page
node_home_page -->|"links to"| node_about_page
node_home_page -->|"links to"| node_hobby_page
node_home_page -->|"links to"| node_activity_page
node_home_page -->|"links to"| node_goal_page
node_home_page -->|"links to"| node_login_page
node_about_page -->|"links to"| node_home_page
node_hobby_page -->|"links to"| node_home_page
node_activity_page -->|"links to"| node_home_page
node_goal_page -->|"links to"| node_home_page
node_login_page -->|"links to"| node_home_page
node_home_page -->|"loads styles"| node_home_style
node_about_page -->|"loads styles"| node_about_style
node_hobby_page -->|"loads styles"| node_hobby_style
node_activity_page -->|"loads styles"| node_activity_style
node_goal_page -->|"loads styles"| node_goal_style
node_login_page -->|"loads styles"| node_login_style
node_about_page -->|"references"| node_images
node_hobby_page -->|"references"| node_images
node_activity_page -->|"references"| node_images
node_goal_page -->|"references"| node_images
node_login_logic -->|"updates form"| node_login_page

click node_home_page "https://github.com/meliodasbatman/simple-portfolio/blob/main/webpages/index.html"
click node_about_page "https://github.com/meliodasbatman/simple-portfolio/blob/main/webpages/about.html"
click node_hobby_page "https://github.com/meliodasbatman/simple-portfolio/blob/main/webpages/hobby.html"
click node_activity_page "https://github.com/meliodasbatman/simple-portfolio/blob/main/webpages/activity.html"
click node_goal_page "https://github.com/meliodasbatman/simple-portfolio/blob/main/webpages/goal.html"
click node_login_page "https://github.com/meliodasbatman/simple-portfolio/blob/main/webpages/login.html"
click node_login_logic "https://github.com/meliodasbatman/simple-portfolio/blob/main/java/login.js"
click node_home_style "https://github.com/meliodasbatman/simple-portfolio/blob/main/css/style.css"
click node_about_style "https://github.com/meliodasbatman/simple-portfolio/blob/main/css/about.css"
click node_hobby_style "https://github.com/meliodasbatman/simple-portfolio/blob/main/css/hobby.css"
click node_activity_style "https://github.com/meliodasbatman/simple-portfolio/blob/main/css/activity.css"
click node_goal_style "https://github.com/meliodasbatman/simple-portfolio/blob/main/css/goal.css"
click node_login_style "https://github.com/meliodasbatman/simple-portfolio/blob/main/css/login.css"
click node_images "https://github.com/meliodasbatman/simple-portfolio/tree/main/images"
click node_video "https://github.com/meliodasbatman/simple-portfolio/tree/main/video"

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_home_page,node_browser toneBlue
class node_about_page,node_hobby_page,node_activity_page,node_goal_page toneAmber
class node_login_page,node_login_logic toneMint
class node_home_style,node_about_style,node_hobby_style,node_activity_style,node_goal_style,node_login_style,node_images,node_video toneRose
class node_visitor toneIndigo
```

## Components

### Home and navigation

- [Home page](https://github.com/meliodasbatman/simple-portfolio/blob/main/webpages/index.html): `webpages/index.html`

### Portfolio pages

- [About page](https://github.com/meliodasbatman/simple-portfolio/blob/main/webpages/about.html): `webpages/about.html`
- [Hobbies page](https://github.com/meliodasbatman/simple-portfolio/blob/main/webpages/hobby.html): `webpages/hobby.html`
- [Activities page](https://github.com/meliodasbatman/simple-portfolio/blob/main/webpages/activity.html): `webpages/activity.html`
- [Goals page](https://github.com/meliodasbatman/simple-portfolio/blob/main/webpages/goal.html): `webpages/goal.html`

### Login interaction

- [Login page](https://github.com/meliodasbatman/simple-portfolio/blob/main/webpages/login.html): `webpages/login.html`
- [Login interaction](https://github.com/meliodasbatman/simple-portfolio/blob/main/java/login.js): `java/login.js`

### Styles and media

- [Home styles](https://github.com/meliodasbatman/simple-portfolio/blob/main/css/style.css): `css/style.css`
- [About styles](https://github.com/meliodasbatman/simple-portfolio/blob/main/css/about.css): `css/about.css`
- [Hobbies styles](https://github.com/meliodasbatman/simple-portfolio/blob/main/css/hobby.css): `css/hobby.css`
- [Activity styles](https://github.com/meliodasbatman/simple-portfolio/blob/main/css/activity.css): `css/activity.css`
- [Goals styles](https://github.com/meliodasbatman/simple-portfolio/blob/main/css/goal.css): `css/goal.css`
- [Login styles](https://github.com/meliodasbatman/simple-portfolio/blob/main/css/login.css): `css/login.css`
- [Illustrations](https://github.com/meliodasbatman/simple-portfolio/tree/main/images): `images`
- [Animated media](https://github.com/meliodasbatman/simple-portfolio/tree/main/video): `video`

### Other components

- **Visitor**
- **Web browser**

## Connections

- Visitor → Web browser: opens pages
- Web browser → Home page: opens
- Home page → About page: links to
- Home page → Hobbies page: links to
- Home page → Activities page: links to
- Home page → Goals page: links to
- Home page → Login page: links to
- About page → Home page: links to
- Hobbies page → Home page: links to
- Activities page → Home page: links to
- Goals page → Home page: links to
- Login page → Home page: links to
- Home page → Home styles: loads styles
- About page → About styles: loads styles
- Hobbies page → Hobbies styles: loads styles
- Activities page → Activity styles: loads styles
- Goals page → Goals styles: loads styles
- Login page → Login styles: loads styles
- About page → Illustrations: references
- Hobbies page → Illustrations: references
- Activities page → Illustrations: references
- Goals page → Illustrations: references
- Login interaction → Login page: updates form