# daiki0918/myportfolio architecture

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

## Overview

This is a personal portfolio site with a PHP-backed inquiry form. Visitors browse the portfolio and submit an inquiry; the browser validates and posts it to PHP, which validates and rate-limits the request before sending an owner notification and a visitor acknowledgment through Gmail SMTP. The README documents the form’s deployment requirements and behavior. Several frontend features share one JavaScript file; the HTML and PHP excerpts are incomplete, so links not directly shown or documented are omitted.

Main entry points: [`index.html`](https://github.com/daiki0918/myportfolio/blob/main/index.html) (Portfolio page), [`contact.php`](https://github.com/daiki0918/myportfolio/blob/main/contact.php) (Validate and rate-limit), [`js/jscript.js`](https://github.com/daiki0918/myportfolio/blob/main/js/jscript.js) (Contact form submit), [`css/style.css`](https://github.com/daiki0918/myportfolio/blob/main/css/style.css) (Site styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio experience"]
  node_portfolio["Portfolio page<br/>[index.html]"]
  node_interactive["Interactive features<br/>[jscript.js]"]
  node_styling["Site styling<br/>[style.css]"]
end

subgraph group_contact["Inquiry handling"]
  node_form["Contact form submit<br/>[jscript.js]"]
  node_handler["Validate and rate-limit<br/>[contact.php]"]
  node_session[("Rate-limit session<br/>[contact.php]")]
end

subgraph group_delivery["Email delivery"]
  node_mailer["SMTP mailer<br/>[contact.php]"]
  node_gmail["Gmail SMTP"]
end

node_visitor(("Visitor"))

node_visitor -->|"views"| node_portfolio
node_visitor -->|"submits inquiry"| node_form
node_form -->|"posts JSON"| node_handler
node_handler -->|"checks rate limit"| node_session
node_handler -->|"sends inquiry"| node_mailer
node_mailer -->|"sends via SMTP"| node_gmail
node_mailer -->|"sends acknowledgment"| node_visitor
node_portfolio -.->|"provides interactions"| node_interactive
node_portfolio -.->|"uses styles"| node_styling

click node_portfolio "https://github.com/daiki0918/myportfolio/blob/main/index.html"
click node_interactive "https://github.com/daiki0918/myportfolio/blob/main/js/jscript.js"
click node_styling "https://github.com/daiki0918/myportfolio/blob/main/css/style.css"
click node_form "https://github.com/daiki0918/myportfolio/blob/main/js/jscript.js"
click node_handler "https://github.com/daiki0918/myportfolio/blob/main/contact.php"
click node_session "https://github.com/daiki0918/myportfolio/blob/main/contact.php"
click node_mailer "https://github.com/daiki0918/myportfolio/blob/main/contact.php"

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_interactive,node_styling toneBlue
class node_form,node_handler,node_session toneAmber
class node_mailer,node_gmail toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio experience

- [Portfolio page](https://github.com/daiki0918/myportfolio/blob/main/index.html): `index.html`
- [Interactive features](https://github.com/daiki0918/myportfolio/blob/main/js/jscript.js): `js/jscript.js`
- [Site styling](https://github.com/daiki0918/myportfolio/blob/main/css/style.css): `css/style.css`

### Inquiry handling

- [Contact form submit](https://github.com/daiki0918/myportfolio/blob/main/js/jscript.js): `js/jscript.js`
- [Validate and rate-limit](https://github.com/daiki0918/myportfolio/blob/main/contact.php): `contact.php`
- [Rate-limit session](https://github.com/daiki0918/myportfolio/blob/main/contact.php): `contact.php`

### Email delivery

- [SMTP mailer](https://github.com/daiki0918/myportfolio/blob/main/contact.php): `contact.php`
- **Gmail SMTP**

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: views (evidence: `README.md`)
- Visitor → Contact form submit: submits inquiry (evidence: `js/jscript.js`)
- Contact form submit → Validate and rate-limit: posts JSON (evidence: `js/jscript.js`)
- Validate and rate-limit → Rate-limit session: checks rate limit (evidence: `contact.php`)
- Validate and rate-limit → SMTP mailer: sends inquiry (evidence: `contact.php`)
- SMTP mailer → Gmail SMTP: sends via SMTP (evidence: `contact.php`)
- SMTP mailer → Visitor: sends acknowledgment (evidence: `contact.php`)
- Portfolio page → Interactive features: provides interactions
- Portfolio page → Site styling: uses styles