# rmbentouati-oss/professional-portfolio-for-content-creator architecture

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

- Interactive diagram: https://gitdiagram.com/rmbentouati-oss/professional-portfolio-for-content-creator
- Repository: https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator

## Overview

Asma’s portfolio is a single-page site for visitors to discover her profile, skills, projects, experience, and contact information. The README documents those content areas and responsive design; the available JavaScript implements a testimonial screenshot carousel, scroll-aware navigation, mobile-menu collapse, and section reveal effects. The tree contains only the root-level files, so the README’s alternate directory layout is not used as evidence. HTML structure and styling details are not sampled, so their internal wiring is left unspecified.

Main entry points: [`index.html`](https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/index.html) (Portfolio Page), [`main.js`](https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/main.js) (Page Interactions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_content["Portfolio Content"]
  node_portfolio["Portfolio Page<br/>[index.html]"]
  node_profile["Profile<br/>[index.html]"]
  node_skills["Skills<br/>[index.html]"]
  node_projects["Projects<br/>[index.html]"]
  node_experience["Experience<br/>[index.html]"]
  node_contact["Contact<br/>[index.html]"]
end

subgraph group_presentation["Responsive Presentation"]
  node_styles["Site Styling<br/>[style.css]"]
  node_responsive["Responsive Layout<br/>[index.html]"]
end

subgraph group_interaction["Page Interactions"]
  node_script["Page Interactions<br/>[main.js]"]
  node_testimonials["Testimonial Carousel<br/>[main.js]"]
  node_navigation["Scroll Navigation<br/>[main.js]"]
  node_reveal["Section Reveals<br/>[main.js]"]
  node_bootstrap["Bootstrap Collapse"]
end

node_visitor(("Visitor"))

node_visitor -->|"views"| node_portfolio
node_script -->|"reads markup"| node_portfolio
node_testimonials -->|"updates carousel"| node_portfolio
node_navigation -->|"tracks sections"| node_portfolio
node_reveal -->|"observes sections"| node_portfolio
node_script -->|"dispatches collapse"| node_bootstrap

click node_portfolio "https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/index.html"
click node_profile "https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/index.html"
click node_skills "https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/index.html"
click node_projects "https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/index.html"
click node_experience "https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/index.html"
click node_contact "https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/index.html"
click node_styles "https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/style.css"
click node_responsive "https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/index.html"
click node_script "https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/main.js"
click node_testimonials "https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/main.js"
click node_navigation "https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/main.js"
click node_reveal "https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/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_profile,node_skills,node_projects,node_experience,node_contact toneBlue
class node_styles,node_responsive toneAmber
class node_script,node_testimonials,node_navigation,node_reveal,node_bootstrap toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio Content

- [Portfolio Page](https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/index.html): `index.html`
- [Profile](https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/index.html): `index.html`
- [Skills](https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/index.html): `index.html`
- [Projects](https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/index.html): `index.html`
- [Experience](https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/index.html): `index.html`
- [Contact](https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/index.html): `index.html`

### Responsive Presentation

- [Site Styling](https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/style.css): `style.css`
- [Responsive Layout](https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/index.html): `index.html`

### Page Interactions

- [Page Interactions](https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/main.js): `main.js`
- [Testimonial Carousel](https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/main.js): `main.js`
- [Scroll Navigation](https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/main.js): `main.js`
- [Section Reveals](https://github.com/rmbentouati-oss/professional-portfolio-for-content-creator/blob/main/main.js): `main.js`
- **Bootstrap Collapse**

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio Page: views
- Page Interactions → Portfolio Page: reads markup
- Testimonial Carousel → Portfolio Page: updates carousel
- Scroll Navigation → Portfolio Page: tracks sections
- Section Reveals → Portfolio Page: observes sections
- Page Interactions → Bootstrap Collapse: dispatches collapse