# samin-shorif-ai/portfolio-web architecture

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

- Interactive diagram: https://gitdiagram.com/samin-shorif-ai/portfolio-web
- Repository: https://github.com/samin-shorif-ai/portfolio-web

## Overview

This repository is a personal portfolio website. A visitor views the page; its JavaScript enhances the portfolio with navigation, project interactions, contact affordances, and animated visual sections. The sampled source supports these behaviors, but the README is empty and the HTML and CSS were not sampled, so page structure and styling details are not expanded here.

Main entry points: [`index.html`](https://github.com/samin-shorif-ai/portfolio-web/blob/main/index.html) (Portfolio page), [`js/main.js`](https://github.com/samin-shorif-ai/portfolio-web/blob/main/js/main.js) (Navigation and scrolling)

## Diagram (Mermaid)

```mermaid
flowchart TD

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

subgraph group_interaction["Navigation and content"]
  node_navigation["Navigation and scrolling<br/>[main.js]"]
  node_project_accordions["Project accordions<br/>[main.js]"]
  node_contact_reveals["Contact reveals<br/>[main.js]"]
  node_email_copy["Email copy<br/>[main.js]"]
end

subgraph group_visual["Motion and graphics"]
  node_smooth_scroll["Smooth scrolling<br/>[main.js]"]
  node_hero_animation["Hero animation<br/>[main.js]"]
  node_tool_sphere["Tools sphere<br/>[main.js]"]
end

node_visitor(("Visitor"))
node_gsap["GSAP and ScrollTrigger"]
node_lenis["Lenis"]
node_three["Three.js"]
node_simpleicons["Simple Icons CDN"]

node_visitor -->|"views"| node_portfolio
node_navigation -->|"updates DOM"| node_portfolio
node_project_accordions -->|"updates DOM"| node_portfolio
node_contact_reveals -->|"animates text"| node_portfolio
node_email_copy -->|"updates label"| node_portfolio
node_navigation -->|"registers plugin"| node_gsap
node_navigation -.->|"scrolls with"| node_lenis
node_smooth_scroll -->|"schedules frames"| node_gsap
node_smooth_scroll -->|"drives scrolling"| node_lenis
node_hero_animation -->|"renders scene"| node_three
node_hero_animation -->|"schedules frames"| node_gsap
node_tool_sphere -->|"schedules frames"| node_gsap
node_tool_sphere -->|"loads icons"| node_simpleicons

click node_portfolio "https://github.com/samin-shorif-ai/portfolio-web/blob/main/index.html"
click node_styles "https://github.com/samin-shorif-ai/portfolio-web/blob/main/css/style.css"
click node_navigation "https://github.com/samin-shorif-ai/portfolio-web/blob/main/js/main.js"
click node_project_accordions "https://github.com/samin-shorif-ai/portfolio-web/blob/main/js/main.js"
click node_contact_reveals "https://github.com/samin-shorif-ai/portfolio-web/blob/main/js/main.js"
click node_email_copy "https://github.com/samin-shorif-ai/portfolio-web/blob/main/js/main.js"
click node_smooth_scroll "https://github.com/samin-shorif-ai/portfolio-web/blob/main/js/main.js"
click node_hero_animation "https://github.com/samin-shorif-ai/portfolio-web/blob/main/js/main.js"
click node_tool_sphere "https://github.com/samin-shorif-ai/portfolio-web/blob/main/js/main.js"

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_project_accordions,node_contact_reveals,node_email_copy toneAmber
class node_smooth_scroll,node_hero_animation,node_tool_sphere toneMint
class node_visitor,node_gsap,node_lenis,node_three,node_simpleicons toneIndigo
```

## Components

### Portfolio experience

- [Portfolio page](https://github.com/samin-shorif-ai/portfolio-web/blob/main/index.html): `index.html`
- [Page styling](https://github.com/samin-shorif-ai/portfolio-web/blob/main/css/style.css): `css/style.css`

### Navigation and content

- [Navigation and scrolling](https://github.com/samin-shorif-ai/portfolio-web/blob/main/js/main.js): `js/main.js`
- [Project accordions](https://github.com/samin-shorif-ai/portfolio-web/blob/main/js/main.js): `js/main.js`
- [Contact reveals](https://github.com/samin-shorif-ai/portfolio-web/blob/main/js/main.js): `js/main.js`
- [Email copy](https://github.com/samin-shorif-ai/portfolio-web/blob/main/js/main.js): `js/main.js`

### Motion and graphics

- [Smooth scrolling](https://github.com/samin-shorif-ai/portfolio-web/blob/main/js/main.js): `js/main.js`
- [Hero animation](https://github.com/samin-shorif-ai/portfolio-web/blob/main/js/main.js): `js/main.js`
- [Tools sphere](https://github.com/samin-shorif-ai/portfolio-web/blob/main/js/main.js): `js/main.js`

### Other components

- **Visitor**
- **GSAP and ScrollTrigger**
- **Lenis**
- **Three.js**
- **Simple Icons CDN**

## Connections

- Visitor → Portfolio page: views
- Navigation and scrolling → Portfolio page: updates DOM (evidence: `js/main.js`)
- Project accordions → Portfolio page: updates DOM (evidence: `js/main.js`)
- Contact reveals → Portfolio page: animates text (evidence: `js/main.js`)
- Email copy → Portfolio page: updates label (evidence: `js/main.js`)
- Navigation and scrolling → GSAP and ScrollTrigger: registers plugin (evidence: `js/main.js`)
- Navigation and scrolling → Lenis: scrolls with (evidence: `js/main.js`)
- Smooth scrolling → GSAP and ScrollTrigger: schedules frames (evidence: `js/main.js`)
- Smooth scrolling → Lenis: drives scrolling (evidence: `js/main.js`)
- Hero animation → Three.js: renders scene (evidence: `js/main.js`)
- Hero animation → GSAP and ScrollTrigger: schedules frames (evidence: `js/main.js`)
- Tools sphere → GSAP and ScrollTrigger: schedules frames (evidence: `js/main.js`)
- Tools sphere → Simple Icons CDN: loads icons (evidence: `js/main.js`)