# sklogic-build/my-portfolio architecture

> Architecture diagram of the GitHub repository sklogic-build/my-portfolio, 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/sklogic-build/my-portfolio
- Repository: https://github.com/sklogic-build/my-portfolio

## Overview

This is a static personal portfolio presenting the author’s background and projects. A visitor views the portfolio and can navigate its sections, browse project highlights, and submit the contact form; the form currently validates input and displays a simulated success message rather than sending it. The README documents HTML, CSS, responsive design, and the Odin Recipes and restaurant prototype projects. The HTML and CSS were not sampled, so their internal structure and exact wiring are not inferred.

Main entry points: [`index.html`](https://github.com/sklogic-build/my-portfolio/blob/main/index.html) (Portfolio page), [`script.js`](https://github.com/sklogic-build/my-portfolio/blob/main/script.js) (Contact form), [`style.css`](https://github.com/sklogic-build/my-portfolio/blob/main/style.css) (Page styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Portfolio presentation"]
  node_portfolio["Portfolio page<br/>[index.html]"]
  node_styles["Page styling<br/>[style.css]"]
end

subgraph group_interaction["Page interactions"]
  node_navigation["Navigation behavior<br/>[script.js]"]
  node_scroll["Scroll effects<br/>[script.js]"]
  node_animations["Reveal animations<br/>[script.js]"]
  node_contact["Contact form<br/>[script.js]"]
end

subgraph group_content["Portfolio content"]
  node_profile["About and learning<br/>[index.html]"]
  node_projects["Project highlights<br/>[index.html]"]
  node_odin["Odin Recipes<br/>[index.html]"]
  node_restaurant["Restaurant prototype<br/>[index.html]"]
end

node_visitor(("Visitor"))

node_visitor -->|"views"| node_portfolio
node_portfolio -->|"styled by"| node_styles
node_portfolio -->|"uses"| node_navigation
node_portfolio -->|"uses"| node_scroll
node_portfolio -->|"uses"| node_animations
node_portfolio -->|"uses"| node_contact
node_portfolio -->|"presents"| node_profile
node_portfolio -->|"presents"| node_projects
node_projects -->|"features"| node_odin
node_projects -->|"features"| node_restaurant
node_visitor -->|"submits"| node_contact

click node_portfolio "https://github.com/sklogic-build/my-portfolio/blob/main/index.html"
click node_styles "https://github.com/sklogic-build/my-portfolio/blob/main/style.css"
click node_navigation "https://github.com/sklogic-build/my-portfolio/blob/main/script.js"
click node_scroll "https://github.com/sklogic-build/my-portfolio/blob/main/script.js"
click node_animations "https://github.com/sklogic-build/my-portfolio/blob/main/script.js"
click node_contact "https://github.com/sklogic-build/my-portfolio/blob/main/script.js"
click node_profile "https://github.com/sklogic-build/my-portfolio/blob/main/index.html"
click node_projects "https://github.com/sklogic-build/my-portfolio/blob/main/index.html"
click node_odin "https://github.com/sklogic-build/my-portfolio/blob/main/index.html"
click node_restaurant "https://github.com/sklogic-build/my-portfolio/blob/main/index.html"

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_portfolio,node_styles toneBlue
class node_navigation,node_scroll,node_animations,node_contact toneAmber
class node_profile,node_projects,node_odin,node_restaurant toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio presentation

- [Portfolio page](https://github.com/sklogic-build/my-portfolio/blob/main/index.html): `index.html`
- [Page styling](https://github.com/sklogic-build/my-portfolio/blob/main/style.css): `style.css`

### Page interactions

- [Navigation behavior](https://github.com/sklogic-build/my-portfolio/blob/main/script.js): `script.js`
- [Scroll effects](https://github.com/sklogic-build/my-portfolio/blob/main/script.js): `script.js`
- [Reveal animations](https://github.com/sklogic-build/my-portfolio/blob/main/script.js): `script.js`
- [Contact form](https://github.com/sklogic-build/my-portfolio/blob/main/script.js): `script.js`

### Portfolio content

- [About and learning](https://github.com/sklogic-build/my-portfolio/blob/main/index.html): `index.html`
- [Project highlights](https://github.com/sklogic-build/my-portfolio/blob/main/index.html): `index.html`
- [Odin Recipes](https://github.com/sklogic-build/my-portfolio/blob/main/index.html): `index.html`
- [Restaurant prototype](https://github.com/sklogic-build/my-portfolio/blob/main/index.html): `index.html`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: views
- Portfolio page → Page styling: styled by
- Portfolio page → Navigation behavior: uses
- Portfolio page → Scroll effects: uses
- Portfolio page → Reveal animations: uses
- Portfolio page → Contact form: uses
- Portfolio page → About and learning: presents
- Portfolio page → Project highlights: presents
- Project highlights → Odin Recipes: features
- Project highlights → Restaurant prototype: features
- Visitor → Contact form: submits